/* A camada de dados sobre o clipe. Tokens em marca.css — nada se redeclara aqui.
   Esta é a única tela do site com fundo #000 puro, e é de propósito: o filme
   ocupa o quadro inteiro e qualquer cinza ao redor denunciaria a moldura. */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;/* o preto do cinema, não o --noite da interface */overflow:hidden;font-family:var(--txt);color:var(--pedra)}
.palco{position:fixed;inset:0;display:grid;place-items:center}
.quadro{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;overflow:hidden}
.quadro video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
svg.camada{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--rot)}

.origem{position:absolute;left:2.4%;top:5%;font-size:.62rem;letter-spacing:.18em;opacity:0;transition:opacity .5s}
.origem.on{opacity:1}
.origem b{display:block;font-weight:500;color:var(--papel);font-size:.72rem;letter-spacing:.1em;margin-bottom:6px}
.origem span{display:block;color:rgba(250,250,248,.55);line-height:1.9}

.espectro{position:absolute;right:2.4%;top:5%;width:26%;opacity:0;transition:opacity .6s}
.espectro.on{opacity:1}
.espectro canvas{width:100%;height:84px;display:block;border-bottom:1px solid var(--linha)}
.espectro .eixo{display:flex;justify-content:space-between;font-size:.5rem;letter-spacing:.12em;
  color:rgba(250,250,248,.4);margin-top:7px}
.espectro .cab{font-size:.55rem;letter-spacing:.2em;color:rgba(250,250,248,.5);margin-bottom:9px}
.espectro .cab i{color:var(--fio);font-style:normal}

.eventos{position:absolute;right:2.4%;bottom:9%;width:34%;text-align:right}
.eventos .ms{font-size:2.1rem;font-weight:300;color:var(--fio);letter-spacing:-.01em;line-height:1}
.eventos .q{font-size:.66rem;letter-spacing:.24em;color:var(--papel);margin-top:12px}
.eventos .i{font-size:.62rem;letter-spacing:.03em;color:rgba(250,250,248,.55);margin-top:9px;
  line-height:1.65;font-family:var(--txt)}
.eventos .cx{opacity:0;transition:opacity .35s ease}
.eventos .cx.on{opacity:1}
.trilho{display:flex;gap:6px;justify-content:flex-end;margin-top:20px}
.trilho b{width:26px;height:2px;background:rgba(250,250,248,.16);transition:background .3s}
.trilho b.foi{background:rgba(240,168,60,.45)}
.trilho b.ora{background:var(--fio)}

.bytes{position:absolute;left:2.4%;right:2.4%;bottom:3.2%;font-size:.5rem;letter-spacing:.08em;
  color:rgba(250,250,248,.30);white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .6s}
.bytes.on{opacity:1}

.campos{position:absolute;right:4%;top:22%;width:32%}
.cp{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(250,250,248,.08);
  font-size:.62rem;letter-spacing:.08em;opacity:0;transform:translateX(10px);transition:all .5s ease}
.cp.on{opacity:1;transform:none}
.cp .k{color:rgba(250,250,248,.45);letter-spacing:.16em}
.cp .v{color:var(--papel);text-align:right}
.cp .v em{font-style:normal;color:var(--fio)}

.registro{position:absolute;right:3%;top:14%;width:34%}
.registro .cab{font-size:.55rem;letter-spacing:.2em;color:rgba(250,250,248,.45);
  padding-bottom:10px;border-bottom:1px solid var(--linha);margin-bottom:4px}
.rg{padding:10px 0;border-bottom:1px solid rgba(250,250,248,.07);font-size:.6rem;letter-spacing:.06em;
  opacity:0;transform:translateY(8px);transition:all .5s ease}
.rg.on{opacity:1;transform:none}
.rg b{font-weight:400;color:var(--papel);letter-spacing:.1em}
.rg i{font-style:normal;color:rgba(250,250,248,.45);display:block;margin-top:4px;line-height:1.6}

.conta{position:absolute;right:3%;top:12%;width:30%;text-align:right;opacity:0;transition:opacity .6s}
.conta.on{opacity:1}
.conta .cab{font-size:.55rem;letter-spacing:.2em;color:rgba(250,250,248,.45)}
.conta .n{font-family:var(--tit);font-weight:500;font-size:3.4rem;line-height:1;
  color:var(--papel);margin-top:14px;letter-spacing:-.02em}
.conta .n u{text-decoration:none;color:rgba(250,250,248,.35);font-size:1.5rem}
.conta .barra{height:2px;background:rgba(250,250,248,.14);margin-top:18px}
.conta .barra i{display:block;height:100%;width:0;background:var(--ok)}
.conta .pe{font-size:.58rem;letter-spacing:.14em;color:var(--ok);margin-top:12px}

.alerta{position:absolute;right:4%;top:20%;width:31%;border:1px solid rgba(240,168,60,.5);
  background:rgba(12,10,7,.66);backdrop-filter:blur(8px);padding:22px 24px;
  opacity:0;transform:translateY(10px);transition:all .6s ease}
