/* =========================================================
   cultura-grafite.css — a identidade Grafite Noturno aplicada
   à página de cultura do Peixe Persa.

   Extraída de globalpecas.com.br e guardada no acervo do cannonball
   como o design-system `grafite-noturno`. Esta folha traduz aquela
   identidade para a estrutura desta página.

   ATENÇÃO — esta camada CONTRARIA identidade/design-guide.md, que lista
   "Introduzir cor" e "arredondar cantos, aplicar sombra, gradiente ou
   brilho" no que NUNCA fazer. Foi decisão explícita do cliente, tomada
   depois de a divergência ser apontada. Se o guia voltar a ser a
   autoridade final, a variante que o respeita está em ../cultura-rua/.

   Carrega DEPOIS de site.css. Reverter = apagar o <link>.
   ========================================================= */

/* ---------- 1. A PALETA ----------
   O site inteiro do Persa é escrito sobre --preto e --branco. Em vez de
   reescrever cada regra, remapeamos os dois nomes: tudo que herdava
   passa a herdar a cor certa sozinho. */
:root{
  --preto:#080B16;              /* deixa de ser preto puro */
  --branco:#F5F8FF;             /* deixa de ser branco puro */
  --cinza-texto:#93A0BC;
  --cinza-texto-inv:#93A0BC;
  --linha:rgba(56,225,242,.22);
  --linha-forte:rgba(56,225,242,.50);
  --linha-inv:rgba(56,225,242,.22);
  --linha-inv-forte:rgba(56,225,242,.50);
  --veu:rgba(8,11,22,.72);

  /* tokens do Grafite Noturno que o Persa não tinha */
  --surface:#101827;
  --surface-2:#18233A;
  --ink:#F5F8FF;
  --ink-2:#C6D0E6;
  --ink-3:#93A0BC;
  --accent:#2E74FF;
  --accent-hi:#5B90FF;
  --blue-txt:#7FB3FF;           /* azul de TEXTO — 9.16:1 sobre o fundo */
  --cyan:#38E1F2;               /* a faísca: ativo, exclusivo, borda */
  --cyan-soft:rgba(56,225,242,.13);
  --ok:#2FD08A;

  /* forma: aqui há raio e brilho, ao contrário do Persa */
  --raio:12px;
  --r-sm:8px;
  --r-full:999px;
  --glow:0 14px 36px rgba(46,116,255,.30);

  /* as cinco vozes, cada uma com posto fixo */
  --font-tag:"Sedgwick Ave Display",cursive;   /* tag de grafite */
  --font-gt:"Pirata One",cursive;              /* gótica */
  --font-lt:"Bungee",cursive;                  /* lettering de placa */
  --font-d:"Sora",system-ui,sans-serif;        /* display e UI */
  --font-b:"Inter",system-ui,sans-serif;       /* corpo */
}

/* O fundo do Global Peças não é chapado: são focos de luz de showroom
   noturno sobre o quase-preto. */
body{
  background:
    radial-gradient(1200px 700px at 82% -4%, rgba(46,116,255,.13), transparent 54%),
    radial-gradient(800px 520px at 0% 30%, rgba(56,225,242,.05), transparent 55%),
    var(--preto);
  font-family:var(--font-b);
  color:var(--ink);
}

/* ---------- 2. A INVERSÃO ----------
   O Persa alterna preto e branco. Numa identidade toda escura isso não
   existe: .inv deixa de virar branco e passa a ser ELEVAÇÃO — a mesma
   função de ritmo, resolvida por superfície em vez de troca de polo. */
.inv{
  background:var(--surface);
  color:var(--ink);
  --cinza-texto:var(--ink-3);
  --linha:rgba(56,225,242,.22);
  --linha-forte:rgba(56,225,242,.50);
}

/* ---------- 3. TIPOGRAFIA ----------
   Cinco famílias só se pagam com posto fixo para cada uma. */

/* o h1 da página é o momento de tag: grande, de marcador, e é só um */
.pagina-topo h1{
  font-family:var(--font-tag);
  font-weight:400;
  letter-spacing:0;
  line-height:1;
  color:var(--ink);
}