.alerta.on{opacity:1;transform:none}
.alerta .cab{font-size:.55rem;letter-spacing:.22em;color:var(--fio)}
.alerta .q{font-size:.86rem;font-family:var(--txt);color:var(--papel);margin-top:14px;line-height:1.45}
.alerta .i{font-size:.58rem;letter-spacing:.06em;color:rgba(250,250,248,.5);margin-top:14px;line-height:1.6}

.aprova{position:absolute;right:4%;top:22%;width:32%;border:1px solid var(--linha);
  background:rgba(10,11,13,.7);backdrop-filter:blur(8px);padding:24px 26px;
  opacity:0;transform:translateY(10px);transition:all .6s ease}
.aprova.on{opacity:1;transform:none}
.aprova .cab{font-size:.55rem;letter-spacing:.22em;color:rgba(250,250,248,.45)}
.aprova .q{font-size:.9rem;font-family:var(--txt);color:var(--papel);margin-top:14px;line-height:1.45}
.aprova .v{font-family:var(--tit);font-weight:500;font-size:1.7rem;color:var(--papel);margin-top:12px}
.aprova .bt{display:flex;gap:10px;margin-top:20px}
.aprova .bt span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;border-radius:999px;
  padding:9px 16px;border:1px solid var(--linha);color:rgba(250,250,248,.6)}
.aprova .bt span.p{border-color:var(--ok);color:var(--ok)}
.aprova .i{font-size:.55rem;letter-spacing:.06em;color:rgba(250,250,248,.42);margin-top:16px;line-height:1.6}

/* AS PASTILHAS FICAM ACIMA DA LEGENDA. Elas estavam em `bottom:10%` e a
   legenda em `bottom:9vh`: as duas disputavam a mesma faixa da base, e no
   retrato — onde a legenda ocupa a largura inteira em vez da coluna de 26ch —
   os nomes das salas caíam por cima do título e do parágrafo. */
.salas{position:absolute;left:0;right:0;bottom:30%;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 6%}
.salas span{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--linha);
  border-radius:999px;padding:9px 18px;color:rgba(250,250,248,.55);background:rgba(10,11,13,.45);
  backdrop-filter:blur(6px);opacity:0;transform:translateY(8px);transition:all .5s ease}
.salas span.on{opacity:1;transform:none;color:var(--papel);border-color:rgba(240,168,60,.45)}

.moldura{position:absolute;left:39.06%;top:37.22%;width:19.69%;height:19.44%;background:var(--dia);
  overflow:hidden;opacity:0;transition:opacity 1s ease,box-shadow 1.6s ease}
.moldura.on{opacity:1;box-shadow:0 0 60px 18px rgba(190,225,255,.22),0 0 160px 60px rgba(150,195,240,.14)}
.painel{position:absolute;left:50%;top:50%;width:1600px;height:900px;margin:-450px 0 0 -800px;
  transform-origin:center center;background:var(--dia);color:var(--grafite);padding:54px 64px;font-family:var(--txt)}
/* Era o espectro RGB do IHC — a assinatura de OUTRA marca dentro do nosso
   produto. Virou o próprio símbolo do Zigurate, desenhado com background:
   quatro linhas que encurtam ao subir e o ponto âmbar no topo. O traço é
   currentColor, então serve no painel claro e no escuro sem segunda versão. */
.espec{width:60px;height:30px;
  background-image:
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    radial-gradient(circle,var(--fio) 44%,transparent 46%);
  background-size:60px 2px,44px 2px,28px 2px,13px 2px,7px 7px;
  background-position:left 26px,left 20px,left 14px,left 8px,left 0;
  background-repeat:no-repeat}
.painel h3{font-family:var(--tit);font-weight:500;font-size:40px;margin-top:26px}
.painel .big{font-family:var(--tit);font-weight:500;font-size:104px;line-height:1;margin-top:30px}
.painel .rot{font-size:13px;color:var(--grafite3);margin-top:12px}
.painel .cds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.painel .cd{background:var(--dia2);border:1px solid var(--cerca);border-radius:14px;padding:24px 26px}
.painel .cd b{display:block;font-size:13px;color:var(--grafite3);font-weight:400}
.painel .cd u{display:block;text-decoration:none;font-family:var(--tit);font-weight:500;font-size:38px;margin-top:10px}
.painel .lst{margin-top:44px;border-top:1px solid var(--cerca)}
.painel .lin{display:flex;justify-content:space-between;padding:19px 2px;border-bottom:1px solid var(--cerca);
  font-size:19px;font-weight:300}

/* A LEGENDA PRECISA DE CHÃO, e não só de sombra. Ela tinha um `text-shadow`
   como única proteção, o que basta enquanto o plano é escuro — mas a cena das
   salas TERMINA QUASE BRANCA, e ali o título sumia junto com o clarão. O véu
   é fixo na base e fica atrás do texto, dentro do próprio stacking da `.leg`,
   para não passar por cima da camada de dados. */