/* Título de seção na mesma voz do `cultura`: a tag de marcador.

   Três ajustes que a troca exige, e que não são preciosismo:

   · peso 400. A Sedgwick só existe nesse peso — pedir 700/800 faz o
     navegador engordar o desenho por conta própria (negrito sintético), e
     num traço de marcador isso vira borrão.
   · tracking positivo. O -.02em que estava aqui é medida de grotesca; em
     letra de pincel as formas já se tocam e fechar mais empasta.
   · entrelinha maior. O desenho tem ascendente e descendente longos, e
     em .98 as linhas se encavalam. */
.secao .cabeca-secao h2,
.secao h2{
  font-family:var(--font-tag);
  font-weight:400;
  font-size:var(--t-xl);
  line-height:1.14;
  letter-spacing:.012em;
}

/* a etiqueta vira plaqueta de rua: Bungee, ciano, com moldura */
.etiqueta{
  font-family:var(--font-lt);
  font-weight:400;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--cyan);
  border:1px solid var(--linha-forte);
  border-radius:var(--r-sm);
  padding:.45em .85em;
  background:var(--cyan-soft);
  width:max-content;
  max-width:100%;
}

.linha-fina{color:var(--ink-2);font-family:var(--font-b)}
.texto{color:var(--ink-3)}
.legenda{color:var(--ink-3)}

/* ---------- 4. O MENU: PAINEL VERTICAL NUMERADO ----------
   O menu horizontal com barra de vidro não falava a língua da página. O
   Global Peças resolve navegação como uma LISTA VERTICAL pintada no muro:
   número em plaqueta, item grande em letra de marcador, e a marcação de
   onde você está. É isso aqui.

   Vira overlay em TODA largura, não só no celular. O `site.js` já sabe
   abrir e fechar (ele põe `aberto` no `#menu`), e não olha a largura da
   tela — então o mesmo comportamento serve desktop e mobile sem uma linha
   de script novo.

   A barra de vidro do topo sai junto: sobra a logo e o mascote. */
.topo.fixo,.topo.rolado{
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
}

/* a logo sobe junto com o mascote: o painel cobre a tela inteira e ela
   precisa continuar visível e clicável por cima dele */
.marca{position:relative;z-index:2}

/* --- o painel --- */
.menu{
  position:fixed;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(.15rem,1.2vh,.9rem);
  padding:7rem var(--gutter) var(--gutter);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .55s var(--ease);
  counter-reset:nav;
  background:var(--preto);
}
/* O fundo do painel é o quadro do hero, não uma foto do acervo.
   Testei as do acervo primeiro e nenhuma serve: são registros diurnos da
   praça real, cinza e lavados, que brigam com a paleta noturna em vez de
   sustentá-la. O pôster do hero é a única imagem com essa linguagem —
   skatepark à noite, grafite colorido, azul — e usá-lo amarra o painel ao
   topo da página.

   `background-position` em 72% empurra o mascote para a direita, longe da
   coluna onde a lista vive. O véu é forte na esquerda, pelo texto, e
   afrouxa à direita para a cena aparecer. */
.menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg, rgba(8,11,22,.95) 0%, rgba(8,11,22,.88) 40%, rgba(8,11,22,.60) 100%),
    url(../img/hero-mascote-poster.webp) 72% center/cover no-repeat;
}
/* `painel-aberto` é a classe desta camada, posta pelo cultura-grafite.js.
   `aberto` é a do site.js e fica aqui como degradação: se este JS não
   carregar, o botão volta a ser do site e o painel ainda abre — só volta
   a fechar sozinho no resize, que é o comportamento antigo. */
.menu.painel-aberto,
.menu.aberto{transform:none}

/* --- cada item: plaqueta + letra de marcador --- */
.menu a{
  display:flex;
  align-items:center;
  gap:clamp(.7rem,1.6vw,1.15rem);
  font-family:var(--font-tag);
  font-size:clamp(1.6rem,4.4vw,3.1rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.01em;
  text-transform:lowercase;
  color:var(--ink);
  padding-block:.12em;
  background-image:none;      /* desliga o sublinhado que cresce, do site */
  transition:color var(--dur) var(--ease);
}
.menu a::before{
  counter-increment:nav;
  content:counter(nav,decimal-leading-zero);
  flex:0 0 auto;
  font-family:var(--font-d);
  font-weight:700;
  font-size:clamp(9px,1vw,11px);
  letter-spacing:.1em;
  color:var(--cyan);
  border:1px solid var(--linha-forte);
  border-radius:var(--r-sm);
  padding:.4em .6em;
  background:var(--cyan-soft);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.menu a:hover,.menu a:focus-visible{color:var(--cyan)}
.menu a:hover::before,.menu a:focus-visible::before{background:var(--cyan);color:var(--preto)}

/* onde você está — a marcação que o Global Peças faz e que dá o tom */
.menu a.ativo{color:var(--cyan)}
.menu a.ativo::before{background:var(--cyan);color:var(--preto)}
.menu a.ativo::after{
  content:"você tá aqui";
  font-family:var(--font-d);
  font-weight:700;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-left:.2em;
  white-space:nowrap;
}
@media (max-width:520px){
  .menu a.ativo::after{display:none}
}

/* --- o sinalizador: o mascote no lugar do hamburguer --- */
.hamburguer{
  display:flex;
  position:relative;
  z-index:2;                  /* fica clicável por cima do painel aberto */
  width:clamp(52px,5vw,64px);
  height:clamp(52px,5vw,64px);
  margin-right:0;
  border-radius:var(--r-full);
  background:url(../img/mascote-avatar.webp) center/cover no-repeat var(--surface);
  border:2px solid var(--linha-forte);
  box-shadow:var(--glow);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
/* as três barras somem: quem sinaliza agora é o rosto */
.hamburguer span{display:none}
.hamburguer:hover,.hamburguer:focus-visible{
  border-color:var(--cyan);
  transform:scale(1.05);
}
/* aberto, o anel acende e um X aparece por cima do rosto */
.hamburguer[aria-expanded="true"]{border-color:var(--cyan)}
.hamburguer[aria-expanded="true"]::after{
  content:"×";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-d);
  font-size:28px;
  font-weight:700;
  color:var(--ink);
  background:rgba(8,11,22,.66);
  border-radius:inherit;
}

/* ---------- 4b. O SINALIZADOR SÓ APARECE DEPOIS DA SEGUNDA DOBRA ----------
   Quem chega vê o hero limpo: logo à esquerda e nada mais. O mascote entra
   quando o visitante já passou de duas alturas de janela. A régua está no
   cultura-grafite.js (a constante DOBRAS).

   A classe `menu-por-rolagem` é posta pelo JS, nunca no HTML: sem script o
   mascote fica visível o tempo todo, que é a degradação correta. Esconder
   navegação por padrão e depender de script para trazê-la de volta
   deixaria o site sem menu quando o JS falha.

   É `display:none` de verdade, não opacidade: some do layout e da árvore
   de acessibilidade, sem elemento invisível recebendo Tab. O painel some
   junto, para não haver link tabulável antes de existir botão que o abra.

   Escrito como `:not(.menu-visivel)` de propósito: quando volta, nenhum
   override desta folha se aplica e as regras acima voltam a mandar. */
.topo.menu-por-rolagem:not(.menu-visivel) .hamburguer,
.topo.menu-por-rolagem:not(.menu-visivel) .menu{display:none}

/* `display` não transiciona, então a entrada é animação, não transição.
   Só o mascote entra: o painel é posicionado por transform e animá-lo
   deixaria `transform:none` valendo, o que o escancararia sozinho. */
.topo.menu-por-rolagem.menu-visivel .hamburguer{
  animation:mascoteEntra .4s var(--ease) both;
}
@keyframes mascoteEntra{
  from{opacity:0;transform:scale(.7)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .topo.menu-por-rolagem.menu-visivel .hamburguer{animation:none}
  .menu{transition:none}
}


/* ---------- 5. BOTÕES E LINKS ----------
   O Global Peças preenche o CTA com --accent #2E74FF e põe rótulo
   branco: isso mede 4.15:1 e REPROVA em texto normal. Aqui o
   preenchimento é a faísca ciano com tinta escura, que dá 12.36:1 e
   mantém a mesma leitura visual. É a armadilha registrada no acervo,
   corrigida na aplicação em vez de copiada. */
.btn-solido,
.inv .btn-solido{
  background:var(--cyan);
  color:var(--preto);
  border-color:var(--cyan);
  border-radius:var(--r-full);
  font-family:var(--font-d);
  font-weight:700;
  box-shadow:var(--glow);
}
.btn-solido:hover,.btn-solido:focus-visible,
.inv .btn-solido:hover,.inv .btn-solido:focus-visible{
  background:transparent;
  color:var(--cyan);
}
.btn-vazado{border-radius:var(--r-full);border-color:var(--linha-forte);color:var(--ink)}
.btn-vazado:hover,.btn-vazado:focus-visible,
.inv .btn-vazado:hover,.inv .btn-vazado:focus-visible{background:var(--cyan);color:var(--preto)}

.link{color:var(--blue-txt);font-family:var(--font-d);font-weight:600}
.link:hover,.link:focus-visible{color:var(--cyan)}

.pendente{
  border-color:var(--cyan);
  color:var(--cyan);
  border-radius:var(--r-full);
  font-family:var(--font-d);
  font-weight:600;
}

/* ---------- 6. MÍDIA ----------
   A regra do Persa dessatura toda foto. Aqui é o oposto: o grafite É o
   assunto, e ele só existe em cor. */
.figura img,
.comparador img{filter:none}
.figura:hover img,.figura:focus-within img{filter:none;transform:scale(1.03)}
.figura{border-radius:var(--raio);border:1px solid var(--linha)}
.comparador{border-radius:var(--raio);border-color:var(--linha)}
.comparador-alca{background:var(--cyan)}
.comparador-alca::before{border-color:var(--cyan);background:rgba(8,11,22,.55)}
.comparador-rotulo{
  font-family:var(--font-d);
  font-weight:700;
  color:var(--cyan);
  border:1px solid var(--linha-forte);
  border-radius:var(--r-sm);
  background:rgba(8,11,22,.72);
}

/* ---------- 7. O MURO ----------
   A textura que carrega o peso visual no Global Peças. Aqui em COR,
   porque é grafite de verdade e é o assunto da página. O véu garante o
   contraste do texto por cima. */
.secao.muro{position:relative;overflow:hidden}
.secao.muro>*{position:relative;z-index:1}
.secao.muro::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url(../img/acervo/sk8-antes-muro.webp) center/cover no-repeat;
  opacity:.58;
}
/* o véu é o que torna o texto legível sobre foto colorida */
.secao.muro::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(8,11,22,.86), rgba(8,11,22,.72) 55%, rgba(8,11,22,.92));
}
#hip-hop.muro::before{background-image:url(../img/acervo/sk8-antes-muro-alien.webp)}
#hip-hop.muro::after{
  background:linear-gradient(180deg, rgba(16,24,39,.88), rgba(16,24,39,.78));
}