.leg{position:fixed;left:6vw;bottom:9vh;max-width:26ch;z-index:6;text-shadow:0 4px 40px rgba(0,0,0,.95)}
.leg::before{content:"";position:fixed;left:0;right:0;bottom:0;height:38vh;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(10,11,13,.55) 42%,rgba(10,11,13,.9) 100%)}
.leg h2{font-family:var(--tit);font-weight:600;font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.16;color:var(--papel)}
.leg p{font-size:.85rem;color:rgba(250,250,248,.68);margin-top:10px;font-family:var(--txt)}

/* OS CONTROLES DE CENA. Eram nove traços de 34x3px: clicáveis desde sempre,
   e ninguém descobria. Agora cada um traz o ícone da cena e o nome dela, e
   quem olha entende em um segundo que dá para pular direto para "a leitura".
   O filme continua andando sozinho; isto é atalho, não substituto.
   O TRAÇO COMPENSA O TAMANHO, como no resto do site: o viewBox tem 90 de
   altura, então a 24px um stroke de 1.2 daria 0,32px e o browser diluiria o
   desenho em cinza. 4.5 devolve ~1,2px reais. */
.marcas{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:7;
  max-width:96vw;overflow-x:auto;scrollbar-width:none;padding:2px}
.marcas::-webkit-scrollbar{display:none}
.marcas button{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;
  width:80px;padding:10px 5px 9px;border:1px solid transparent;border-radius:12px;
  background:rgba(10,11,13,.5);color:rgba(250,250,248,.4);cursor:pointer;
  backdrop-filter:blur(8px);transition:color .25s,border-color .25s,background .25s}
.marcas button i{display:block;width:34px;height:27px}
.marcas button i svg{width:100%;height:100%;overflow:visible;stroke-width:4.5}
.marcas button s{text-decoration:none;font-family:var(--rot);font-size:.44rem;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.marcas button:hover{color:rgba(250,250,248,.82);border-color:var(--linha)}
.marcas button.foi{color:rgba(240,168,60,.5)}
.marcas button.ora{color:var(--fio);border-color:var(--fio-borda);background:rgba(10,11,13,.78)}
/* o nome da cena era uma legenda separada embaixo das marcas; agora cada
   controle já diz o nome, e repetir seria ruído */
.nome{display:none}
.nome{position:fixed;top:34px;left:50%;transform:translateX(-50%);z-index:7;
  font-family:var(--rot);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(250,250,248,.42);white-space:nowrap}

/* o app: uma coluna, tudo empilha, nada some */
@media (max-width:899px){
  .quadro{width:min(100vw,56.25vh);height:auto;aspect-ratio:9/16}
  .origem,.espectro{position:static;width:auto;opacity:1;padding:0 6vw}
  .espectro{margin-top:18px}
  /* O HUD COMEÇA ABAIXO DOS CONTROLES. No retrato a fileira de cenas e a
     camada de dados disputavam a mesma faixa do topo: o cabeçalho do registro
     e a primeira linha da lista ficavam ATRÁS dos botões, ilegíveis. No
     desktop sobra largura e o problema não aparece. */
  .hud{display:flex;flex-direction:column;justify-content:flex-start;padding-top:132px;overflow:hidden}
  .eventos,.campos,.registro,.conta,.alerta,.aprova{position:static;width:auto;margin:22px 6vw 0;text-align:left}
  .eventos{text-align:left}.trilho{justify-content:flex-start}
  .conta{text-align:left}
  /* AS PASTILHAS DA ÚLTIMA CENA VOLTARAM, COMO FILEIRA QUE ROLA.
     Elas tinham sido ESCONDIDAS aqui, e escondido foi conserto errado: o
     problema era que seis etiquetas com `flex-wrap` viravam três linhas
     empilhadas em cima da legenda, e eu tratei o sintoma apagando a
     informação. Ele cobrou em 12/08: *"as infos que vc tirou da tela"*.

     O certo é o que a fileira de cenas do topo já faz: uma linha só, que
     vaza para o lado de propósito, com a máscara na borda entregando que há
     mais. `flex-wrap:nowrap` é o que resolve a colisão; o resto é para a
     pessoa saber que pode arrastar. E ela sobe para 26vh, acima da legenda,
     que vive em 13vh. */
  .salas{bottom:26vh;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding:0 6vw;scrollbar-width:none;scroll-behavior:smooth;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 86%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 86%,transparent 100%)}
  .salas::-webkit-scrollbar{display:none}
  /* sem `flex:none` a pastilha encolhe para caber e o texto quebra no meio */
  .salas span{flex:none;padding:8px 15px;font-size:.54rem}
  .leg{left:6vw;right:6vw;bottom:13vh;max-width:none}
  /* A fileira vaza da tela de propósito — são nove cenas —, mas nada dizia
     isso e ela parecia terminar cortada na borda. O recuo à direita e a
     máscara que apaga a última pastilha entregam que há mais para o lado. */
  .marcas{left:0;transform:none;max-width:100vw;padding:2px 10px 2px 10px;
    justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
  .marcas button{width:66px;padding:7px 4px 6px}
  .marcas button i{width:26px;height:21px}
  .marcas button s{font-size:.4rem;letter-spacing:.06em}
  .nome{top:30px;font-size:.5rem}
  .bytes{display:none}
}