/* ---------- 7b. HERO DE VÍDEO ----------
   O vídeo entra ATRÁS do topo que já existia, em vez de um bloco novo:
   assim o "cultura" continua sendo um só e nada duplica.

   ENQUADRAMENTO — o mascote tem a cabeça no alto do quadro e fica
   centralizado na horizontal. Qualquer corte vertical decapita ele, que
   foi o que aconteceu na primeira versão com `cover` num hero baixo.
   Aqui o bloco assume a proporção 16/9 do próprio vídeo e o vídeo entra
   com `contain`: nunca corta, em viewport nenhuma.

   E NÃO leva `max-height`. Essa era a origem da tarja preta: com teto de
   altura, numa janela mais baixa que 16/9 o bloco ficava mais largo que o
   vídeo e sobrava barra nos lados — a da esquerda sumia sob o véu, a da
   direita aparecia. Sem teto, o bloco é exatamente 16/9 e o `contain`
   encaixa sem folga: zero corte E zero tarja. A altura passa a seguir a
   largura, que é o mesmo contrato do `.hero` da home (100svh).

   O mascote ocupa o terço central. Por isso o texto fica preso ao terço
   da esquerda: os dois convivem em vez de disputar. */
.pagina-topo.hero-video{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;      /* o texto sobe do rodapé para a meia-altura */
  aspect-ratio:16/9;
  min-height:420px;
  padding-top:calc(var(--gutter) * 1.2);
  padding-bottom:calc(var(--gutter) * 1.2);
  background:var(--preto);
  border-bottom:1px solid var(--linha);
}
.pagina-topo.hero-video>.env{position:relative;z-index:2;width:100%}

.pagina-topo.hero-video .hero-midia{position:absolute;inset:0;z-index:0}
.pagina-topo.hero-video .hero-midia video{
  width:100%;
  height:100%;
  object-fit:contain;        /* a garantia de não cortar */
  object-position:center;
  background:var(--preto);
  filter:contrast(1.06) saturate(1.06) brightness(.86);
}

/* O véu escurece a ESQUERDA, onde o texto vive, e solta o centro e a
   direita, onde o mascote e o muro pintado precisam ser vistos. O eixo
   vertical entra só no rodapé, para costurar com a seção seguinte. */
.pagina-topo.hero-video .hero-midia::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(8,11,22,.94) 0%, rgba(8,11,22,.80) 26%, rgba(8,11,22,.22) 52%, rgba(8,11,22,0) 68%),
    linear-gradient(180deg, rgba(8,11,22,0) 55%, rgba(8,11,22,.82) 100%);
}

/* texto preso ao terço da esquerda, para não encostar no mascote */
.pagina-topo.hero-video .migalha{color:var(--cyan)}
.pagina-topo.hero-video h1{max-width:9ch}
.pagina-topo.hero-video .linha-fina{color:var(--ink);max-width:32ch}

/* Movimento reduzido: o vídeo sai e o pôster assume. Não dá para cancelar
   autoplay por CSS, então o quadro parado entra como fundo e o elemento
   de vídeo é removido do fluxo. `contain` também aqui, pelo mesmo motivo. */
@media (prefers-reduced-motion:reduce){
  .pagina-topo.hero-video .hero-midia{
    background:url(../img/hero-mascote-poster.webp) center/contain no-repeat var(--preto);
  }
  .pagina-topo.hero-video .hero-midia video{display:none}
}

/* No celular o vídeo custa caro (1,1MB) e o retrato é o pior caso de
   enquadramento: sobrepor texto num quadro 16/9 em tela estreita ou
   corta o mascote ou espreme a leitura. Então aqui os dois DESEMPILHAM —
   o quadro inteiro em cima, em 16/9, e o texto abaixo em fluxo normal.
   Ninguém é cortado e ninguém disputa espaço. */
@media (max-width:640px){
  .pagina-topo.hero-video{
    display:block;
    aspect-ratio:auto;
    max-height:none;
    min-height:0;
    padding-bottom:calc(var(--gutter) * 1.2);
  }
  .pagina-topo.hero-video .hero-midia{
    position:relative;
    inset:auto;
    aspect-ratio:16/9;
    width:100%;
    background:url(../img/hero-mascote-poster.webp) center/contain no-repeat var(--preto);
    margin-bottom:calc(var(--gutter) * .9);
  }
  .pagina-topo.hero-video .hero-midia video{display:none}
  /* sem texto por cima, o véu perde a função e só sujaria a imagem */
  .pagina-topo.hero-video .hero-midia::after{content:none}
  .pagina-topo.hero-video h1{max-width:none}
  .pagina-topo.hero-video .linha-fina{max-width:none;color:var(--ink-2)}
}


/* ---------- 7c. OS FILMES ----------
   Três cartões na segunda dobra. Cada um é um <button>, não um <div> com
   onclick: já vem focável, operável por teclado e anunciado como botão.
   O <img> tem alt vazio de propósito — o nome do filme está no texto ao
   lado, e repeti-lo no alt faria o leitor de tela dizer duas vezes. */
.filmes-grade{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
  list-style:none;
  padding:0;
  margin:0;
}
@media (max-width:900px){
  .filmes-grade{grid-template-columns:1fr;gap:calc(var(--gutter) * .8)}
}

.filme{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.6rem 1rem;
  width:100%;
  text-align:left;
  color:inherit;
}
.filme-capa{
  grid-column:1 / -1;
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--raio);
  border:1px solid var(--linha);
  aspect-ratio:16/9;
  background:var(--surface);
}
.filme-capa img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease),filter var(--dur) var(--ease);
}
.filme:hover .filme-capa img,
.filme:focus-visible .filme-capa img{transform:scale(1.04)}

/* o disco de play: triângulo em CSS, sem ícone externo para carregar */
.filme-play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:clamp(52px,5vw,68px);
  aspect-ratio:1;
  border-radius:var(--r-full);
  background:rgba(8,11,22,.62);
  border:2px solid var(--cyan);
  box-shadow:var(--glow);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.filme-play::after{
  content:"";
  position:absolute;
  top:50%;left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:.55em 0 .55em .95em;
  border-color:transparent transparent transparent var(--cyan);
  transition:border-color var(--dur) var(--ease);
}
.filme:hover .filme-play,
.filme:focus-visible .filme-play{
  background:var(--cyan);
  transform:translate(-50%,-50%) scale(1.08);
}
.filme:hover .filme-play::after,
.filme:focus-visible .filme-play::after{border-left-color:var(--preto)}

.filme-nome{
  font-family:var(--font-tag);
  font-size:clamp(1.25rem,2.1vw,1.7rem);
  line-height:1.1;
  color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.filme:hover .filme-nome,.filme:focus-visible .filme-nome{color:var(--cyan)}
.filme-tempo{
  align-self:end;
  font-family:var(--font-d);
  font-weight:700;
  font-size:var(--t-xs);
  letter-spacing:.12em;
  color:var(--cyan);
  border:1px solid var(--linha-forte);
  border-radius:var(--r-sm);
  padding:.3em .6em;
  background:var(--cyan-soft);
  white-space:nowrap;
}

/* ---------- 7d. O PLAYER ----------
   Criado pelo JS e preso ao <body>, não a esta seção: dentro do
   `.secao` ele herdaria empilhamento e recorte de contexto que não
   interessam a uma sobreposição de tela cheia. */
.player{
  position:fixed;
  inset:0;
  z-index:200;                /* acima do .topo, que é 100 */
  display:grid;
  place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(4,6,12,.92);
  backdrop-filter:blur(6px);
}
.player[hidden]{display:none}
/* `min-width:0` porque item de grid nasce com `min-width:auto` e não
   encolhe abaixo do próprio min-content — e os controles nativos do
   <video> têm largura mínima própria, que estourava a tela no celular. */
.player-caixa{
  position:relative;
  width:min(100%,1200px);
  min-width:0;
}
.player video{
  width:100%;
  min-width:0;
  max-width:100%;
  aspect-ratio:16/9;      /* reserva a caixa antes do metadado chegar,
                             senão o player nasce baixo e salta */
  max-height:82svh;
  display:block;
  border-radius:var(--raio);
  border:1px solid var(--linha);
  background:#000;
  object-fit:contain;
}
.player-titulo{
  font-family:var(--font-tag);
  font-size:clamp(1.2rem,2.4vw,1.9rem);
  color:var(--ink);
  margin-bottom:.7rem;
}
/* Preso ao canto da JANELA, não ao topo da caixa. Acima da caixa ele saía
   da tela em janela baixa, que é justamente quando o vídeo ocupa tudo. */
.player-fechar{
  position:fixed;
  top:clamp(.75rem,3vw,1.75rem);
  right:clamp(.75rem,3vw,1.75rem);
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:var(--r-full);
  border:1px solid var(--linha-forte);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-d);
  font-size:22px;
  font-weight:700;
  line-height:1;
}
.player-fechar:hover,.player-fechar:focus-visible{
  border-color:var(--cyan);
  color:var(--cyan);
}

/* ---------- 8. RITMO ---------- */
@media (min-width:900px){
  .faixa .figura{min-width:min(46vw,620px)}
}
.faixa-dica{
  font-family:var(--font-lt);
  color:var(--cyan);
  letter-spacing:.14em;
}

/* rodapé acompanha */
.rodape{border-top:1px solid var(--linha)}
.rodape h4{font-family:var(--font-d);font-weight:700;color:var(--ink)}
.rodape a:hover{color:var(--cyan)}

:focus-visible{outline-color:var(--cyan)}

@media print{
  .secao.muro::before,.secao.muro::after{display:none}
}