/* =============================================================================
   CineQuiz
   Página clara por padrão, hero sempre escuro, alternador para o tema escuro.

   Três estados de tema:
     :root                              -> claro (padrão)
     :root:not([data-tema="claro"]) em
       @media (prefers-color-scheme:dark) -> escuro do sistema
     :root[data-tema="escuro"]          -> escolha explícita, vence o sistema

   O hero NÃO segue o tema: usa tokens --palco-* fixos, porque pôster de cinema
   pede entorno escuro em qualquer modo.
   ============================================================================= */

:root {
  --fundo:        #FFFFFF;
  --fundo-2:      #F5F5F8;
  --tinta:        #191823;
  --tinta-fraca:  #626075;
  --borda:        #E3E2EA;
  --borda-forte:  #C9C7D4;
  --realce:       #5A45D6;
  --lampada:      #B57E06;
  --sombra:       0 1px 3px rgba(20,18,35,.10), 0 10px 26px rgba(20,18,35,.07);

  /* Hero: fixo em ambos os temas */
  --palco:        #12101C;
  --palco-tinta:  #F4F1E9;
  --palco-fraca:  #A9A1C2;
  --palco-borda:  #322C4D;
  --palco-lampada:#F2B441;

  --fonte-titulo: Archivo, "Helvetica Neue", Arial, sans-serif;
  --fonte-corpo:  Archivo, "Helvetica Neue", Arial, sans-serif;
  --medida:       68ch;
}

/* =============================================================================
   `hidden` tem de ganhar SEMPRE.
   O navegador aplica `[hidden] { display: none }`, mas qualquer seletor de
   classe vence isso por especificidade. Ja aconteceu duas vezes aqui: a lista
   de premios nao escondia porque `.curiosidades` declara `display: grid`, e a
   paginacao da filmografia por pouco nao caiu no mesmo. O sintoma e cruel —
   o JS alterna o atributo corretamente e nada muda na tela.
   ============================================================================= */
[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo:       #12101C;
    --fundo-2:     #1B1829;
    --tinta:       #F1EEE8;
    --tinta-fraca: #A9A1C2;
    --borda:       #2C2740;
    --borda-forte: #443C63;
    --realce:      #A292F0;
    --lampada:     #F2B441;
    --sombra:      0 1px 3px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.42);
  }
}

:root[data-tema="escuro"] {
  --fundo:       #12101C;
  --fundo-2:     #1B1829;
  --tinta:       #F1EEE8;
  --tinta-fraca: #A9A1C2;
  --borda:       #2C2740;
  --borda-forte: #443C63;
  --realce:      #A292F0;
  --lampada:     #F2B441;
  --sombra:      0 1px 3px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.42);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis-weight: none;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

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

.env { width: min(1220px, 100% - 2.5rem); margin-inline: auto; }

/* Títulos: Archivo no eixo expandido — a largura, não uma segunda família,
   é o que dá voz própria ao título. */
.marca,
.abertura h1,
.capa-texto h1,
h3,
.rotulo {
  font-family: var(--fonte-titulo);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  letter-spacing: -0.014em;
}

/* ---------- topo ----------
   Fixo e SEMPRE escuro, fora do tema: usa os tokens --palco-*, os mesmos do
   hero. Por isso o fundo preto da logo funde com a barra e ela dispensa a
   moldura arredondada que existia para nao virar caixa solta no tema claro. */
.topo-fixo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--palco);
  border-bottom: 1px solid var(--palco-borda);
}
.topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 0;
  color: var(--palco-tinta);
}
/* A logo e OPACA, com fundo preto embutido (500x160, sem canal alfa). Num
   cabecalho de tema claro viraria uma caixa preta solta, entao ela e tratada
   como selo autocontido: canto arredondado e um respiro em volta. Assim
   funciona igual nos dois temas, porque carrega o proprio fundo.
   height:auto e obrigatorio — sem ele o atributo height="160" do HTML vence
   e estica a caixa (a mesma armadilha da galeria). */
/* A logo CEDE, e nao empurra. Ela e a peca mais larga da barra (54px de altura
   sao 169px de largura), e quando a soma nao cabia era o DOCUMENTO que crescia
   e a pagina inteira saia para o lado. Com `min-width: 0` e `max-width: 100%`
   ela encolhe primeiro, em vez de estourar a linha — vale para qualquer largura
   de tela, inclusive as que nenhuma media query previu. */
.marca { display: inline-flex; text-decoration: none; min-width: 0; flex-shrink: 1; }
.marca img {
  height: 54px; width: auto; max-width: 100%;
  object-fit: contain;
  display: block;
}
/* O resto da barra nao encolhe: sao alvos de toque, e alvo de toque encolhido
   deixa de ser alvo. */
.topo nav { flex-shrink: 0; }
.marca-rodape { display: inline-block; margin-bottom: .9rem; }
.marca-rodape img {
  height: 44px; width: auto;
  border-radius: 7px;
  display: block;
  opacity: .9;
}
.marca-rodape:hover img { opacity: 1; }
.topo nav { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; font-size: .9rem; }
.topo nav a { color: var(--palco-fraca); text-decoration: none; }
.topo nav a:hover { color: var(--palco-tinta); }

.btn-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none; border: 1px solid var(--palco-borda); border-radius: 50%;
  color: var(--palco-fraca); cursor: pointer; padding: 0;
}
.btn-tema:hover { color: var(--palco-tinta); border-color: var(--palco-lampada); }
.btn-tema svg { width: 16px; height: 16px; fill: currentColor; }
.btn-tema .lua { display: none; }
:root[data-tema="escuro"] .btn-tema .lua { display: block; }
:root[data-tema="escuro"] .btn-tema .sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn-tema .lua { display: block; }
  :root:not([data-tema="claro"]) .btn-tema .sol { display: none; }
}

/* ---------- abertura da listagem ---------- */
.abertura { padding: 3rem 0 2rem; }
.abertura h1 {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -0.028em;
  margin: 0;
}
.abertura p { margin: .85rem 0 0; max-width: var(--medida); color: var(--tinta-fraca); }

/* ---------- parede de pôsteres ---------- */
.parede {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 1.8rem 1.15rem;
  padding: .8rem 0 4rem;
  list-style: none; margin: 0;
}
.filme a { text-decoration: none; display: block; }
.cartaz {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.cartaz img { width: 100%; height: 100%; object-fit: cover; }
.selo {
  position: absolute; left: 0; bottom: 0;
  background: var(--palco); color: var(--palco-lampada);
  font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: .16rem .44rem;
  border-radius: 0 6px 0 0;
}
/* Posicao no Top 10 da home: canto oposto ao selo da nota. */
.posicao {
  position: absolute; right: 0; top: 0;
  background: var(--realce); color: #111;
  font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: .18rem .5rem; border-radius: 0 0 0 6px;
}
.filme a:hover .cartaz, .filme a:focus-visible .cartaz { border-color: var(--realce); }
.filme h2 { font-size: .95rem; font-weight: 600; line-height: 1.25; margin: .6rem 0 .15rem; }
.filme .estreia { font-size: .8rem; color: var(--tinta-fraca); margin: 0; }

/* ---------- capa (hero) — sempre escura ---------- */
.capa {
  position: relative;
  margin-top: 0;
  background: var(--palco);
  color: var(--palco-tinta);
  overflow: hidden;
  margin-bottom: 2.8rem;
}
.capa-fundo { position: absolute; inset: 0; z-index: 0; }
.capa-fundo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) brightness(.6);
}
.capa::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, var(--palco) 0%, rgba(18,16,28,.94) 34%, rgba(18,16,28,.56) 66%, rgba(18,16,28,.2) 100%),
    linear-gradient(to bottom, rgba(18,16,28,.35) 0%, rgba(18,16,28,0) 32%, var(--palco) 100%);
}

.capa-grade {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 270px 1fr;
  gap: 2.6rem;
  padding: 3.2rem 0 3.6rem;
  align-items: start;
  min-height: 450px;
}
.capa-cartaz img {
  width: 100%; height: auto;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,.6);
}

.capa-texto h1 {
  font-size: clamp(2rem, 4.3vw, 3.05rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0 0 .5rem;
}
.capa-texto h1 .ano {
  color: var(--palco-fraca);
  font-weight: 400;
  font-size: .62em;
  font-variation-settings: 'wdth' 100;
  letter-spacing: -0.01em;
}

.linha-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem .9rem; margin: 0 0 1.6rem;
  font-size: .92rem; color: var(--palco-fraca);
}
.linha-meta abbr { text-decoration: none; }
.classificacao {
  border: 1px solid var(--palco-fraca); border-radius: 3px;
  padding: .04rem .34rem; font-size: .78rem; font-weight: 600;
  color: var(--palco-tinta);
}

.acoes { display: flex; align-items: center; gap: 1.7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.aval { display: flex; align-items: center; gap: .6rem; font-size: .82rem; line-height: 1.2; }
.anel { width: 62px; height: 62px; flex: none; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 3.5; }
.anel-base { stroke: var(--palco-borda); }
.anel-valor { stroke: var(--palco-lampada); stroke-linecap: round; }
.anel-num {
  transform: rotate(90deg); transform-origin: 20px 20px;
  fill: var(--palco-tinta); font-size: 12px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central;
  font-family: var(--fonte-corpo);
}
.sem-nota { color: var(--palco-fraca); font-size: .82rem; line-height: 1.2; }

.btn-trailer {
  display: inline-flex; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--palco-borda); border-radius: 4px;
  color: var(--palco-tinta); font: inherit; font-weight: 600;
  padding: .62rem 1.15rem; cursor: pointer;
}
.btn-trailer svg { width: 13px; height: 13px; fill: var(--palco-lampada); }
.btn-trailer:hover { border-color: var(--palco-lampada); }

.tagline { font-style: italic; font-size: 1.08rem; color: var(--palco-fraca); margin: 0 0 1.3rem; }
.rotulo { font-size: 1.08rem; margin: 0 0 .4rem; }
.capa-texto .sinopse { max-width: var(--medida); margin: 0 0 1.9rem; }

.assinaturas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .9rem 1.5rem; list-style: none; padding: 0; margin: 0; max-width: 660px;
}
.assinaturas b { display: block; font-size: .93rem; }
.assinaturas span { font-size: .82rem; color: var(--palco-fraca); }

/* ---------- seções do corpo ---------- */
h3 {
  font-size: 1.2rem;
  margin: 2.4rem 0 1rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--borda);
}

.fonte { font-size: .78rem; color: var(--tinta-fraca); margin-top: .9rem; }

/* As fontes da pagina, juntas no fim. Espalhadas, eram quatro linhas cinzas
   cortando o texto em pontos diferentes, e nenhuma legivel como creditos. */
.creditos { margin: 3rem 0 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); }
.creditos h2 { font-size: .74rem; font-weight: 600; margin: 0 0 .6rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca); }
.creditos ul { list-style: none; margin: 0; padding: 0; }
.creditos li { font-size: .78rem; line-height: 1.6; color: var(--tinta-fraca); }
.creditos a { color: inherit; text-decoration: underline; word-break: break-word; }

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.btn-video { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.btn-video img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--borda); border-radius: 6px; }
.btn-video b { display: block; font-size: .88rem; margin-top: .5rem; line-height: 1.25; }
.btn-video span { font-size: .78rem; color: var(--tinta-fraca); }
.btn-video:hover img, .btn-video:focus-visible img { border-color: var(--realce); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; list-style: none; padding: 0; margin: 0; }
.galeria img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--borda); border-radius: 6px;
  background: var(--fundo-2);
}
.galeria a:hover img, .galeria a:focus-visible img { border-color: var(--realce); }

.elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.3rem .9rem; list-style: none; padding: 0; margin: 0; }
.elenco img, .elenco .sem-foto {
  aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover;
  border-radius: 50%; background: var(--fundo-2); border: 1px solid var(--borda);
}
.elenco b { display: block; font-size: .86rem; font-weight: 600; margin-top: .5rem; }
.elenco em { display: block; font-size: .8rem; color: var(--tinta-fraca); font-style: normal; }

.recomendados { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.4rem 1rem; list-style: none; padding: 0; margin: 0; }
.recomendados a { text-decoration: none; display: block; }
.recomendados .cartaz { aspect-ratio: 2/3; }
.recomendados b { display: block; font-size: .87rem; font-weight: 600; margin-top: .5rem; line-height: 1.25; }
.recomendados a:hover .cartaz, .recomendados a:focus-visible .cartaz { border-color: var(--realce); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.tags li {
  border: 1px solid var(--borda); border-radius: 999px;
  color: var(--tinta-fraca); padding: .2rem .7rem; font-size: .82rem;
  background: var(--fundo-2);
}

.equipe { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.equipe li { break-inside: avoid; margin-bottom: .45rem; font-size: .9rem; }
.equipe span { color: var(--tinta-fraca); }

.voltar {
  display: inline-block; margin: 2.6rem 0 0;
  color: var(--tinta-fraca); text-decoration: none;
  border-bottom: 1px solid var(--borda); padding-bottom: .15rem;
}
.voltar:hover { color: var(--tinta); border-color: var(--realce); }
/* O invólucro do botão criado por `botaoVoltar()`. Repete o espaçamento do
   `.rodape-form`, que é o que as páginas antigas já usavam — assim as duas
   formas ficam à mesma distância do conteúdo e ninguém nota a diferença. */
.voltar-linha { margin: 2.6rem 0 0; font-size: .92rem; }

/* Rótulo só para leitor de tela: o campo tem `placeholder`, que NÃO substitui
   rótulo — ele some quando se digita e não é anunciado de forma confiável. */
.sr-so { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- busca dentro da lista de atalhos ---- */
.atalhos-busca { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 0 .2rem; }
.atalhos-busca input {
  flex: 1 1 auto; max-width: 380px;
  padding: .6rem .9rem; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo-2); color: var(--tinta); font: inherit; font-size: .95rem;
}
.atalhos-busca input:focus { outline: 2px solid var(--realce); outline-offset: 1px; border-color: var(--realce); }
.atalhos-conta { font-size: .82rem; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
/* Sem resultado a lista fica vazia e a página parece quebrada; a mensagem vem
   do CSS para não precisar de mais um nó no HTML de 1.170 itens. */
.indice-atalhos.sem-resultado::after {
  content: '—'; display: block; padding: 1.2rem 0; color: var(--tinta-fraca); font-size: .9rem;
}
.voltar-linha .voltar { margin-top: 0; }

/* O rodapé usa os mesmos tokens --palco-* do topo, e pelo mesmo motivo: a
   logo é opaca, com preto embutido, e num fundo claro ela aparecia como um
   selo escuro colado na página. Fundo igual em cima e embaixo também fecha a
   página, em vez de deixá-la escorrer no branco. */
.rodape-fundo {
  margin-top: 4rem;
  background: var(--palco);
  border-top: 1px solid var(--palco-borda);
}
.rodape {
  padding: 2rem 0 2.6rem;
  color: var(--palco-fraca); font-size: .82rem;
}
.rodape p { margin: .6rem 0 0; }
.aviso { padding: 3rem 0; color: var(--tinta-fraca); }

/* ---------- palco de vídeo ---------- */
#palco-video { border: 0; padding: 0; background: transparent; width: min(1000px, 92vw); max-width: none; }
#palco-video::backdrop { background: rgba(8,7,14,.9); }
#palco-video .moldura { aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; }
#palco-video iframe { width: 100%; height: 100%; border: 0; display: block; }
#palco-video .fechar {
  position: absolute; top: -2.4rem; right: 0;
  background: none; border: 0; color: #F4F1E9;
  font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}

@media (max-width: 780px) {
  /* `minmax(0, 1fr)` e `min-width: 0` (17/09/2026, auditoria mobile): `1fr`
     sozinho é minmax(auto, 1fr), e o mínimo "auto" deixava a coluna de texto
     com 513 px numa tela de 390 — sinopse, botões e fatos cortados à direita. */
  .capa-grade { grid-template-columns: 150px minmax(0, 1fr); gap: 1.4rem; min-height: 0; }
  .capa-texto { min-width: 0; }
  .capa-texto h1 { font-size: 1.65rem; }
  .equipe { columns: 1; }
}
@media (max-width: 520px) {
  .capa-grade { grid-template-columns: minmax(0, 1fr); }
  .capa-cartaz { width: 145px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- franquia ---------- */
.franquia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1.3rem 1rem; list-style: none; padding: 0; margin: .3rem 0 0;
}
.franquia a { text-decoration: none; display: block; }
.franquia .cartaz { aspect-ratio: 2/3; }
.franquia b { display: block; font-size: .86rem; font-weight: 600; margin-top: .5rem; line-height: 1.25; }
.franquia span { font-size: .78rem; color: var(--tinta-fraca); }
.franquia a:hover .cartaz, .franquia a:focus-visible .cartaz { border-color: var(--realce); }
.franquia .atual .cartaz { border-color: var(--realce); border-width: 2px; }
.franquia .atual span { color: var(--realce); font-weight: 600; }

/* ---------- seletor de idioma ---------- */
/* Um botao com o idioma atual; a lista abre por baixo. As tres bandeiras
   soltas custavam ~107px de barra e eram parte do estouro no celular. */
.seletor-idioma { position: relative; }
.idioma-atual {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .34rem .6rem; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--palco-borda);
  color: var(--palco-fraca);
  font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.idioma-atual:hover { color: var(--palco-tinta); border-color: var(--palco-lampada); }
.idioma-atual .seta { width: 9px; height: 9px; opacity: .7; transition: transform .18s ease; }
.idioma-atual[aria-expanded="true"] { color: var(--palco-tinta); border-color: var(--palco-lampada); }
.idioma-atual[aria-expanded="true"] .seta { transform: rotate(180deg); }

.idiomas {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70;
  min-width: 180px; margin: 0; padding: .4rem; list-style: none;
  background: var(--palco); border: 1px solid var(--palco-borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.idiomas a, .idioma-ausente {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; border-radius: 8px;
  text-decoration: none; color: var(--palco-fraca);
  font-size: .88rem; font-weight: 500; white-space: nowrap;
}
.idiomas .bandeira { font-size: 1.15rem; line-height: 1; }
.idiomas a:hover { background: rgba(255,255,255,.07); color: var(--palco-tinta); }
.idiomas a.ativo { color: var(--palco-lampada); font-weight: 600; }
.idioma-ausente { opacity: .4; cursor: not-allowed; }

/* ---------- avatar da conta no topo ---------- */
.btn-avatar {
  display: inline-flex; padding: 0; cursor: pointer;
  background: none; border: 2px solid transparent; border-radius: 50%;
  line-height: 0;
}
.btn-avatar:hover, .btn-avatar[aria-expanded="true"] { border-color: var(--palco-lampada); }
.btn-avatar .avatar { width: 32px; height: 32px; border-radius: 50%; display: block; }
.btn-avatar .avatar-padrao { display: inline-flex; align-items: center; justify-content: center;
  background: var(--palco-borda); }
/* "Sair" e um <button> dentro de um <form>, nao um link — encerrar sessao por
   GET aceita ser disparado por um <img> em qualquer site. Ele tem de PARECER
   os outros itens da lista, entao herda o desenho do <a> irmao. */
/* ---- perguntas da ficha de filme ---- */
/* `<details>` nativo: abre sem JavaScript, e o conteúdo fechado continua no
   HTML — indexável e extraível por quem lê a página inteira. */
.faq { display: grid; gap: .5rem; margin-top: 1rem; }
.faq details { border: 1px solid var(--borda); border-radius: 11px;
  background: var(--fundo-2); overflow: hidden; }
.faq summary { padding: .85rem 1rem; cursor: pointer; list-style: none;
  font-size: .95rem; font-weight: 600; line-height: 1.35;
  display: flex; align-items: center; gap: .6rem; }
.faq summary::-webkit-details-marker { display: none; }
/* A seta é do CSS e gira: sem marcador nativo, é ela que diz que abre. */
.faq summary::after { content: ''; margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px; border-right: 2px solid var(--tinta-fraca);
  border-bottom: 2px solid var(--tinta-fraca); transform: rotate(45deg);
  transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--realce); }
.faq p { margin: 0; padding: 0 1rem 1rem; font-size: .92rem; line-height: 1.6;
  color: var(--tinta-fraca); }

/* ---- recorte de avatar ---- */
.campo-foto { display: block; margin-bottom: 1.1rem; }
.campo-foto-rotulo { display: block; margin-bottom: .4rem; font-size: .88rem; font-weight: 600; }
.campo-foto-linha { display: flex; align-items: center; gap: .9rem; }
.campo-foto-atual .avatar { width: 64px; height: 64px; border-radius: 50%; display: block;
  border: 1px solid var(--borda); object-fit: cover; }
.campo-foto-atual .avatar-padrao { display: inline-flex; align-items: center; justify-content: center;
  background: var(--fundo-2); }
.campo-foto-linha small { display: block; margin-top: .35rem; font-size: .78rem; color: var(--tinta-fraca); }

#palco-recorte { width: min(420px, 94vw); padding: 0; border: 1px solid var(--borda);
  border-radius: 16px; background: var(--fundo); color: var(--tinta); }
#palco-recorte::backdrop { background: rgba(8, 6, 16, .72); }
.recorte-corpo { padding: 1.5rem; }
.recorte-corpo h2 { margin: 0 0 1rem; font-size: 1.1rem; }
/* O canvas fica quadrado e o furo redondo por cima mostra exatamente o que
   sera gravado — a moldura e a mesma medida que o servidor grava. */
.recorte-palco { position: relative; width: 320px; max-width: 100%; aspect-ratio: 1;
  margin: 0 auto; overflow: hidden; border-radius: 12px; background: #14121c; }
#recorte-tela { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#recorte-tela:active { cursor: grabbing; }
.recorte-mascara { position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(12, 10, 20, .55) inset; border-radius: 50%; }
.recorte-zoom { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .3rem; }
.recorte-zoom span { font-size: .82rem; color: var(--tinta-fraca); }
.recorte-zoom input { flex: 1 1 auto; }
.recorte-dica { margin: 0; font-size: .78rem; color: var(--tinta-fraca); text-align: center; }
.recorte-erro { margin: .7rem 0 0; font-size: .82rem; color: #c0392b; text-align: center; }
.recorte-acoes { display: flex; gap: .6rem; margin-top: 1.2rem; }
.recorte-acoes .botao { flex: 1 1 0; }

.form-sair { margin: 0; }
.menu-topo .submenu .form-sair button,
.menu-movel .form-sair button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit;
}
.menu-topo .submenu .form-sair button { padding: .5rem .7rem; border-radius: 8px;
  font-size: .9rem; white-space: nowrap; color: var(--palco-fraca); }
.menu-topo .submenu .form-sair button:hover { background: rgba(255,255,255,.07); color: var(--palco-tinta); }
.menu-movel .form-sair button { padding: .45rem .2rem; font-size: .93rem; color: var(--palco-fraca); }

.menu-conta .submenu-eu { padding: .45rem .7rem .55rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--palco-borda);
  font-size: .82rem; font-weight: 600; color: var(--palco-tinta); white-space: nowrap; }
/* O menu da conta abre no CLIQUE, nao no hover: no celular hover nao existe, e
   e la que o avatar e o unico item de topo que sobra. A regra de hover geral
   do `.tem-sub` e anulada logo abaixo, junto do `:focus-within`. */
.menu-topo .menu-conta:hover > .submenu,
.menu-topo .menu-conta:focus-within > .submenu { opacity: 0; visibility: hidden; }
.menu-topo .menu-conta > .submenu-aberto { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* ---------- fatos do Wikidata ---------- */
.wikidata { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0 0 .4rem; }
.wikidata li {
  display: inline-flex; align-items: baseline; gap: .4rem;
  border: 1px solid var(--borda); border-radius: 4px;
  padding: .22rem .65rem; font-size: .85rem; background: var(--fundo-2);
}

.wikidata span { font-size: .76rem; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }

/* Lado a lado, não empilhados. Cada tipo abria um <h3> de seção inteiro —
   1.2rem, 2.4rem de margem e um filete atravessando a página — para mostrar,
   quase sempre, UMA etiqueta. Agora é rótulo pequeno sobre as etiquetas, e
   cabem três ou quatro blocos por linha. */
.wd-grade { display: grid; gap: 1.1rem 1.6rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wd-bloco h4 { margin: 0 0 .45rem; font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca); }
/* Prêmios e indicações trazem muitos itens; os outros trazem um ou dois. */
.wd-largo { grid-column: 1 / -1; }
@media (max-width: 560px) { .wd-grade { grid-template-columns: 1fr 1fr; } }

/* ---------- galeria em modal ---------- */
#palco-foto {
  border: 0; padding: 0; background: transparent;
  width: min(1180px, 94vw); max-width: none;
  color: #F4F1E9;
}
#palco-foto::backdrop { background: rgba(8,7,14,.93); }
#palco-foto figure { margin: 0; }
#palco-foto img {
  width: 100%; height: auto;
  max-height: 82vh; object-fit: contain;
  border-radius: 6px; background: #000;
}
#palco-foto figcaption {
  margin-top: .7rem; text-align: center;
  font-size: .84rem; color: #A9A1C2;
}
#palco-foto .fechar {
  position: absolute; top: -2.5rem; right: 0;
  background: none; border: 0; color: #F4F1E9;
  font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
#palco-foto .passa {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18,16,28,.72); border: 1px solid #322C4D; border-radius: 50%;
  color: #F4F1E9; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
#palco-foto .passa:hover { background: rgba(18,16,28,.95); border-color: #F2B441; }
#palco-foto .antes  { left: .6rem; }
#palco-foto .depois { right: .6rem; }
@media (max-width: 520px) {
  #palco-foto .passa { width: 38px; height: 38px; font-size: 1.4rem; }
}

/* ---------- textos longos ----------
   O container tem 1220px e o texto usava 620 (68ch), deixando metade vazia —
   era o unico bloco a meia largura, enquanto posteres e franquia ocupavam tudo.
   Esticar a linha ate 1220px resolveria o vazio e estragaria a leitura: daria
   ~130 caracteres por linha. Duas colunas preenchem a largura E mantem a linha
   em ~60 caracteres, que e a medida boa. Abaixo de 1000px volta a uma coluna. */
.texto-longo { max-width: 78ch; }
.texto-longo p { margin: 0 0 .9rem; }

@media (min-width: 1000px) {
  .texto-longo {
    max-width: none;
    columns: 2;
    column-gap: 3.2rem;
  }
  .texto-longo p:first-child { margin-top: 0; }
  /* titulo de secao nao pode ficar orfao no pe da coluna */
  .texto-longo h4 { break-after: avoid; }
}
.texto-longo h4 {
  font-family: var(--fonte-titulo);
  font-variation-settings: 'wdth' 108;
  font-size: 1rem; font-weight: 700;
  margin: 1.6rem 0 .6rem;
}
.artigo-todo { margin: .4rem 0 1rem; max-width: var(--medida); }
.artigo-todo summary {
  cursor: pointer; font-size: .88rem; font-weight: 600;
  color: var(--realce); padding: .4rem 0;
}
.artigo-todo[open] summary { margin-bottom: .8rem; }

@media (min-width: 1000px) {
  .artigo-todo { max-width: none; }
}

.producao { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.producao li { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; font-size: .9rem; }
.producao b { font-weight: 600; color: var(--tinta-fraca); }
@media (max-width: 520px) { .producao li { grid-template-columns: 1fr; gap: .1rem; } }

/* A lista de episodios herda `.producao` e so muda o que precisa: o nome do
   episodio e mais longo que um rotulo de ficha tecnica, e a sinopse vem
   embaixo. Uma regra em vez de um bloco novo — o desenho continua sendo o do
   site, nao um terceiro. */
/* Atalho para as outras temporadas, dentro da capa. Estando no episodio 137, o
   caminho para a temporada seguinte era voltar duas paginas. */
.serie-outras-temp { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; }
.serie-outras-temp a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; padding: .25rem .5rem; border-radius: 8px;
  border: 1px solid var(--palco-borda); color: var(--palco-fraca);
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.serie-outras-temp a:hover { color: var(--palco-tinta); border-color: var(--palco-lampada); }

/* ---- guia de episodios ---- */
/* Cartao com capa a esquerda e texto a direita. A capa e 16/9 porque e o
   formato do `still` da TMDb; forcar outro cortaria rosto. */
.episodios { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .9rem; }
.episodios > li { display: grid; grid-template-columns: 200px 1fr; gap: 1.1rem;
  padding: .8rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-2); }
.episodio-arte { position: relative; aspect-ratio: 16/9; border-radius: 9px;
  overflow: hidden; background: var(--borda); }
.episodio-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* O numero fica SOBRE a arte, e nao ao lado do titulo: sem capa ele continua
   visivel no retangulo vazio, que e onde o olho procura. */
.episodio-num { position: absolute; left: .4rem; bottom: .4rem;
  padding: .1rem .45rem; border-radius: 6px; font-size: .78rem; font-weight: 700;
  background: rgba(12, 10, 20, .78); color: #fff; }
.episodio-texto h2 { font-size: 1rem; font-weight: 650; margin: 0 0 .2rem; line-height: 1.3; }
.episodio-meta { margin: 0 0 .4rem; font-size: .8rem; color: var(--tinta-fraca); }
.episodio-texto p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--tinta-fraca); }
@media (max-width: 620px) {
  .episodios > li { grid-template-columns: 1fr; }
  .episodio-arte { max-width: 260px; }
}

.criticas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.criticas > li { border: 1px solid var(--borda); border-radius: 6px; padding: 1rem 1.15rem; background: var(--fundo-2); }
.criticas .cabeca { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; font-size: .86rem; }
.criticas .cabeca .nota { color: var(--lampada); font-weight: 600; font-variant-numeric: tabular-nums; }
.criticas .cabeca span { color: var(--tinta-fraca); font-size: .8rem; }
.criticas .texto-longo { max-width: none; columns: 1; }
.criticas .texto-longo p { font-size: .92rem; }

/* ---------- pessoa ---------- */
.pessoa-topo { display: grid; grid-template-columns: 230px 1fr; gap: 2.4rem; padding: 2.4rem 0 1rem; align-items: start; }
/* O nome original, logo abaixo do latino. Menor e apagado: é informação, não
   título — quem lê pt/en/es reconhece a pessoa pela forma latina. */
.pessoa-nome-original {
  margin: -.5rem 0 1rem; font-size: 1.05rem; color: var(--tinta-fraca); font-weight: 500;
}

.pessoa-foto img, .pessoa-foto .sem-foto {
  width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--borda); background: var(--fundo-2);
  box-shadow: var(--sombra);
}
.pessoa-dados h1 {
  font-family: var(--fonte-titulo); font-variation-settings: 'wdth' 112;
  font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.024em; margin: 0 0 1rem;
}
.dados-pessoa { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .45rem; }
.dados-pessoa li { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; font-size: .9rem; }
.dados-pessoa b { font-weight: 600; color: var(--tinta-fraca); }
.indice-pessoas a { text-decoration: none; color: inherit; display: block; }
.indice-pessoas a:hover img { border-color: var(--realce); }
@media (max-width: 640px) {
  .pessoa-topo { grid-template-columns: 1fr; gap: 1.2rem; }
  .pessoa-foto { width: 170px; }
  .dados-pessoa li { grid-template-columns: 1fr; gap: .1rem; }
}

/* =============================================================================
   Fase 7 — contas, quiz, ranking e perfil.
   Usa os tokens já definidos no topo; nenhuma cor literal nova, para o tema
   escuro continuar funcionando sem uma segunda folha de regras.
   ============================================================================= */

.estreito { max-width: 760px; }

/* ---- barra da conta ---- */
.barra-conta {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--borda);
  font-size: .93rem; flex-wrap: wrap;
}
.barra-conta a { color: var(--tinta-fraca); text-decoration: none; font-weight: 600; }
.barra-conta a:hover { color: var(--realce); }
.barra-eu { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; color: var(--tinta) !important; }
.barra-sair button, button.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tinta-fraca); font: inherit; font-weight: 600; text-decoration: underline;
}
.barra-sair button:hover, button.link:hover { color: var(--realce); }
.botao-pequeno {
  background: var(--realce); color: #fff !important; padding: .38rem .8rem;
  border-radius: 6px; font-size: .87rem;
}

/* ---- avatar ---- */
.avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; }
.avatar-padrao {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fundo-2); border: 1px solid var(--borda); line-height: 1;
}

/* ---- faixas de aviso ---- */
.faixa { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; font-size: .94rem; }
.faixa-erro  { background: #FDEDED; color: #8A1C1C; border: 1px solid #F5C2C2; }
.faixa-ok    { background: #EAF7EE; color: #176030; border: 1px solid #BFE5CB; }
.faixa-aviso { background: #FFF6E0; color: #7A5600; border: 1px solid #F0DCA8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .faixa-erro  { background: #3A1A1A; color: #F5B9B9; border-color: #6B2A2A; }
  :root:not([data-tema="claro"]) .faixa-ok    { background: #14301F; color: #A9E3BF; border-color: #245C39; }
  :root:not([data-tema="claro"]) .faixa-aviso { background: #37290C; color: #F2D48A; border-color: #6A5117; }
}
:root[data-tema="escuro"] .faixa-erro  { background: #3A1A1A; color: #F5B9B9; border-color: #6B2A2A; }
:root[data-tema="escuro"] .faixa-ok    { background: #14301F; color: #A9E3BF; border-color: #245C39; }
:root[data-tema="escuro"] .faixa-aviso { background: #37290C; color: #F2D48A; border-color: #6A5117; }

/* ---- formulários ---- */
.cartao-form {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 14px;
  padding: 2rem; box-shadow: var(--sombra); margin: 2.4rem auto;
}
.cartao-form h1 { font-size: 1.7rem; margin: 0 0 .3rem; }
.cartao-form .sub { color: var(--tinta-fraca); margin: 0 0 1.6rem; }
.form { display: grid; gap: 1.05rem; }
.form label { display: grid; gap: .35rem; }
.form label > span { font-weight: 600; font-size: .9rem; }
.form input[type=text], .form input[type=email], .form input[type=password],
.form input[type=tel], .form select, .form textarea, .excluir-campos input {
  width: 100%; padding: .68rem .8rem; font: inherit;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: 8px;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--realce); outline-offset: 1px; border-color: var(--realce);
}
.form small, .lista-simples small { color: var(--tinta-fraca); font-size: .82rem; }
.linha-check { display: flex !important; align-items: flex-start; gap: .55rem; }
.linha-check input { margin-top: .25rem; flex: 0 0 auto; }
.linha-check span { font-weight: 400 !important; font-size: .9rem; }
.linha-tripla { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
.rodape-form { margin-top: 1.2rem; font-size: .92rem; color: var(--tinta-fraca); }

.botao {
  display: inline-block; background: var(--realce); color: #fff;
  border: 0; border-radius: 8px; padding: .74rem 1.35rem;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
}
.botao:hover { filter: brightness(1.08); }
.botao.secundario { background: var(--fundo-2); color: var(--tinta); border: 1px solid var(--borda-forte); }
.botao.perigo { background: #B02A2A; }

/* ---- quiz ---- */
.quiz-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.quiz-cartao {
  display: grid; gap: .35rem; text-align: left; cursor: pointer;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 14px;
  padding: 1.4rem; font: inherit; color: var(--tinta); box-shadow: var(--sombra);
}
.quiz-cartao:hover { border-color: var(--realce); }
.quiz-cartao b { font-size: 1.15rem; }
.quiz-cartao span { color: var(--tinta-fraca); font-size: .9rem; }
.quiz-sub { margin: 2rem 0 .8rem; font-size: 1.05rem; }
.quiz-generos { display: flex; flex-wrap: wrap; gap: .5rem; }
.pilula {
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 999px;
  padding: .42rem .95rem; font: inherit; font-size: .88rem; cursor: pointer; color: var(--tinta);
}
.pilula:hover { border-color: var(--realce); color: var(--realce); }

.quiz-topo { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 .5rem; font-weight: 700; }
#quiz-progresso { color: var(--tinta-fraca); font-weight: 600; font-size: .9rem; }
#quiz-placar { margin-left: auto; font-size: 1.2rem; color: var(--realce); }
.quiz-relogio { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.quiz-relogio.urgente { color: #C0392B; }
.quiz-barra { height: 4px; background: var(--fundo-2); border-radius: 999px; overflow: hidden; }
.quiz-barra i { display: block; height: 100%; width: 100%; background: var(--realce); transition: width 1s linear; }

#quiz-figura { margin: 1.6rem auto; text-align: center; }
/* O quadro e sempre paisagem (cena ou foto do filme, 16:9): 260px era
   largura de poster e deixava a cena do tamanho de um selo. */
#quiz-figura img { width: 100%; max-width: 560px; height: auto; border-radius: 10px; box-shadow: var(--sombra); }
#quiz-enunciado { font-size: 1.35rem; margin: 1.4rem 0; line-height: 1.3; white-space: pre-line; } /* a sinopse vem no prompt, após linha em branco */
.quiz-opcoes { display: grid; gap: .7rem; }
.quiz-opcao {
  text-align: left; padding: .95rem 1.1rem; font: inherit;
  background: var(--fundo); color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: 10px; cursor: pointer;
}
.quiz-opcao:hover:not(:disabled) { border-color: var(--realce); }
.quiz-opcao:disabled { cursor: default; opacity: .75; }
.quiz-opcao.certa  { border-color: #2E7D4F; background: #EAF7EE; color: #176030; opacity: 1; font-weight: 700; }
.quiz-opcao.errada { border-color: #B02A2A; background: #FDEDED; color: #8A1C1C; opacity: 1; }
.quiz-retorno { margin: 1.1rem 0; font-weight: 700; }
.quiz-retorno.ok  { color: #176030; }
.quiz-retorno.nao { color: #8A1C1C; }

.quiz-resultado { text-align: center; padding: 2rem 0; }
.quiz-pontuacao { font-size: 3.4rem; font-weight: 800; color: var(--realce); margin: .6rem 0; line-height: 1; }
.quiz-pontuacao small { font-size: 1rem; color: var(--tinta-fraca); font-weight: 600; }
.convite {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 12px; padding: 1.4rem; margin: 1.8rem 0;
}
.quiz-gabarito { text-align: left; margin: 2rem 0; padding-left: 1.4rem; display: grid; gap: .8rem; }
.quiz-gabarito li { padding-left: .4rem; }
.quiz-gabarito li.certa   { border-left: 3px solid #2E7D4F; }
.quiz-gabarito li.errada  { border-left: 3px solid #B02A2A; }
.quiz-gabarito b { display: block; font-weight: 600; }
.quiz-gabarito span { color: var(--tinta-fraca); font-size: .9rem; }

/* ---- ranking ---- */
.abas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0; }
.abas a {
  padding: .38rem .85rem; border-radius: 999px; text-decoration: none;
  font-size: .88rem; color: var(--tinta-fraca); border: 1px solid var(--borda);
}
.abas a:hover { border-color: var(--realce); color: var(--realce); }
.abas a.ativo { background: var(--realce); color: #fff; border-color: var(--realce); }
.abas-periodo { margin-bottom: 1.8rem; }

.tabela-rank { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabela-rank th, .tabela-rank td { padding: .7rem .6rem; border-bottom: 1px solid var(--borda); text-align: left; }
.tabela-rank th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-fraca); }
.tabela-rank .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rank .pos { font-weight: 800; color: var(--tinta-fraca); width: 3rem; }
.tabela-rank .jogador { display: flex; align-items: center; gap: .6rem; }
.tabela-rank .jogador a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.tabela-rank .sou-eu { background: var(--fundo-2); }
.tabela-rank tr:first-child .pos { color: var(--lampada); }

/* ---- perfil ---- */
.perfil-topo { display: flex; align-items: center; gap: 1.3rem; margin: 2rem 0 1.4rem; flex-wrap: wrap; }
.perfil-topo h1 { margin: 0 0 .2rem; font-size: 1.7rem; }
.perfil-topo .sub { margin: 0; color: var(--tinta-fraca); font-size: .9rem; }
.bloco { margin: 2.4rem 0; }
.bloco h2 { font-size: 1.15rem; margin: 0 0 .9rem; }
.numeros { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .8rem; }
.numeros li {
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 10px;
  padding: .9rem; text-align: center;
}
.numeros b { display: block; font-size: 1.5rem; line-height: 1.1; }
.numeros span { font-size: .78rem; color: var(--tinta-fraca); }
.conquistas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.conquistas li {
  border: 1px solid var(--borda); border-radius: 10px; padding: 1rem; text-align: center;
}
.conquistas li.bloqueada { opacity: .42; }
.conquistas .icone { font-size: 1.9rem; display: block; margin-bottom: .3rem; }
.conquistas b { display: block; font-size: .92rem; }
.conquistas small { color: var(--tinta-fraca); font-size: .76rem; }
.lista-simples { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .92rem; }
.lista-simples li { padding-bottom: .55rem; border-bottom: 1px solid var(--borda); }


/* ---- perfil: a carta do jogador ---- */
/* Fora do tema, como o hero e o pódio. Perfil de quem joga é ficha de
   personagem, não formulário de cadastro — e ficha de personagem tem fundo
   escuro em todo jogo que existe. */
.perf-carta {
  position: relative; overflow: hidden;
  margin: 1.6rem 0 1.2rem; padding: 1.6rem;
  border-radius: 18px; color: var(--palco-tinta);
  border: 1px solid var(--palco-borda);
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(124,58,237,.42), transparent 58%),
    radial-gradient(70% 100% at 96% 100%, rgba(242,180,65,.18), transparent 60%),
    linear-gradient(120deg, #14102A, #0D0B16);
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}

/* O anel de progresso desenhado com conic-gradient em volta do avatar: o
   quanto falta para o próximo nível se lê sem ler número nenhum. */
.perf-anel {
  --pct: 0;
  position: relative; flex: 0 0 auto;
  width: 112px; height: 112px; border-radius: 50%;
  padding: 5px;
  background: conic-gradient(var(--palco-lampada) calc(var(--pct) * 1%), rgba(255,255,255,.11) 0);
}
.perf-anel::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 2px solid #0D0B16;
}
.perf-anel img, .perf-anel .avatar {
  width: 102px !important; height: 102px !important;
  border-radius: 50%; display: grid; place-items: center;
  background: #1C1733;
}
.perf-nivel {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  z-index: 2; padding: .12rem .6rem; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  color: #3A2506; background: linear-gradient(#FDE68A, #F2B441);
  border: 1px solid #D89A1C; white-space: nowrap;
}

.perf-quem { flex: 1 1 260px; min-width: 0; }
.perf-quem h1 { margin: 0 0 .25rem; font-size: 1.75rem; line-height: 1.1; }
.perf-patente {
  display: inline-block; margin-bottom: .5rem; padding: .16rem .6rem;
  border-radius: 999px; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: #DDD3FF; background: rgba(124,58,237,.3);
  border: 1px solid rgba(167,139,250,.45);
}
.perf-faixa { font-weight: 600; color: var(--tinta-fraca); font-size: .8em; }
.perf-quem .sub { margin: 0; font-size: .85rem; color: var(--palco-fraca); }
.perf-quem .sub a { color: var(--palco-fraca); }
.perf-xp { margin: .5rem 0 0; font-size: .8rem; color: var(--palco-fraca); }
.perf-xp b { color: var(--palco-lampada); font-variant-numeric: tabular-nums; }

/* Os três números que importam, do lado direito da carta. */
.perf-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.perf-chips div {
  min-width: 84px; padding: .55rem .8rem; border-radius: 11px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
}
.perf-chips b { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.perf-chips span { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--palco-fraca); }

/* ---- abas ---- */
/* Sem JS todos os painéis ficam visíveis, cada um com seu título. O script
   esconde o que não é a aba ativa. Nunca uma página em branco por causa de
   script que não carregou. */
.perf-abas {
  display: flex; gap: .35rem; flex-wrap: wrap;
  margin: 0 0 1.4rem; padding: .3rem;
  border-radius: 13px; background: var(--fundo-2); border: 1px solid var(--borda);
}
.perf-abas button {
  flex: 1 1 auto; padding: .6rem .9rem; border: 0; border-radius: 10px;
  background: none; color: var(--tinta-fraca); cursor: pointer;
  font: inherit; font-weight: 700; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: color .13s ease, background .13s ease;
}
.perf-abas button:hover { color: var(--tinta); }
.perf-abas button[aria-selected="true"] {
  color: #fff; background: linear-gradient(120deg, #5A45D6, #7C3AED);
  box-shadow: 0 4px 14px rgba(90,69,214,.34);
}
.perf-abas .conta {
  font-size: .7rem; font-weight: 800; padding: .05rem .38rem; border-radius: 999px;
  background: rgba(0,0,0,.14); color: inherit;
}
.perf-abas button[aria-selected="true"] .conta { background: rgba(255,255,255,.22); }
.perf-painel[hidden] { display: none !important; }
.perf-painel > .bloco:first-child { margin-top: 0; }

/* ---- números ---- */
.perf-numeros {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: .7rem;
}
.perf-numeros li {
  position: relative; overflow: hidden;
  padding: 1rem .8rem; border-radius: 13px; text-align: center;
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.perf-numeros li::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--tom, #7C3AED), transparent);
}
.perf-numeros .ico { font-size: 1.1rem; display: block; margin-bottom: .15rem; }
.perf-numeros b { display: block; font-size: 1.55rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.perf-numeros span { font-size: .74rem; color: var(--tinta-fraca); }

/* ---- conquistas ---- */
/* A MEDALHA. Antes cada conquista era um emoji de uma família diferente —
   claquete, ingresso, alvo, chama, 100, troféu, pipoca — e sete estilos lado a
   lado é o que mais fazia a área parecer amadora. Agora o glifo é sempre do
   mesmo traço e a variação vem da MOLDURA DE NÍVEL, que é como medalha
   funciona no mundo. */
.medalha {
  --m: #9AA7B8;
  position: relative; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--m) 26%, var(--fundo)),
              color-mix(in srgb, var(--m) 52%, var(--fundo)));
  border: 1.5px solid color-mix(in srgb, var(--m) 62%, var(--borda));
  color: color-mix(in srgb, var(--m) 55%, var(--tinta));
}
.medalha svg { width: 27px; height: 27px; }

.medalha-bronze   { --m: #C97B4A; }
.medalha-prata    { --m: #9AA7B8; }
.medalha-ouro     { --m: #E3A81C; }
.medalha-diamante { --m: #38BDF8; }

/* Bloqueada é silhueta: apagada e sem cor. Não precisa de cadeado por cima —
   o cadeado, colado na borda direita do card, parecia pertencer ao card
   seguinte, que às vezes era uma conquista já obtida. */
.medalha-bloqueada, .medalha-secreta {
  --m: var(--borda-forte);
  background: var(--fundo-2); border-style: dashed;
  color: var(--tinta-fraca); opacity: .55;
}
.medalha-progresso { opacity: .9; }
.medalha-ganha { box-shadow: 0 3px 12px color-mix(in srgb, var(--m) 32%, transparent); }

.conq-grade {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: .7rem;
}
.conq-card {
  position: relative; display: flex; gap: .85rem; align-items: flex-start;
  padding: .85rem .95rem; border-radius: 13px;
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.conq-card.conq-ganha {
  border-color: color-mix(in srgb, var(--lampada) 55%, var(--borda));
  background: linear-gradient(150deg, color-mix(in srgb, var(--lampada) 10%, var(--fundo)), var(--fundo-2));
}
.conq-card.conq-bloqueada, .conq-card.conq-secreta { border-style: dashed; background: none; }

.conq-texto { min-width: 0; display: grid; gap: .18rem; flex: 1; }
.conq-texto b { font-size: .92rem; line-height: 1.25; }
.conq-texto small { font-size: .76rem; color: var(--tinta-fraca); line-height: 1.35; }
.conq-bloqueada .conq-texto b, .conq-secreta .conq-texto b { color: var(--tinta-fraca); }
.conq-data { font-size: .74rem; font-weight: 600; color: #96700B; }
:root[data-tema="escuro"] .conq-data,
:root:not([data-tema="claro"]) .conq-data { color: #F2C767; }

/* A BARRA DE PROGRESSO É O QUE FALTAVA. "Dez partidas" não dizia que a pessoa
   já tinha quatro: informava sem motivar. */
.conq-progresso { display: flex; align-items: center; gap: .5rem; margin-top: .15rem; }
.conq-progresso em {
  font-style: normal; font-size: .7rem; color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.conq-trilho {
  flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--borda); display: block;
}
.conq-trilho i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7C3AED, #F2B441);
}
.conq-xp {
  position: absolute; top: .6rem; right: .7rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em;
  color: var(--tinta-fraca); opacity: .7;
}

/* As categorias: contador por categoria em vez de um total geral. 3 de 76 é
   um número que dá para perseguir; 3 de 1.008 não é. */
.conq-categorias {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem;
}
.conq-categorias a {
  display: grid; gap: .35rem; padding: .9rem 1rem; border-radius: 13px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  text-decoration: none; color: inherit;
}
.conq-categorias a:hover { border-color: var(--realce); }
.conq-categorias b { font-size: .95rem; }
.conq-categorias span { font-size: .78rem; color: var(--tinta-fraca); }
.conq-raridade {
  position: absolute; bottom: .55rem; right: .7rem;
  font-size: .62rem; color: var(--tinta-fraca); opacity: .75;
}
.conq-cat-fixa { display: grid; gap: .35rem; }

/* O compartilhar só aparece no hover do card: presente para quem quer, fora
   do caminho de quem está lendo a lista. */
.conq-share {
  position: absolute; inset: auto .7rem .5rem auto;
  font-size: .64rem; font-weight: 700; color: var(--realce);
  text-decoration: none; opacity: 0; transition: opacity .13s ease;
}
.conq-card:hover .conq-share, .conq-share:focus-visible { opacity: 1; }
.conq-card:hover .conq-raridade { opacity: 0; }
@media (hover: none) { .conq-share { opacity: 1; } .conq-raridade { display: none; } }

/* ---- o diálogo de desbloqueio ---- */
/* UMA DE CADA VEZ, e antes do placar. Cinco medalhas empilhadas viram um
   bloco que ninguém lê; e depois do placar a conquista chega quando a pessoa
   já está fechando a tela. */
.conq-modal {
  border: 0; padding: 0; border-radius: 18px; background: transparent;
  max-width: min(380px, 92vw);
}
.conq-modal::backdrop { background: rgba(8, 7, 14, .74); }
.conq-modal-caixa {
  display: grid; justify-items: center; gap: .45rem; text-align: center;
  padding: 2rem 1.6rem 1.6rem; border-radius: 18px;
  background: var(--fundo); border: 1px solid var(--borda);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.conq-modal-topo {
  margin: 0; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; color: var(--lampada);
}
.conq-modal .medalha {
  width: 92px; height: 92px; border-radius: 26px;
  animation: conq-entra .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.conq-modal .medalha svg { width: 46px; height: 46px; }
@keyframes conq-entra {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
}
.conq-modal-caixa > b { font-size: 1.22rem; line-height: 1.2; }
.conq-modal-caixa > small { font-size: .84rem; color: var(--tinta-fraca); line-height: 1.4; }
.conq-modal-xp { margin: .2rem 0 0; font-size: .78rem; font-weight: 700; color: var(--realce); }
.conq-modal-conta { margin: 0; font-size: .7rem; color: var(--tinta-fraca); }
.conq-modal .botao { margin-top: .8rem; min-width: 160px; }

@media (prefers-reduced-motion: reduce) {
  .conq-modal .medalha { animation: none; }
}

/* ---- a festa da subida de nível (15/09/2026) ---- */
/* Mais forte que a conquista: fundo de palco com holofote dourado, a foto da
   pessoa num anel de ouro entre duas estatuetas, o cargo em letras grandes. */
.nivel-modal { max-width: min(420px, 94vw); }
.nivel-modal-caixa {
  background:
    radial-gradient(ellipse 70% 45% at 50% 34%, rgba(242, 180, 65, .34), transparent 70%),
    linear-gradient(180deg, #1A1424 0%, #0B0A12 100%);
  border-color: rgba(242, 180, 65, .45); color: #fff; padding-top: 1.6rem;
}
.nivel-modal .conq-modal-topo { color: #F2B441; font-size: .74rem; letter-spacing: .2em; }
.nivel-palco { display: flex; align-items: flex-end; justify-content: center; gap: .6rem; margin: .4rem 0 .2rem; }
.nivel-estatueta {
  width: 42px; height: 140px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
  animation: nivel-sobe .7s cubic-bezier(.2, 1.3, .4, 1) both;
}
.nivel-estatueta:last-child { animation-delay: .12s; }
.nivel-avatar {
  width: 124px; height: 124px; border-radius: 50%; margin-bottom: 8px;
  display: grid; place-items: center; overflow: hidden;
  background: #2A243E; border: 5px solid #F2B441;
  box-shadow: 0 0 0 4px #0B0A12, 0 0 0 7px rgba(242, 180, 65, .55), 0 0 42px rgba(242, 180, 65, .55);
  animation: nivel-entra .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
.nivel-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nivel-avatar span { font-size: 3rem; font-weight: 900; color: #F2B441; }
.nivel-faixa {
  display: inline-block; margin-top: .6rem; padding: .3rem 1rem; border-radius: 999px;
  background: #F2B441; color: #1A1200; font-size: .72rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em;
}
.nivel-modal-caixa > b { font-size: 2rem; line-height: 1.1; color: #fff; }
.nivel-modal-caixa > small { color: #C9C6D6; }
.nivel-modal .botao.secundario { border-color: rgba(242, 180, 65, .6); color: #F2B441; }
@keyframes nivel-entra { from { opacity: 0; transform: scale(.4); } }
@keyframes nivel-sobe  { from { opacity: 0; transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) {
  .nivel-avatar, .nivel-estatueta { animation: none; }
}

.conq-volta { margin: 0 0 .6rem; font-size: .85rem; }
.conq-volta a { color: var(--realce); text-decoration: none; }
.bloco h2 small { font-size: .74rem; color: var(--tinta-fraca); font-weight: 600; }

/* ---- posições ---- */
.perf-posicoes {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem;
}
.perf-posicoes li {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .9rem; border-radius: 12px;
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.perf-posicoes .medalha { font-size: 1.5rem; line-height: 1; }
.perf-posicoes .quem { flex: 1; min-width: 0; display: grid; }
.perf-posicoes .quem b { font-size: .9rem; }
.perf-posicoes .quem span { font-size: .74rem; color: var(--tinta-fraca); }
.perf-posicoes .col { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ---- histórico ---- */
.perf-historico { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.perf-historico li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .9rem; padding: .7rem .95rem; border-radius: 12px;
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.perf-historico .data {
  font-size: .74rem; color: var(--tinta-fraca); text-align: center;
  font-variant-numeric: tabular-nums; min-width: 4.2rem;
}
.perf-historico .oque { min-width: 0; display: grid; gap: .3rem; }
.perf-historico .oque b { font-size: .9rem; }
.perf-historico .barra {
  height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden;
}
.perf-historico .barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #16A34A, #4ADE80);
}
.perf-historico .barra.fraca i { background: linear-gradient(90deg, #B45309, #F59E0B); }
.perf-historico .pontos { text-align: right; }
.perf-historico .pontos b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.perf-historico .pontos span { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-fraca); }

@media (max-width: 620px) {
  .perf-carta { padding: 1.1rem; gap: 1rem; }
  .perf-anel { width: 88px; height: 88px; }
  .perf-anel img, .perf-anel .avatar { width: 78px !important; height: 78px !important; }
  .perf-quem h1 { font-size: 1.35rem; }
  .perf-chips { width: 100%; }
  .perf-chips div { flex: 1; min-width: 0; }
  .perf-abas button { flex: 1 1 40%; font-size: .82rem; padding: .5rem .4rem; }
}
.bloco-lgpd { border-top: 1px solid var(--borda); padding-top: 1.6rem; }
.form-inline {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0; border-bottom: 1px solid var(--borda);
}
.form-inline > div:first-of-type { flex: 1 1 260px; }
.form-inline b { display: block; }
.form-inline small { color: var(--tinta-fraca); font-size: .84rem; }
.form-inline.perigo b { color: #B02A2A; }
.excluir-campos { display: flex; gap: .5rem; flex-wrap: wrap; }

.texto-longo h2 { font-size: 1.1rem; margin: 1.8rem 0 .5rem; }
.texto-longo p { max-width: var(--medida); color: var(--tinta-fraca); line-height: 1.65; }

@media (max-width: 640px) {
  .linha-tripla { grid-template-columns: 1fr; }
  .cartao-form { padding: 1.3rem; }
  .tabela-rank th:nth-child(4), .tabela-rank td:nth-child(4) { display: none; }
}

.quiz-chamada {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 12px; padding: 1.2rem 1.4rem; margin: 0 0 1.6rem;
}
.quiz-chamada p { margin: 0; color: var(--tinta-fraca); }

/* `align-items: center` nao e cosmetico: sem ele os <li> ESTICAM ate a altura
   do mais alto — que agora e o avatar, com 36px — e o texto de cada item fica
   grudado no topo dessa caixa. Era o desalinhamento visivel entre os rotulos e
   o avatar. */
.menu-topo { list-style: none; display: flex; align-items: center;
  gap: 1.1rem; margin: 0 1.2rem 0 0; padding: 0; }
/* O avatar e o ultimo item e o unico que nao e texto: um respiro a mais o
   separa do "Doar" sem precisar de divisor. */
.menu-topo .menu-conta { margin-left: .3rem; display: flex; align-items: center; }
.menu-topo a {
  color: var(--palco-fraca); text-decoration: none; font-weight: 700;
  font-size: .92rem; letter-spacing: .01em;
}
.menu-topo a:hover { color: var(--palco-lampada); }
@media (max-width: 560px) { .menu-topo { gap: .7rem; margin-right: .6rem; font-size: .85rem; } }

/* Botão do quiz no hero, ao lado do trailer.
   O hero é sempre escuro (tokens --palco-*), então o destaque vem do dourado
   preenchido: ao lado de um botão vazado, ele é o único elemento sólido da
   área e puxa o olho sem precisar de tamanho maior. */
.btn-quiz {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--palco-lampada); color: #17130A;
  border: 1px solid var(--palco-lampada); border-radius: 4px;
  font: inherit; font-weight: 800; text-decoration: none;
  padding: .62rem 1.25rem; cursor: pointer;
  box-shadow: 0 4px 18px rgba(242, 180, 65, .28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-quiz svg { width: 15px; height: 15px; fill: #17130A; }
.btn-quiz:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(242,180,65,.38); }
.btn-quiz:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn-quiz { transition: none; } .btn-quiz:hover { transform: none; } }
@media (max-width: 560px) { .acoes { gap: .9rem; } .btn-quiz, .btn-trailer { padding: .6rem 1rem; } }

/* Curiosidades e redes, na página da pessoa. */
.curiosidades { display: grid; gap: 0; margin: 0 0 1.2rem; max-width: var(--medida); }
.curiosidades > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--borda);
}
.curiosidades dt { font-weight: 700; font-size: .88rem; color: var(--tinta-fraca); }
.curiosidades dd { margin: 0; }
@media (max-width: 620px) {
  .curiosidades > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Redes: simbolo, nao nome. O rotulo vive no aria-label e no title — icone
   sozinho nao diz nada a leitor de tela. */
.redes { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0 0 1.4rem; }
.redes .rede {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--borda-forte); color: var(--tinta-fraca);
  text-decoration: none;
  transition: color .14s ease, border-color .14s ease, transform .14s ease;
}
.redes .rede svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.redes .rede:hover { transform: translateY(-2px); border-color: currentColor; }

/* Cor da marca so no hover: sete circulos coloridos ao mesmo tempo competiriam
   com o resto da pagina. */
.redes .rede-instagram:hover { color: #C13584; }
.redes .rede-twitter:hover   { color: var(--tinta); }
.redes .rede-tiktok:hover    { color: #00C2CB; }
.redes .rede-youtube:hover   { color: #FF0000; }
.redes .rede-facebook:hover  { color: #1877F2; }
.redes .rede-imdb:hover      { color: #E6B91E; }
.redes .rede-site:hover      { color: var(--realce); }

.redes .rede:focus-visible { outline: 2px solid var(--realce); outline-offset: 2px; }

/* Tooltip proprio, no lugar do `title` do navegador.
   O nativo tem atraso de ~1s, aparece onde o rato esta e nao aceita estilo —
   entao o `title` saiu e o nome vive no `data-nome`. O `aria-label` continua
   la: e ele que o leitor de tela anuncia, e um tooltip em CSS nao substitui. */
.redes .rede { position: relative; }

.redes .rede::after {
  content: attr(data-nome);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 4px) scale(.94);
  transform-origin: bottom center;
  background: var(--tinta); color: var(--fundo);
  padding: .3rem .6rem; border-radius: 6px;
  font-size: .76rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; letter-spacing: .01em;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1.2);
  z-index: 3;
}

/* A setinha. Mesmo `transition` do balao para os dois subirem juntos. */
.redes .rede::before {
  content: ""; position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translate(-50%, 4px);
  border: 5px solid transparent; border-top-color: var(--tinta);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1.2);
  z-index: 3;
}

.redes .rede:hover::after,
.redes .rede:focus-visible::after {
  opacity: 1; transform: translate(-50%, 0) scale(1);
}
.redes .rede:hover::before,
.redes .rede:focus-visible::before {
  opacity: 1; transform: translate(-50%, 0);
}

/* No telemovel nao ha hover: o balao so apareceria preso apos o toque, antes
   de o link abrir. Melhor nao existir. */
@media (hover: none) {
  .redes .rede::after, .redes .rede::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .redes .rede::after, .redes .rede::before { transition: opacity .16s ease; }
  .redes .rede:hover::after, .redes .rede:focus-visible::after { transform: translate(-50%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .redes .rede { transition: none; }
  .redes .rede:hover { transform: none; }
}

/* Paginação da filmografia. Fica logo abaixo da grade, então trocar de página
   não tira o visitante de perto dos pôsteres. */
.paginacao {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 1.6rem 0 2.4rem; flex-wrap: wrap;
}
.paginacao .botao { padding: .55rem 1.2rem; font-size: .92rem; }
.paginacao .botao:disabled { opacity: .4; cursor: default; }
.paginacao-conta { font-size: .9rem; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }

/* (a regra que garantia isto virou global, no topo do arquivo) */

/* =============================================================================
   Página da pessoa, reorganizada em 2026-09-08.
   Coluna lateral com a ficha (o que cabe em uma linha) e coluna principal com
   biografia, prêmios, destaques e filmografia. O modelo é o de fichas de
   cinema: quem chega quer saber quem é a pessoa e ver os filmes, nessa ordem.
   ============================================================================= */

.pessoa-grade {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2.8rem;
  padding: 2.4rem 0 1rem; align-items: start;
}

/* ESTA LINHA E O CONSERTO. Item de grid nasce com `min-width: auto`, o que o
   deixa crescer ate caber o conteudo — entao a tira horizontal, em vez de
   rolar dentro da coluna, ESTICAVA a coluna e empurrava a pagina inteira para
   fora da tela. A filmografia herdava a largura inflada e vazava junto.
   `min-width: 0` devolve a coluna o direito de ser menor que o conteudo, que e
   o que faz o `overflow-x` da tira funcionar. */
.pessoa-principal { min-width: 0; }
.pessoa-principal > * { max-width: 100%; }

/* A lateral acompanha a rolagem: a filmografia é longa e a ficha continua
   servindo de referência enquanto se olha os pôsteres. */
.pessoa-lateral { position: sticky; top: 96px; }
.pessoa-lateral .pessoa-foto img,
.pessoa-lateral .pessoa-foto .sem-foto {
  width: 100%; height: auto; border-radius: 12px; display: block;
  background: var(--fundo-2); aspect-ratio: 2 / 3; object-fit: cover;
}
.pessoa-lateral .redes { margin: 1rem 0 1.6rem; gap: .4rem; }
.pessoa-lateral .redes .rede { width: 36px; height: 36px; }
.pessoa-lateral .redes .rede svg { width: 17px; height: 17px; }

.lateral-titulo { font-size: 1.05rem; margin: 0 0 .8rem; }
.ficha { display: grid; gap: .9rem; margin: 0; }
.ficha dt { font-weight: 700; font-size: .82rem; color: var(--tinta-fraca); margin-bottom: .1rem; }
.ficha dd { margin: 0; font-size: .93rem; line-height: 1.35; }

.pessoa-principal h1 {
  /* Mesma tipografia do titulo de filme: era `.pessoa-dados h1`, que deixou de
     existir na reorganizacao. Sem isto o nome perdia a largura otica. */
  font-family: var(--fonte-titulo); font-variation-settings: 'wdth' 112;
  font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.05; letter-spacing: -0.024em; margin: 0 0 1.4rem;
}
.pessoa-principal .rotulo { margin: 2.2rem 0 .7rem; font-size: 1.15rem; font-weight: 700; }
.pessoa-principal .rotulo:first-of-type { margin-top: 0; }

.bio p { max-width: var(--medida); line-height: 1.62; margin: 0 0 .9rem; }
.bio-mais {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--realce); font: inherit; font-weight: 700; font-size: .93rem;
}
.bio-mais:hover { text-decoration: underline; }

/* Faixa de prêmios. Fundo escuro fixo nos dois temas: é um selo, e selo que
   muda de cor com o tema deixa de parecer selo. */
.premios { margin: 2rem 0 .5rem; }
.premios-faixa {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(100deg, #10243A 0%, #1B3A5B 55%, #143049 100%);
  color: #EAF2FA; border-radius: 12px; padding: 1rem 1.4rem;
}
.premios-selo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; letter-spacing: .14em; font-size: .82rem;
  color: var(--palco-lampada); text-transform: uppercase;
}
.premios-selo svg {
  width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto;
  /* Brilho discreto: a estatueta e dourada sobre azul escuro, e sem isto some
     na faixa. */
  filter: drop-shadow(0 0 5px rgba(242, 180, 65, .45));
}
.premios-num b { font-size: 1.25rem; font-weight: 800; }
.premios-sep { width: 1px; height: 22px; background: rgba(234,242,250,.28); }
.premios-abrir {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: #EAF2FA; font: inherit; font-weight: 700; font-size: .9rem;
}
.premios-abrir:hover { color: var(--palco-lampada); }
.premios-lista { margin-top: 1rem; }

/* Destaques: tira horizontal. Grade normal empurraria a filmografia para
   muito abaixo da dobra. */
/* A tira e visualmente MENOR que a grade da filmografia de proposito: com o
   mesmo tamanho, as duas secoes pareciam a mesma lista repetida. */
.tira {
  list-style: none; margin: 0 0 1rem; padding: 0 0 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 128px;
  gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximate; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tira li { scroll-snap-align: start; }
.tira a { text-decoration: none; color: inherit; display: block; }
.tira h3 { font-size: .82rem; font-weight: 600; line-height: 1.2; margin: .45rem 0 .1rem; }
.tira .estreia { font-size: .75rem; color: var(--tinta-fraca); margin: 0; }
.tira::-webkit-scrollbar { height: 6px; }
.tira::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 999px; }
.tira::-webkit-scrollbar-track { background: transparent; }

/* A grade da filmografia mora dentro de uma coluna, nao da largura toda: sem
   isto ela calcula as colunas pela pagina e estoura. */
.pessoa-principal .parede {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.5rem 1rem; padding-top: .4rem;
}

.parede .filme h3 { font-size: .95rem; font-weight: 600; line-height: 1.25; margin: .6rem 0 .15rem; }

@media (max-width: 900px) {
  .pessoa-grade { grid-template-columns: 1fr; gap: 1.6rem; }
  .pessoa-lateral { position: static; }
  .pessoa-lateral .pessoa-foto { width: 180px; }
  .ficha { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem 1.4rem; }
  .premios-abrir { margin-left: 0; }
}

/* Setas da tira de destaques. Ficam sobre as bordas, e só aparecem quando há
   para onde ir — seta desabilitada permanente é ruído. */
.tira-caixa { position: relative; }
.tira-seta {
  position: absolute; top: 76px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fundo); color: var(--tinta);
  border: 1px solid var(--borda-forte); cursor: pointer; padding: 0;
  box-shadow: 0 3px 14px rgba(20, 18, 35, .22);
  transition: transform .14s ease, border-color .14s ease;
}
.tira-seta svg { width: 20px; height: 20px; fill: currentColor; }
.tira-seta:hover { border-color: var(--realce); color: var(--realce); transform: scale(1.07); }
.tira-seta:focus-visible { outline: 2px solid var(--realce); outline-offset: 2px; }
.tira-seta-esq { left: -14px; }
.tira-seta-dir { right: -14px; }

/* Sombra na borda direita, para dizer que a lista continua. */
.tira-caixa::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 14px; width: 46px;
  background: linear-gradient(to left, var(--fundo), transparent);
  pointer-events: none;
}

@media (hover: none) {
  /* No telemóvel o dedo já arrasta: setas só ocupariam espaço. */
  .tira-seta { display: none; }
  .tira-caixa::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tira-seta { transition: none; }
  .tira-seta:hover { transform: none; }
}

/* Próximos lançamentos. Cartão deitado, com a data em destaque — é o que o
   visitante quer saber aqui, mais que o pôster. */
.proximos { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .8rem; }
.proximos li {
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden;
  background: var(--fundo); transition: border-color .14s ease;
}
.proximos li:hover { border-color: var(--realce); }
.proximos a { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; text-decoration: none; color: inherit; align-items: center; }
.proximos .cartaz { aspect-ratio: 2 / 3; border: 0; border-radius: 0; }
.proximos .cartaz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proximos-texto { padding: .9rem 1rem .9rem 0; }
.proximos h3 { font-size: 1rem; font-weight: 700; line-height: 1.25; margin: 0 0 .25rem; }
.proximos .estreia { font-size: .86rem; color: var(--realce); font-weight: 600; margin: 0; }
.proximos .papel { font-size: .82rem; color: var(--tinta-fraca); margin: .2rem 0 0; }

/* =============================================================================
   PÁGINA INICIAL — 2026-09-08
   Mesma identidade do resto: tokens de cor, Archivo, o hero escuro do palco.
   Nada de cor literal nova, para o tema escuro continuar valendo sem uma
   segunda folha de regras.
   ============================================================================= */

/* ---------- herói: contador + busca ---------- */
.home-hero {
  background:
    radial-gradient(1100px 420px at 18% -10%, rgba(90, 69, 214, .28), transparent 60%),
    radial-gradient(900px 380px at 88% 0%, rgba(242, 180, 65, .14), transparent 62%),
    var(--palco);
  color: var(--palco-tinta);
  padding: 3.4rem 0 3rem;
  border-bottom: 1px solid var(--palco-borda);
  margin-bottom: 2.4rem;
}
.home-hero h1 {
  font-family: var(--fonte-titulo); font-variation-settings: 'wdth' 112;
  font-weight: 800; font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  /* RESPIRO MAIOR entre a frase e os números: eles ficaram em duas fileiras,
     e 1,6rem, que bastava para uma linha de contadores, deixava os dois blocos
     colados. */
  line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 2.4rem;

  /* 16ch forcava TRES linhas numa frase de 41 caracteres, e a terceira ficava
     so com "provar." — uma palavra curta ocupando uma linha inteira e um
     titulo que parecia grande demais para o que dizia. 20ch cabe em duas. */
  max-width: 20ch;

  /* `balance` distribui as linhas em vez de encher a primeira e largar o resto.
     E exatamente o caso deste titulo, e onde nao houver suporte o texto so
     quebra como antes — nada se perde. */
  text-wrap: balance;
}


/* ---------- busca ---------- */
/* z-index alto e no contêiner, não só no painel: o herói cria contexto de
   empilhamento próprio, e um z-index interno não venceria as seções seguintes. */
.busca { position: relative; max-width: 620px; z-index: 60; }

/* As duas palavras que dizem o que o site é. A cor é a mesma do selo "ao vivo"
   e do botão de busca — o herói inteiro fala uma língua só. */
.realce-titulo {
  font-style: normal;
  color: var(--palco-lampada);
  /* Sublinhado grosso e afastado, em vez de fundo colorido: destaca sem
     transformar a palavra num botão falso. */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--palco-lampada) 45%, transparent);
  text-decoration-thickness: .09em;
  text-underline-offset: .14em;
}

/* ---- os números do herói ---- */
/* Os três do acervo formam UMA FILEIRA com divisórias — juntos eles dizem
   "tamanho", e separá-los em quatro colunas soltas fazia o quarto quebrar
   sozinho para a linha de baixo. */
/* GRADE E NAO `flex-wrap`, e a diferenca e a divisoria.
   Com flex, a lista quebrava de linha e a divisoria da esquerda aparecia ANTES
   do primeiro item da segunda linha — porque `li + li` nao sabe onde uma linha
   comeca. Grade sabe: `nth-child(3n+1)` e sempre o primeiro da fileira. */
.contador {
  list-style: none; margin: 1.4rem 0 1rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Mais ar ENTRE as fileiras que entre as colunas: a divisória já separa as
     colunas, e a fileira de baixo não tem nada que a distinga da de cima. */
  gap: 1.3rem 0;
  max-width: 620px;
}
.contador li { padding: 0 1.1rem; display: grid; gap: .1rem; align-content: center;
  border-left: 1px solid var(--palco-borda); }
.contador li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.contador b {
  /* Um pouco menor que antes: sao seis numeros agora, nao tres. */
  font-size: clamp(1.3rem, 2.8vw, 1.8rem); font-weight: 800; line-height: 1.05;
  color: var(--palco-tinta); font-variant-numeric: tabular-nums;
}
.contador span {
  font-size: .74rem; color: var(--palco-fraca);
  text-transform: lowercase; letter-spacing: .01em;
}

/* O ícone acompanha o rótulo, não o número: alinhado à palavra ele lê como
   parte dela; alinhado ao número, competiria com o número. */
.contador .rot { display: inline-flex; align-items: center; gap: .34rem; }
.contador .rot svg {
  width: 13px; height: 13px; flex: 0 0 auto;
  fill: none; stroke: var(--palco-lampada); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; opacity: .9;
}

/* O "entraram hoje" NÃO é do mesmo tipo: os outros três medem o acervo, este
   mede atividade agora. Vira selo com ponto pulsante — a forma que comunica
   "ao vivo" sem precisar da palavra. */
.selo-vivo {
  display: inline-flex; align-items: baseline; gap: .45rem;
  margin: 0 0 1.6rem; padding: .42rem .9rem .42rem .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--palco-lampada) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--palco-lampada) 32%, transparent);
}
.selo-vivo i {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--palco-lampada); align-self: center;
  animation: vivo-pulsa 2s ease-in-out infinite;
}
@keyframes vivo-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--palco-lampada) 70%, transparent); }
  55%      { box-shadow: 0 0 0 7px transparent; }
}
.selo-vivo b {
  font-size: 1.05rem; font-weight: 800; color: var(--palco-lampada);
  font-variant-numeric: tabular-nums;
}
.selo-vivo span { font-size: .8rem; color: var(--palco-fraca); }

@media (max-width: 560px) {
  .contador li { padding: 0 .9rem; }
}
@media (prefers-reduced-motion: reduce) { .selo-vivo i { animation: none; } }

/* ---- campo e botão na mesma linha ---- */
.busca-linha { display: flex; align-items: stretch; gap: .6rem; }
.busca-linha .busca-campo { flex: 1; min-width: 0; }

/* ---- a busca no herói ---- */
/* O PROBLEMA ERA CONTRASTE. O campo usava `rgba(255,255,255,.07)` sobre um
   herói escuro — 7% de branco, praticamente o mesmo valor do fundo. Ele existia
   mas não se via, e a parte principal do site passava batida.
   A correção é inverter: campo sólido claro sobre o escuro. Nenhum outro ajuste
   chega perto disso em ganho de atenção. */
.busca-hero { max-width: 660px; }
.busca-hero .busca-campo {
  background: #fff;
  border: 0;
  border-radius: 14px;
  padding: .25rem 1.1rem;
  gap: .8rem;
  /* Um halo na cor de destaque separa o campo do herói sem moldura dura, e
     amarra visualmente com o número em destaque do contador. */
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .16),
    0 10px 34px rgb(0 0 0 / .42),
    0 0 44px -12px var(--palco-lampada);
}
.busca-hero .busca-campo:focus-within {
  background: #fff;
  box-shadow:
    0 0 0 3px var(--palco-lampada),
    0 12px 40px rgb(0 0 0 / .48);
}
.busca-hero .busca-campo > svg { fill: #6b7280; width: 21px; height: 21px; }
.busca-hero .busca-campo input {
  color: #14161a;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 1.02rem 0;
}
.busca-hero .busca-campo input::placeholder { color: #7b8290; font-weight: 400; }
.busca-hero .busca-campo input::-webkit-search-cancel-button { filter: none; opacity: .45; }
.busca-hero .busca-carga { border-color: #d7dae0; border-top-color: var(--palco-lampada); }

/* ---- botão ---- */
.busca-ir {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
  border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem;
  padding: .78rem 1.25rem; border-radius: 11px;
  background: var(--realce); color: #fff;
  transition: filter .14s ease, transform .14s ease;
}
.busca-ir:hover { filter: brightness(1.08); }
.busca-ir:active { transform: translateY(1px); }
.busca-ir:focus-visible { outline: 2px solid var(--palco-lampada); outline-offset: 2px; }
.busca-ir svg { width: 17px; height: 17px; fill: currentColor; }

.busca-hero .busca-ir {
  background: var(--palco-lampada); color: #1a1408;
  padding: .82rem 1.35rem; font-size: 1rem;
}

/* Na página de resultados o campo já vive sobre fundo normal: ali basta o
   botão, sem a inversão. */
.busca-pagina .busca-campo { padding-right: .3rem; }

@media (max-width: 620px) {
  /* O rótulo sai; o ícone sozinho já diz o que é, e o campo precisa do espaço. */
  .busca-ir span { display: none; }
  .busca-ir { padding: .78rem .95rem; }
  .busca-hero .busca-campo input { font-size: 1rem; padding: .92rem 0; }
}
.busca-campo {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--palco-borda);
  border-radius: 12px; padding: .1rem .95rem;
  transition: border-color .15s ease, background .15s ease;
}
.busca-campo:focus-within {
  border-color: var(--palco-lampada); background: rgba(255, 255, 255, .11);
}
.busca-campo > svg { width: 19px; height: 19px; fill: var(--palco-fraca); flex: 0 0 auto; }
.busca-campo input {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--palco-tinta); font: inherit; font-size: 1.02rem;
  padding: .85rem 0;
}
.busca-campo input::placeholder { color: var(--palco-fraca); }
.busca-campo input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.busca-carga {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--palco-borda); border-top-color: var(--palco-lampada);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.busca-resultado {
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 61;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  max-height: 62vh; overflow-y: auto; padding: .5rem;
}
.busca-grupo + .busca-grupo { border-top: 1px solid var(--borda); margin-top: .4rem; padding-top: .4rem; }
.busca-grupo h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-fraca); margin: .4rem .6rem .3rem;
}
.busca-grupo ul { list-style: none; padding: 0; margin: 0; }
.busca-grupo a {
  display: flex; align-items: center; gap: .75rem;
  padding: .45rem .6rem; border-radius: 8px;
  text-decoration: none; color: var(--tinta);
}
.busca-grupo a:hover, .busca-grupo a:focus-visible { background: var(--fundo-2); outline: none; }
.busca-grupo img, .busca-grupo .sem-cartaz {
  width: 34px; height: 51px; object-fit: cover; border-radius: 4px;
  background: var(--fundo-2); flex: 0 0 auto;
}
.busca-grupo .redondo { width: 34px; height: 34px; border-radius: 50%; }
.busca-grupo span { display: grid; min-width: 0; }
.busca-grupo b { font-size: .94rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-grupo small { font-size: .78rem; color: var(--tinta-fraca); }
.busca-vazio { padding: 1rem .8rem; color: var(--tinta-fraca); font-size: .92rem; margin: 0; }

.busca-todos {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .35rem; padding: .7rem .8rem; border-top: 1px solid var(--borda);
  border-radius: 8px; text-decoration: none;
  color: var(--realce); font-weight: 700; font-size: .9rem;
}
.busca-todos:hover, .busca-todos:focus-visible { background: var(--fundo-2); outline: none; }
.busca-todos small { color: var(--tinta-fraca); font-weight: 500; }

/* ---------- seções ---------- */
.bloco-home { margin: 0 0 3rem; }
.titulo-secao {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 1rem;
}
.titulo-secao small { font-size: .82rem; font-weight: 500; color: var(--tinta-fraca); }
.titulo-secao .marca-breve {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 999px; padding: .16rem .6rem; font-size: .72rem;
}
.ver-tudo { margin-left: auto; font-size: .86rem; font-weight: 700; color: var(--realce); text-decoration: none; }
.ver-tudo:hover { text-decoration: underline; }

/* Na home os cartazes são maiores que na tira da página de pessoa. */
.home .tira { grid-auto-columns: 158px; gap: 1.1rem; }
.home .tira h3 { font-size: .89rem; }
.home .tira-seta { top: 88px; }

.tira-pessoas { grid-auto-columns: 128px !important; text-align: center; }
.tira-pessoas img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  background: var(--fundo-2); display: block;
}
.tira-pessoas h3 { margin-top: .6rem !important; }

/* ---------- notícias ---------- */
.noticias-hero {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--fundo-2); border: 1px solid var(--borda);
  min-height: 300px;
}
.noticia-slide {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 1fr;
  opacity: 0; visibility: hidden; transition: opacity .45s ease;
}
.noticia-slide.ativo { opacity: 1; visibility: visible; }
.noticia-arte {
  background:
    repeating-linear-gradient(135deg, rgba(90,69,214,.14) 0 14px, transparent 14px 28px),
    linear-gradient(140deg, var(--palco) 0%, #241f42 100%);
}
.noticia-texto { padding: 2rem 2.2rem; display: grid; align-content: center; gap: .6rem; }
.noticia-tag {
  justify-self: start; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--realce);
  border: 1px solid var(--realce); border-radius: 999px; padding: .18rem .6rem;
}
.noticia-texto h3 { font-size: 1.5rem; line-height: 1.15; margin: 0; }
.noticia-texto p { color: var(--tinta-fraca); margin: 0; max-width: 46ch; }
.noticias-pontos { position: absolute; bottom: 1rem; right: 1.4rem; display: flex; gap: .4rem; }
.noticias-pontos button {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 0; background: var(--borda-forte);
}
.noticias-pontos button.ativo { background: var(--realce); width: 24px; border-radius: 999px; }

/* ---------- aniversariantes ---------- */
.aniversarios {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 1.2rem;
}
.aniversarios a { display: grid; justify-items: center; text-align: center; text-decoration: none; color: inherit; gap: .1rem; }
.aniversarios img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--fundo-2); border: 2px solid transparent; margin-bottom: .5rem;
}
.aniversarios .sem-foto { width: 96px; height: 96px; aspect-ratio: auto; margin: 0 auto .5rem; }
.tira-pessoas .sem-foto { width: 128px; height: 128px; aspect-ratio: auto; margin: 0 auto; }
.aniversarios a:hover img { border-color: var(--realce); }
.aniversarios b { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.aniversarios span { font-size: .8rem; color: var(--tinta-fraca); }
.aniversarios small { font-size: .74rem; color: var(--tinta-fraca); opacity: .75; }
.aniversarios .e-hoje img { border-color: var(--lampada); }
.bolo { font-style: normal; color: var(--lampada); font-weight: 700; }

/* O cartão da seta, no fim da grade de aniversariantes. Mesmo diâmetro dos
   retratos para a fileira não desalinhar: ele é mais um item da lista, não um
   botão pendurado embaixo. */
.aniv-mais a { justify-items: center; }
.aniv-seta {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: .5rem;
  border: 2px dashed var(--borda-forte); background: var(--fundo-2);
  transition: border-color .14s ease, background .14s ease;
}
.aniv-seta svg {
  width: 26px; height: 26px; fill: none; stroke: var(--tinta-fraca);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .14s ease, transform .14s ease;
}
.aniv-mais a:hover .aniv-seta {
  border-color: var(--realce); border-style: solid;
  background: color-mix(in srgb, var(--realce) 8%, var(--fundo-2));
}
.aniv-mais a:hover .aniv-seta svg { stroke: var(--realce); transform: translateX(3px); }
.aniv-mais b { font-size: .88rem; font-weight: 600; color: var(--realce); line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
  .aniv-seta, .aniv-seta svg { transition: none; }
  .aniv-mais a:hover .aniv-seta svg { transform: none; }
}

/* ---------- página de aniversariantes ---------- */
/* O seletor é de LINKS, não de <select>: doze meses cabem na tela, e assim
   cada mês é uma URL que se compartilha e que o buscador indexa. */
.meses {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.4rem 0 1.6rem;
}
.meses a {
  padding: .4rem .85rem; border-radius: 999px; text-decoration: none;
  font-size: .88rem; color: var(--tinta-fraca);
  border: 1px solid var(--borda); text-transform: capitalize;
  transition: color .13s ease, border-color .13s ease;
}
.meses a:hover { border-color: var(--realce); color: var(--realce); }
.meses a.ativo {
  background: var(--realce); color: #fff; border-color: var(--realce); font-weight: 600;
}

/* O mês corrente ganha um ponto, mesmo quando não é o selecionado: é o único
   dos doze que tem significado sozinho. */
.meses a.corrente:not(.ativo)::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%; margin-right: .4rem;
  background: var(--lampada);
}

.aniv-conta { color: var(--tinta-fraca); font-size: .9rem; margin: 1.6rem 0 1.4rem; }
.aniv-conta a { color: var(--realce); }

/* ---- a agenda de dias ---- */
/* O prefixo é `agenda-`, não `tira-`: `.tira-seta` JÁ EXISTE — é a seta do
   carrossel, com `position: absolute` e ancorada em `.tira-caixa`. Reusar o
   nome fez a seta desta página se ancorar no corpo do documento e voar para o
   topo, longe de tudo. Nome de classe se confere antes de escrever. */
/* Duas camadas de navegação: o mês escolhe o recorte, a tira escolhe o dia.
   Uma lista corrida do mês obriga a rolar para achar uma data; a tira põe a
   semana inteira na altura dos olhos. */
.agenda {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1.8rem; padding: .7rem 1rem;
  border: 1px solid var(--borda); border-radius: 15px; background: var(--fundo-2);
}
.agenda-data {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-size: 1rem; font-weight: 600; text-transform: capitalize;
}
.agenda-data svg { width: 18px; height: 18px; fill: var(--tinta-fraca); flex: 0 0 auto; }

.agenda-navega { display: flex; align-items: center; gap: .2rem; }
.agenda-dias {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .1rem;
}

/* Cada dia: abreviação em cima, número no meio, ponto embaixo. O ponto é o que
   diz, antes do clique, se há alguém ali. */
.agenda-dias .dia {
  display: grid; justify-items: center; gap: .12rem;
  width: 46px; padding: .3rem 0; border-radius: 12px;
  text-decoration: none; color: var(--tinta-fraca);
}
.agenda-dias .sem {
  font-style: normal; font-size: .58rem; text-transform: uppercase;
  letter-spacing: .06em; opacity: .85;
}
.agenda-dias .num {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tinta);
  transition: background .13s ease, color .13s ease;
}
.agenda-dias .ponto {
  width: 5px; height: 5px; border-radius: 50%; background: var(--realce);
}
.agenda-dias .ponto.oco { background: transparent; }

.agenda-dias a.dia:hover .num { background: color-mix(in srgb, var(--realce) 14%, transparent); color: var(--realce); }

/* Dia vazio não é clicável: um seletor que leva a uma tela em branco é
   armadilha, não navegação. */
.agenda-dias .dia.vazio { opacity: .38; }
.agenda-dias .dia.vazio .num { color: var(--tinta-fraca); font-weight: 500; }

.agenda-dias .dia.ativo .num { background: var(--realce); color: #fff; }
.agenda-dias .dia.ativo .ponto { background: var(--realce); }
.agenda-dias .dia.ativo .sem { color: var(--realce); }

/* Hoje, quando não é o dia aberto: anel em vez de preenchimento. */
.agenda-dias .dia.hoje:not(.ativo) .num {
  box-shadow: inset 0 0 0 1.5px var(--lampada); color: var(--lampada);
}

.agenda-seta {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; text-decoration: none;
  font-size: 1.2rem; line-height: 1; color: var(--tinta-fraca);
  border: 1px solid var(--borda);
}
.agenda-seta:hover { border-color: var(--realce); color: var(--realce); }
.agenda-seta.desligada { opacity: .3; }

.aniv-do-dia { margin-bottom: 1.5rem; }

@media (max-width: 720px) {
  .agenda { padding: .7rem .6rem; }
  .agenda-navega { width: 100%; justify-content: space-between; }
  .agenda-dias { overflow-x: auto; scrollbar-width: none; }
  .agenda-dias::-webkit-scrollbar { display: none; }
  .agenda-dias .dia { width: 42px; }
}

.aniv-grupo { margin: 0 0 2rem; }
.aniv-dia {
  display: flex; align-items: baseline; gap: .45rem;
  margin: 0 0 1rem; font-size: 1rem; font-weight: 600;
}
.aniv-dia b {
  font-size: 1.6rem; font-weight: 800; line-height: 1;
  color: var(--realce); font-variant-numeric: tabular-nums;
}
.aniv-dia span { color: var(--tinta-fraca); text-transform: capitalize; font-weight: 500; }
.aniv-dia::after {
  content: ''; flex: 1; height: 1px; background: var(--borda); margin-left: .3rem;
}

/* ---------- trailers ---------- */
.trailers {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1.4rem;
}
.trailers a { text-decoration: none; color: inherit; display: block; }
.trailer-arte {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.trailer-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trailer-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, .45));
  transition: background .16s ease;
}
.trailer-play svg { width: 46px; height: 46px; fill: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.trailers a:hover .trailer-play { background: rgba(0, 0, 0, .35); }
.trailers a:hover .trailer-arte { border-color: var(--realce); }
.trailers h3 { font-size: .96rem; font-weight: 600; margin: .6rem 0 .1rem; line-height: 1.25; }
.trailers .estreia { font-size: .8rem; color: var(--tinta-fraca); margin: 0; }
.trailer-arte .selo { top: auto; bottom: .5rem; left: .5rem; }

/* ---------- bilheteria ---------- */
/* Duas colunas de cinco.
   `grid-auto-flow: column` com cinco linhas fixas é o que faz a numeração
   DESCER (1 a 5 à esquerda, 6 a 10 à direita). Uma grade de duas colunas comum
   preencheria na horizontal — 1,2 na primeira linha, 3,4 na segunda — e a
   ordem do ranking se perderia. */
.bilheteria {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); gap: .1rem 2.4rem;
}
.bilheteria a {
  display: grid; grid-template-columns: 2.4rem 46px 1fr auto; align-items: center; gap: 1rem;
  padding: .6rem .5rem; border-bottom: 1px solid var(--borda);
  text-decoration: none; color: inherit; border-radius: 8px;
}
.bilheteria a:hover { background: var(--fundo-2); }
.bilheteria .posicao { font-size: 1.15rem; font-weight: 800; color: var(--tinta-fraca); text-align: center; }
.bilheteria li:nth-child(-n+3) .posicao { color: var(--lampada); }
.bilheteria img { border-radius: 4px; object-fit: cover; background: var(--fundo-2); }
.bilheteria-texto { display: grid; min-width: 0; }
.bilheteria-texto b { font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilheteria-texto small { font-size: .8rem; color: var(--tinta-fraca); }
.bilheteria-valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- blog ---------- */
.blog {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem;
}
.blog-arte {
  aspect-ratio: 16 / 9; border-radius: 12px; margin-bottom: .8rem;
  background:
    repeating-linear-gradient(45deg, var(--fundo-2) 0 12px, transparent 12px 24px),
    var(--fundo-2);
  border: 1px solid var(--borda);
}
.blog h3 { font-size: 1.02rem; margin: 0 0 .35rem; line-height: 1.25; }
.blog p { color: var(--tinta-fraca); font-size: .9rem; margin: 0 0 .4rem; }
.blog small { color: var(--tinta-fraca); font-size: .78rem; }
/* O bloco deixou de ser esqueleto e virou notícia de verdade: cada item agora
   é um link inteiro, e a arte pode ser <img> do site de origem. */
.blog a { display: block; color: inherit; text-decoration: none; }
.blog a:hover h3 { color: var(--realce); }
img.blog-arte { width: 100%; height: auto; object-fit: cover; background: var(--fundo-2); }
.blog small b { font-weight: 700; color: var(--realce); }

/* ---------- publicidade ---------- */
/* Rotulada sempre. Anuncio que se disfarca de conteudo e o que faz o visitante
   deixar de confiar no resto da pagina. */
.anuncio { margin: 0 0 3rem; }
.anuncio-rotulo {
  display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-fraca); margin-bottom: .4rem;
}
.anuncio-caixa {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; border-radius: 12px;
  border: 1px dashed var(--borda-forte); background: var(--fundo-2);
  color: var(--tinta-fraca); font-size: .84rem;
}
.anuncio-quadrado { min-height: 280px; max-width: 336px; margin: 0 auto; }

/* Abaixo disto, duas colunas espremeriam título e valor na mesma linha. */
@media (max-width: 1000px) {
  .bilheteria { grid-template-rows: none; grid-auto-flow: row; gap: .1rem; }
}

@media (max-width: 760px) {
  .home-hero { padding: 2.4rem 0 2.2rem; }
  .contador { gap: 1.4rem 1.8rem; }
  .noticia-slide { grid-template-columns: 1fr; }
  .noticia-arte { display: none; }
  .noticia-texto { padding: 1.4rem 1.2rem; }
  .noticias-hero { min-height: 220px; }
  .bilheteria {
    grid-template-rows: none; grid-auto-flow: row; gap: .1rem;
  }
  .bilheteria a { grid-template-columns: 1.8rem 40px 1fr; }
  .bilheteria-valor { grid-column: 3; font-size: .85rem; }
}

/* =============================================================================
   HERÓI COM FILMES EM CARTAZ
   O texto fica à esquerda; à direita, um leque de cartazes que gira sozinho.
   O fundo é o backdrop do filme em foco, desfocado e escurecido — o brilho de
   cada cartaz vem daí, não de uma cor inventada.
   ============================================================================= */

/* `overflow: hidden` NAO pode ficar aqui: ele cortava o dropdown da busca,
   que precisa passar por cima das seções de baixo. Quem corta o excesso do
   fundo desfocado é a própria `.hero-fundo`. */
.home-hero.com-cartaz { position: relative; min-height: 540px; }

/* `inset: 0`, NÃO negativo. Com -40px a camada transbordava para fora do
   herói, e o véu escuro (que tem inset:0) cobria só o herói — sobrava uma tira
   de imagem crua embaixo, mudando de cor a cada troca. Quem afasta as bordas
   moles do desfoque é o `scale(1.12)` da imagem, com o corte aqui. */
.hero-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-fundo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  /* Desfoque forte: o fundo é atmosfera, não informação. É por isso que a
     imagem vem em w300 — a 30px de blur, resolução maior é peso jogado fora. */
  filter: blur(26px) saturate(1.3) brightness(.62);
  transform: scale(1.18);
  transition: opacity 1.1s ease;
}
.hero-fundo img.ativo { opacity: 1; }

/* Véu por cima, para o texto ter contraste garantido em qualquer backdrop. */
/* Véu em duas camadas.
   A horizontal garante contraste do texto à esquerda e deixa a arte respirar à
   direita — antes ela era opaca demais e o backdrop mal aparecia. A vertical
   fecha a base na cor do palco, para o herói terminar no fundo da página em vez
   de cortar seco. */
.home-hero.com-cartaz::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 16, 28, .5) 0%, transparent 22%, transparent 72%, var(--palco) 100%),
    linear-gradient(100deg, var(--palco) 4%, rgba(18, 16, 28, .78) 38%, rgba(18, 16, 28, .3) 100%);
}

.hero-grade {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 2.5rem; align-items: center;
}
.home-hero:not(.com-cartaz) .hero-grade { grid-template-columns: 1fr; }

/* ---------- o leque ---------- */
.hero-cartazes {
  position: relative; height: 430px;
  display: flex; align-items: center; justify-content: center;
}
.hero-cartaz {
  --d: 0; --lado: 0; --saindo: 0;
  position: absolute; width: 230px; display: block; text-decoration: none;
  border-radius: 12px; overflow: hidden;
  /* Cada cartaz se afasta do centro conforme a distância até o ativo, e
     encolhe e escurece junto. É isto que dá a sensação de profundidade sem
     nenhuma biblioteca 3D. */
  transform:
    translateX(calc(var(--lado) * (96px + var(--d) * 36px)))
    scale(calc(1 - var(--d) * .1))
    rotate(calc(var(--lado) * var(--d) * 2.6deg));
  z-index: calc(10 - var(--d));
  /* `--saindo` apaga o cartaz que está a caminho da outra ponta: sem isto, ele
     atravessaria o leque na frente de todos, e o giro perderia a ilusão de
     sequência. */
  opacity: calc((1 - var(--d) * .2) * (1 - var(--saindo)));
  filter: brightness(calc(1 - var(--d) * .14));
  transition: transform .55s cubic-bezier(.22, .75, .3, 1),
              opacity .45s ease, filter .45s ease, box-shadow .45s ease;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
.hero-cartaz img { width: 100%; height: auto; display: block; }

.hero-cartaz.ativo {
  z-index: 20; opacity: 1; filter: none;
  transform: translateX(0) scale(1.14) rotate(0deg);
  /* O glow: duas camadas, uma quente e uma fria, para a luz não parecer
     um contorno chapado. */
  box-shadow:
    0 0 0 1px rgba(242, 180, 65, .5),
    0 0 34px rgba(242, 180, 65, .34),
    0 0 90px rgba(90, 69, 214, .42),
    0 24px 60px rgba(0, 0, 0, .6);
}

.hero-cartaz-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem .7rem .6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  color: #fff; display: grid; gap: .15rem;
  opacity: 0; transition: opacity .3s ease;
}
.hero-cartaz.ativo .hero-cartaz-info { opacity: 1; }
.hero-cartaz-info b { font-size: .95rem; font-weight: 700; line-height: 1.2; }
.hero-cartaz-info em {
  font-style: normal; font-size: .84rem; font-weight: 800;
  color: var(--palco-lampada);
}

.hero-cartaz:focus-visible { outline: 2px solid var(--palco-lampada); outline-offset: 4px; }

/* O LEQUE ERA O QUE ESTOURAVA A HOME NO CELULAR.
   Os cartazes sao `position: absolute` e se afastam do centro por transform:
   `translateX(96px + d*36px)`, com `d` indo ate 3. Com cartaz de 178px, a borda
   do mais distante fica a 204+89 = 293px do centro — e a metade util de uma
   tela de 390px e 175px. Estourava 118px de CADA lado, e como nenhum pai
   recortava, a largura do DOCUMENTO crescia: a pagina inteira saia para o lado.
   Nao era o cabecalho, que ja fora corrigido antes.
   Duas medidas: o leque encolhe, e o heroi recorta o que ainda vazar — assim
   nenhuma mudanca futura no leque volta a empurrar a pagina. */
@media (max-width: 980px) {
  .hero-grade { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-cartazes { height: 340px; order: -1; }
  .hero-cartaz { width: 178px; }
  .home-hero { overflow: hidden; }
  .home-hero.com-cartaz { min-height: 0; }
  .home-hero.com-cartaz::after {
    background: linear-gradient(180deg, rgba(18,16,28,.55) 0%, rgba(18,16,28,.86) 46%, var(--palco) 92%);
  }
}
@media (max-width: 560px) {
  /* 150px de cartaz e afastamento de 34+17d: o mais distante fica a
     85+75 = 160px do centro, dentro dos 160px uteis de uma tela de 360px. */
  .hero-cartaz { width: 150px; }
  .hero-cartaz {
    transform:
      translateX(calc(var(--lado) * (34px + var(--d) * 17px)))
      scale(calc(1 - var(--d) * .1))
      rotate(calc(var(--lado) * var(--d) * 2.6deg));
  }
  .hero-cartaz.ativo { transform: translateX(0) scale(1.14) rotate(0deg); }
  .hero-cartazes { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cartaz, .hero-fundo img, .hero-cartaz-info { transition: none; }
}

/* Contador ao vivo: um pulso curto quando o número muda, para o olho perceber
   sem que a mudança seja intrusiva. */
.contador b { transition: color .3s ease, text-shadow .3s ease; }
.contador b.subiu {
  color: var(--palco-lampada);
  text-shadow: 0 0 22px rgba(242, 180, 65, .55);
}
@media (prefers-reduced-motion: reduce) {
  .contador b { transition: none; }
}

/* Página de resultados da busca. */
.estreito-largo { max-width: 1080px; }
.parede-pessoas .cartaz-pessoa { aspect-ratio: 1; border-radius: 50%; }
.parede-pessoas .cartaz-pessoa img { width: 100%; height: 100%; object-fit: cover; }
.parede-pessoas h2, .parede-pessoas .estreia { text-align: center; }

/* A busca na página de resultados fica sobre fundo claro, não sobre o palco:
   os tokens do herói (branco sobre escuro) sumiriam aqui. */
.busca-pagina { max-width: 100%; margin: 1.6rem 0 2rem; }
.busca-pagina .busca-campo {
  background: var(--fundo); border: 1px solid var(--borda-forte);
}
.busca-pagina .busca-campo:focus-within {
  border-color: var(--realce); background: var(--fundo);
  box-shadow: 0 0 0 3px rgba(90, 69, 214, .14);
}
.busca-pagina .busca-campo > svg { fill: var(--tinta-fraca); }
.busca-pagina .busca-campo input { color: var(--tinta); }
.busca-pagina .busca-campo input::placeholder { color: var(--tinta-fraca); }
.busca-pagina .busca-carga { border-color: var(--borda); border-top-color: var(--realce); }

/* =============================================================================
   DOAÇÃO
   ============================================================================= */

.menu-doar { color: var(--palco-lampada) !important; }
.menu-doar span { font-size: .9em; }
.menu-doar:hover { filter: brightness(1.2); }
.rodape-doar { margin-top: .4rem; }
.rodape-doar a { color: var(--palco-lampada); text-decoration: none; font-weight: 600; }
.rodape-doar a:hover { text-decoration: underline; }

.doar { padding-bottom: 3rem; }
.doar-topo { margin: 2.6rem 0 1.2rem; }
.doar-topo h1 {
  font-family: var(--fonte-titulo); font-variation-settings: 'wdth' 112;
  font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.06; letter-spacing: -0.025em; margin: 0;
}
.doar-texto { max-width: 60ch; margin-bottom: 2.4rem; }
.doar-texto p { line-height: 1.66; margin: 0 0 1rem; }
/* A primeira frase carrega o texto todo: merece corpo maior. */
.doar-abre { font-size: 1.22rem; line-height: 1.45; color: var(--tinta); font-weight: 500; }
.doar-assinatura { color: var(--tinta-fraca); font-size: .9rem; font-style: italic; margin-top: 1.4rem; }

.doar-caixa {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 14px;
  padding: 1.8rem; box-shadow: var(--sombra); max-width: 560px;
}
.doar-valores { border: 0; padding: 0; margin: 0 0 1.4rem; }
.doar-valores legend { font-weight: 700; font-size: .95rem; margin-bottom: .7rem; padding: 0; }

.degraus { display: flex; flex-wrap: wrap; gap: .55rem; }
.degrau { position: relative; cursor: pointer; }
.degrau input { position: absolute; opacity: 0; width: 0; height: 0; }
.degrau span {
  display: block; padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--borda-forte); font-weight: 700; font-size: .95rem;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.degrau input:checked + span {
  border-color: var(--realce); background: var(--realce); color: #fff;
}
.degrau input:focus-visible + span { outline: 2px solid var(--realce); outline-offset: 2px; }
.degrau-livre span { font-weight: 600; }

.campo-livre { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; }
.campo-livre > span { font-weight: 700; color: var(--tinta-fraca); }
.campo-livre input {
  width: 140px; padding: .6rem .8rem; font: inherit; font-weight: 700;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: 8px;
}

.doar-campo { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.doar-campo > span { font-weight: 600; font-size: .9rem; }
.doar-campo input {
  padding: .7rem .85rem; font: inherit; color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: 8px;
}
.doar-campo input:focus { outline: 2px solid var(--realce); outline-offset: 1px; border-color: var(--realce); }
.doar-campo small { color: var(--tinta-fraca); font-size: .8rem; }

.doar-erro { color: #B02A2A; font-size: .9rem; font-weight: 600; margin: 0 0 .8rem; }
.doar-botao { width: 100%; padding: .85rem; font-size: 1rem; }
.doar-seguro { font-size: .78rem; color: var(--tinta-fraca); margin: .8rem 0 0; text-align: center; }

/* ---- QR ---- */
.doar-qr { text-align: center; }
.doar-qr h2 { font-size: 1.5rem; margin: 0 0 .2rem; }
.doar-qr .sub { color: var(--tinta-fraca); margin: 0 0 1.2rem; }
.doar-valor-grande {
  font-size: 2.4rem; font-weight: 800; color: var(--realce);
  margin: 0 0 1.2rem; font-variant-numeric: tabular-nums;
}
.doar-qr h3 { font-size: .95rem; font-weight: 600; color: var(--tinta-fraca); margin: 0 0 1rem; }
.qr-moldura {
  display: inline-block; padding: 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--borda); margin-bottom: 1.4rem;
}
.qr-moldura img, .qr-moldura canvas { display: block; }
.doar-codigo { margin: 1rem 0; text-align: left; }
.doar-codigo summary { cursor: pointer; font-size: .86rem; color: var(--tinta-fraca); }
.doar-codigo code {
  display: block; margin-top: .6rem; padding: .7rem; border-radius: 8px;
  background: var(--fundo-2); font-size: .72rem; line-height: 1.5;
  word-break: break-all; color: var(--tinta-fraca);
}

/* ---- doacao em duas colunas ---- */
/* O texto persuade e a caixa recebe; lado a lado, o proximo passo fica visivel
   durante a leitura em vez de esperar la embaixo. */
.doar-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 3rem;
  align-items: start;
}
/* `min-width: 0` nao e detalhe: o codigo "copia e cola" do PIX e uma string sem
   espacos de ~200 caracteres, e sem isto ela empurra a coluna e arrebenta a
   grade inteira. Mesma armadilha da pagina de pessoa. */
.doar-grade > * { min-width: 0; }

/* Sem `max-width` aqui: a propria coluna ja e a medida (~66ch em 1080px).
   Manter 54ch abriria um vao morto entre o texto e a caixa. */
.doar-grade .doar-texto { max-width: none; margin-bottom: 0; }
.doar-acao { display: grid; gap: 1rem; }
.doar-acao .doar-caixa { margin: 0; }
.doar-acao:focus { outline: none; }

/* O botao que troca o convite pelo formulario. */
.doar-chamada { margin: 1.8rem 0 0; }
.doar-chamada .botao { width: 100%; padding: .95rem 1.4rem; font-size: 1rem; }

/* Depois do clique so resta o formulario: uma coluna, estreita e CENTRADA —
   titulo junto. A classe fica no <main> porque o titulo vive fora da grade, e
   antes so a grade centralizava: o formulario ia para o meio e o titulo ficava
   para tras, a esquerda. Era esse desencontro que se via na tela. */
.doar-centrado .doar-topo { text-align: center; }
.doar-centrado .doar-grade { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* ---- doacao: obrigatorios, marca do processador ---- */
.doar-campo .obrig { color: var(--realce); font-weight: 700; margin-left: .1rem; }
.doar-obrig-nota { margin: .2rem 0 0; font-size: .78rem; color: var(--tinta-fraca); }
.doar-obrig-nota b { color: var(--realce); }
.doar-ja-logado { margin: 0 0 .2rem; }

/* A marca de quem cobra vai DENTRO do botao: e o instante em que a pessoa
   entrega o dado, e e ali que saber quem recebe vale alguma coisa. */
.doar-botao.com-selo { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.doar-selo { display: inline-flex; align-items: center; gap: .35rem; opacity: .85; }
.doar-selo small { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.doar-selo img { height: 13px; width: auto; display: block; }

/* Na tela do cartao a marca aparece grande e sobre fundo claro: e a versao
   azul, porque a branca sumiria. */
.doar-processador { display: flex; flex-direction: column; align-items: center;
  gap: .4rem; margin: 1.2rem 0 .2rem; }
.doar-processador small { font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-fraca); }
.doar-processador img { height: 20px; width: auto; display: block; }

@media (max-width: 900px) {
  .doar-grade { grid-template-columns: 1fr; gap: 2rem; }
  .doar-grade .doar-texto { max-width: 60ch; }
}

/* ---- doacao: frequencia e meio de pagamento (ASAAS) ---- */
/* Reaproveita o desenho do `.degrau`: sao a mesma decisao visual — uma escolha
   entre poucas opcoes — e inventar um segundo estilo faria a tela parecer dois
   formularios colados. */
.doar-escolha { border: 0; padding: 0; margin: 0 0 1.4rem; }
.doar-escolha legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .55rem; }
.pilulas { display: flex; flex-wrap: wrap; gap: .55rem; }
.pilula { position: relative; cursor: pointer; flex: 1 1 auto; }
.pilula input { position: absolute; opacity: 0; width: 0; height: 0; }
.pilula span {
  display: block; text-align: center; padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--borda-forte); font-weight: 700; font-size: .95rem;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.pilula input:checked + span { border-color: var(--realce); background: var(--realce); color: #fff; }
.pilula input:focus-visible + span { outline: 2px solid var(--realce); outline-offset: 2px; }

/* O aviso do PIX mensal. Amarelo seria alarme; isto e so uma informacao que a
   pessoa precisa ter antes de escolher. */
.doar-nota {
  margin: .8rem 0 0; padding: .7rem .85rem; border-radius: 8px;
  background: var(--fundo-2); border-left: 3px solid var(--realce);
  font-size: .84rem; line-height: 1.55; color: var(--tinta-fraca);
}

/* ---- espera pela confirmacao do webhook ---- */
.doar-espera {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1.2rem 0 .4rem; font-size: .88rem; color: var(--tinta-fraca);
}
.pisca {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--realce); animation: pisca-doar 1.4s ease-in-out infinite;
}
@keyframes pisca-doar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pisca { animation: none; opacity: .7; } }

/* ---- cartao: o passo que sai do site ---- */
.doar-cartao { text-align: center; }
.doar-cartao h2 { font-size: 1.4rem; margin: 0 0 .3rem; }
.doar-cartao .sub { color: var(--tinta-fraca); margin: 0 auto 1.2rem; max-width: 34rem; line-height: 1.6; }
.doar-cartao .doar-botao { display: block; text-align: center; text-decoration: none; }

/* O "ver todos" ao lado do título de seção. Estava sendo emitido pela home
   sem nenhuma regra — link solto, herdando o tamanho do <h2>. */
.titulo-secao .secao-todos {
  float: right; font-size: .8rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--realce); text-decoration: none;
  padding-top: .45rem;
}
.titulo-secao .secao-todos:hover { text-decoration: underline; }
@media (max-width: 560px) { .titulo-secao .secao-todos { float: none; display: block; padding-top: .3rem; } }

/* Idioma sem versão desta página: visível, mas não clicável. Levar à home
   quando a pessoa pediu "este texto em inglês" é pior que não oferecer. */
.idioma-ausente {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .55rem; border-radius: 999px;
  opacity: .32; cursor: not-allowed; user-select: none;
}

/* Tempo esgotado é um terceiro estado, nem acerto nem erro. Âmbar, e não
   vermelho: não decidir a tempo é falha diferente de não saber. */
.quiz-retorno.tempo { background: color-mix(in srgb, #d97706 15%, var(--fundo)); color: #7c2d12; }
.quiz-retorno.tempo .quiz-retorno-ico { background: #d97706; }
:root[data-tema="escuro"] .quiz-retorno.tempo,
:root:not([data-tema="claro"]) .quiz-retorno.tempo { color: #fdba74; }

.quiz-gabarito li.expirada { border-left-color: #d97706; }
.quiz-gabarito li.expirada .gab-marca { background: #d97706; }
.gab-tempo { color: #d97706; font-weight: 700; }

/* O relógio pisca no fim: dá o aviso antes de o tempo acabar. */
.quiz-relogio.urgente { color: #dc2626; animation: relogio-pisca 1s steps(2, end) infinite; }
@keyframes relogio-pisca { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .quiz-relogio.urgente { animation: none; } }

/* ═══════════ ranking ═══════════ */

.rank-vazio {
  text-align: center; padding: 3rem 1.5rem; border-radius: 16px;
  background: var(--fundo-2); border: 1px dashed var(--borda-forte);
}
.rank-vazio b { font-size: 2.6rem; display: block; margin-bottom: .6rem; opacity: .7; }
.rank-vazio p { color: var(--tinta-fraca); margin: 0 0 1.2rem; }
.rank-vazio .botao { text-decoration: none; }

/* ---- a sua posição, em destaque ---- */
/* Quem abre o ranking com 300 nomes procura UM nome: o próprio. Antes isso
   estava numa linha discreta no rodapé da lista, depois de 50 estranhos.
   Aqui é a primeira coisa que se lê. */
.rank-eu-cartao {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.4rem 0 1.8rem; padding: .95rem 1.4rem;
  border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(105deg, #4C2BC9, #7C3AED 55%, #9333EA);
  box-shadow: 0 10px 30px rgba(76,43,201,.32);
}
.rank-eu-cartao:hover { filter: brightness(1.08); }
.rank-eu-pos {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
}
.rank-eu-quem { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.rank-eu-rotulo {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
  opacity: .78; font-weight: 700;
}
.rank-eu-nome { font-size: 1.28rem; font-weight: 800; line-height: 1.15; }
.rank-eu-sub { font-size: .8rem; opacity: .78; }
.rank-eu-placar { text-align: right; flex: 0 0 auto; }
.rank-eu-placar b { display: block; font-size: 1.72rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.rank-eu-placar i {
  font-style: normal; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .12em; opacity: .78;
}

/* ---- o pódio ---- */
/* SEGUE O TEMA. A primeira versão punha um palco escuro no meio da página
   clara: em tema claro aquilo era um retângulo preto colado no branco, não um
   pódio. Aqui cada cor sai de `color-mix` com `--fundo` e com `--tinta`, então
   a mesma regra serve aos dois temas sem duplicar nada.
   `--cor` é a cor do lugar; cada `li` define a sua. */
.podio {
  position: relative; list-style: none; margin: 2.2rem 0 2.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 2vw, 1.4rem);
  align-items: end;
}

/* O chão. Uma linha só, com desvanecimento nas pontas: dá apoio aos degraus
   sem virar moldura. */
.podio::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--borda-forte) 12%, var(--borda-forte) 88%, transparent);
}

.podio-lugar {
  position: relative; display: grid; justify-items: center; gap: .1rem;
  --cor: #94A3B8;
}
.lugar-1 { --cor: #E3A81C; }
.lugar-2 { --cor: #9AA7B8; }
.lugar-3 { --cor: #C97B4A; }

/* A coroa: o único elemento em movimento constante. Três coisas se mexendo ao
   mesmo tempo viram agitação; uma vira foco. */
.podio-coroa {
  font-size: 1.9rem; line-height: 1; margin-bottom: .1rem;
  filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--cor) 55%, transparent));
  animation: coroa-flutua 2.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes coroa-flutua {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-8px) rotate(6deg); }
}
.lugar-2 .podio-coroa, .lugar-3 .podio-coroa { display: none; }

/* O retrato, com anel na cor do lugar e o troféu pendurado na borda. */
.podio-retrato { position: relative; line-height: 0; margin-bottom: .55rem; }
.podio-retrato img, .podio-retrato .avatar {
  border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo-2);
  border: 3px solid var(--cor);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor) 14%, transparent),
              0 8px 22px color-mix(in srgb, var(--cor) 26%, transparent);
}
.lugar-1 .podio-retrato img, .lugar-1 .podio-retrato .avatar { border-width: 4px; }

.podio-trofeu {
  position: absolute; right: -2px; bottom: -2px;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cor); border: 2px solid var(--fundo);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cor) 45%, transparent);
}
.podio-trofeu svg { width: 14px; height: 14px; fill: #fff; }
.lugar-2 .podio-trofeu, .lugar-3 .podio-trofeu { width: 23px; height: 23px; }
.lugar-2 .podio-trofeu svg, .lugar-3 .podio-trofeu svg { width: 12px; height: 12px; }

.podio-nome {
  font-weight: 700; font-size: .98rem; text-decoration: none; color: inherit;
  text-align: center; line-height: 1.2; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.podio-nome:hover { color: var(--realce); }
.lugar-1 .podio-nome { font-size: 1.06rem; }

.podio-pontos {
  font-size: 1.16rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--cor) 62%, var(--tinta));
  line-height: 1.2;
}
.lugar-1 .podio-pontos { font-size: 1.45rem; }
.podio-rotulo {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--tinta-fraca); margin-bottom: .7rem;
}

/* O DEGRAU. A altura é o que faz o pódio ser pódio — e o número mora dentro
   dele, gravado, em vez de flutuar numa etiqueta. */
.podio-degrau {
  width: 100%; border-radius: 12px 12px 0 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--cor) 24%, var(--fundo)),
              color-mix(in srgb, var(--cor) 46%, var(--fundo)));
  border: 1px solid color-mix(in srgb, var(--cor) 52%, var(--borda));
  border-bottom: 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
              0 -10px 26px -14px color-mix(in srgb, var(--cor) 70%, transparent);
}
.podio-degrau b {
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  color: color-mix(in srgb, var(--cor) 55%, var(--tinta));
  text-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}
.lugar-1 .podio-degrau { height: 118px; }
.lugar-2 .podio-degrau { height: 84px; }
.lugar-3 .podio-degrau { height: 62px; }
.lugar-1 .podio-degrau b { font-size: 2.5rem; }

/* No tema escuro o realce interno branco vira véu leitoso; ali o brilho de
   cima tem de ser discreto. */
:root[data-tema="escuro"] .podio-degrau,
:root:not([data-tema="claro"]) .podio-degrau {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
              0 -10px 26px -14px color-mix(in srgb, var(--cor) 60%, transparent);
}
:root[data-tema="escuro"] .podio-degrau b,
:root:not([data-tema="claro"]) .podio-degrau b { text-shadow: none; }

.lugar-1 { animation: podio-sobe .6s cubic-bezier(.2,1.25,.4,1) .26s both; }
.lugar-2 { animation: podio-sobe .6s cubic-bezier(.2,1.25,.4,1) 0s both; }
.lugar-3 { animation: podio-sobe .6s cubic-bezier(.2,1.25,.4,1) .13s both; }
@keyframes podio-sobe { from { opacity: 0; transform: translateY(24px); } }

.podio-lugar.sou-eu .podio-nome { color: var(--realce); }
.podio-lugar.sou-eu .podio-degrau { border-color: var(--realce); }

/* Vaga aberta: o degrau existe, esperando alguém. Tracejado e apagado para
   ler como convite, não como jogador de verdade. */
.podio-lugar.vago { --cor: var(--borda-forte); }
.podio-lugar.vago .podio-degrau { background: var(--fundo-2); border-style: dashed; }
.podio-lugar.vago .podio-degrau b { color: var(--tinta-fraca); }
.podio-lugar.vago .podio-pontos { color: var(--tinta-fraca); }
.podio-lugar.vago .podio-trofeu { display: none; }
.podio-vago {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.8rem; font-weight: 800; color: var(--tinta-fraca);
  border: 3px dashed var(--borda-forte); background: var(--fundo-2);
}
.podio-nome-vago { color: var(--tinta-fraca); font-weight: 600; }

/* ---- do 4º em diante ---- */
.rank-lista { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .45rem; }
.rank-lista li {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .9rem; border-radius: 11px;
  background: var(--fundo-2); border: 1px solid transparent;
  transition: border-color .13s ease;
}
.rank-lista li:hover { border-color: var(--borda); }
.rank-lista li.sou-eu {
  border-color: var(--realce);
  background: color-mix(in srgb, var(--realce) 10%, var(--fundo-2));
}
.rank-pos {
  flex: 0 0 auto; min-width: 2ch; text-align: right;
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta-fraca);
}
.rank-lista img, .rank-lista .avatar { border-radius: 50%; flex: 0 0 auto; }
.rank-nome { flex: 1; min-width: 0; font-weight: 600; text-decoration: none; color: inherit; }
.rank-nome:hover { color: var(--realce); }
.rank-numeros { display: flex; align-items: baseline; gap: .9rem; flex-shrink: 0; }
.rank-numeros b { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-numeros i { font-style: normal; font-size: .76rem; color: var(--tinta-fraca); }

/* O corte entre o topo da lista e a sua linha. Reticências verticais dizem
   "há mais gente entre um e outro" sem precisar de texto. */
.rank-corte {
  text-align: center; margin: .2rem 0; color: var(--tinta-fraca);
  font-size: 1.3rem; letter-spacing: .2em; line-height: 1;
}
.rank-eu { margin-bottom: 2rem; }
.rank-eu li { border-width: 2px; }

/* O seletor "Geral" usa a cor do tema, não um matiz. */
.genero-geral { color: var(--realce); background: color-mix(in srgb, var(--realce) 10%, var(--fundo)); border-color: color-mix(in srgb, var(--realce) 35%, var(--borda)); }
.genero.ativo { background: hsl(var(--matiz, 260) 62% 45%); border-color: hsl(var(--matiz, 260) 62% 45%); color: #fff; }
.genero-geral.ativo { background: var(--realce); border-color: var(--realce); color: #fff; }
a.genero { text-decoration: none; display: inline-block; }

@media (max-width: 620px) {
  .podio { gap: .3rem; }
  .podio-nome { font-size: .78rem; }
  .lugar-1 .podio-nome { font-size: .84rem; }
  .podio-pontos { font-size: .92rem; }
  .lugar-1 .podio-pontos { font-size: 1.08rem; }
  .podio-rotulo { font-size: .54rem; }
  .podio-coroa { font-size: 1.4rem; }
  .podio-retrato img, .podio-retrato .avatar, .podio-vago { width: 58px !important; height: 58px !important; }
  .podio-trofeu { width: 21px; height: 21px; }
  .podio-trofeu svg { width: 11px; height: 11px; }
  .lugar-1 .podio-degrau { height: 84px; }
  .lugar-2 .podio-degrau { height: 62px; }
  .lugar-3 .podio-degrau { height: 46px; }
  .podio-degrau b { font-size: 1.4rem; }
  .lugar-1 .podio-degrau b { font-size: 1.8rem; }
  .rank-numeros i:last-child { display: none; }
  .rank-eu-cartao { gap: .7rem; padding: .8rem .9rem; }
  .rank-eu-pos { width: 46px; height: 46px; font-size: 1.02rem; }
  .rank-eu-nome { font-size: 1.02rem; }
  .rank-eu-placar b { font-size: 1.3rem; }
}

/* Movimento é convite, não obrigação: quem pediu menos animação recebe a mesma
   página parada. */
@media (prefers-reduced-motion: reduce) {
  .podio-lugar, .podio-coroa { animation: none; }
}

/* ═══════════ quiz: o menu ═══════════ */

/* ---- o placar do jogador ---- */
/* Vem antes de tudo. A pontuação que a pessoa construiu jogando estava como
   legenda do subtítulo; aqui ela é o assunto. */
.jogador {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem;
  padding: 1.5rem 1.7rem; margin: 1.6rem 0 2rem; border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--realce) 12%, var(--fundo-2)),
    var(--fundo-2) 60%);
  border: 1px solid color-mix(in srgb, var(--realce) 28%, var(--borda));
}

.jogador-pontos { display: grid; gap: .05rem; }
.jogador-pontos b {
  font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; line-height: 1;
  color: var(--realce); font-variant-numeric: tabular-nums;
}
.jogador-pontos span {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-fraca); font-weight: 700;
}

.jogador-numeros { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; }
.jogador-numeros li { display: grid; gap: .05rem; }
.jogador-numeros b { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.jogador-numeros span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-fraca);
}
/* Sequência viva ganha cor e pulso — é o número que faz voltar amanhã. */
.jogador-numeros li.em-chamas b { color: #ea580c; }
.jogador-numeros li.em-chamas b::after { content: ' 🔥'; font-size: .9rem; }

.jogador-emblemas { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.jogador-emblemas li { display: grid; place-items: center; }
/* A medalha do perfil, em tamanho de lobby. */
.jogador-emblemas .medalha { width: 34px; height: 34px; border-radius: 10px; }
.jogador-emblemas .medalha svg { width: 18px; height: 18px; }

/* ---- os dois modos ---- */
.quiz-cartoes {
  display: grid; gap: 1rem; margin-bottom: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.quiz-cartao {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: grid; gap: .3rem; padding: 1.5rem 1.5rem 1.5rem 4.4rem;
  border-radius: 16px; border: 2px solid var(--borda); background: var(--fundo);
  font: inherit; color: var(--tinta);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.quiz-cartao:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgb(0 0 0 / .13); }
.quiz-cartao:focus-visible { outline: 3px solid var(--realce); outline-offset: 3px; }
.quiz-cartao b { font-size: 1.22rem; font-weight: 800; }
.cartao-sub { font-size: .88rem; color: var(--tinta-fraca); line-height: 1.45; }

.cartao-selo {
  position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
}

/* O quiz do dia vale UMA VEZ. Por jogar, pulsa; jogado, assenta. */
.cartao-dia.chama { border-color: #eab308; }
.cartao-dia.chama .cartao-selo {
  background: #eab308; color: #1a1408;
  animation: selo-pulsa 2.4s ease-in-out infinite;
}
@keyframes selo-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgb(234 179 8 / .55); }
  50%      { box-shadow: 0 0 0 12px rgb(234 179 8 / 0); }
}
.cartao-dia.feito { opacity: .72; }
.cartao-dia.feito .cartao-selo { background: #16a34a; }

.cartao-misto { border-color: color-mix(in srgb, var(--realce) 42%, var(--borda)); }
.cartao-frases { border-color: #F2B441; background: linear-gradient(135deg, rgba(242, 180, 65, .16), transparent 60%); }
.cartao-frases .cartao-selo { background: #F2B441; color: #1A1200; font-weight: 900; }
.cartao-misto .cartao-selo { background: var(--realce); }
.cartao-misto:hover { border-color: var(--realce); }

/* ---- gêneros com cor ---- */
/* O matiz sai do ID do gênero, não de uma tabela de cores: gênero novo da TMDb
   recebe a sua sem ninguém precisar cadastrar nada, e a mesma categoria tem
   sempre o mesmo tom nos três idiomas. */
.quiz-sub {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca); font-weight: 700; margin: 0 0 .9rem;
}
.quiz-generos { display: flex; flex-wrap: wrap; gap: .55rem; }
.genero {
  cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600;
  padding: .6rem 1.15rem; border-radius: 999px;
  color: hsl(var(--matiz) 62% 32%);
  background: hsl(var(--matiz) 70% 95%);
  border: 1.5px solid hsl(var(--matiz) 62% 82%);
  transition: transform .13s ease, background .13s ease, color .13s ease;
}
.genero:hover {
  transform: translateY(-2px);
  background: hsl(var(--matiz) 62% 45%);
  border-color: hsl(var(--matiz) 62% 45%);
  color: #fff;
}
.genero:focus-visible { outline: 2px solid hsl(var(--matiz) 62% 45%); outline-offset: 2px; }

/* No tema escuro o mesmo matiz precisa de luminância invertida, senão some. */
:root[data-tema="escuro"] .genero,
:root:not([data-tema="claro"]) .genero {
  color: hsl(var(--matiz) 70% 78%);
  background: hsl(var(--matiz) 45% 16%);
  border-color: hsl(var(--matiz) 45% 30%);
}
:root[data-tema="escuro"] .genero:hover,
:root:not([data-tema="claro"]) .genero:hover {
  background: hsl(var(--matiz) 60% 55%); color: #0b0d10; border-color: hsl(var(--matiz) 60% 55%);
}

@media (prefers-reduced-motion: reduce) {
  .cartao-dia.chama .cartao-selo { animation: none; }
  .quiz-cartao:hover, .genero:hover { transform: none; }
}

/* ═══════════ quiz: o resultado ═══════════ */

.quiz-resultado { max-width: 760px; margin-inline: auto; }

/* Anilha + placar lado a lado. A anilha dá a leitura num relance: 4 de 10 é
   uma fatia de círculo antes de ser um número. */
.fim-topo {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  justify-content: center; text-align: left;
  margin: 1.5rem 0 1.8rem;
}

.fim-anilha { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
.fim-anilha svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fim-anilha circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.fim-anilha-fundo { stroke: var(--borda); }
.fim-anilha-arco {
  stroke: var(--realce);
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1);
}
.fim-anilha-arco[data-faixa="perfeito"] { stroke: #eab308; }
.fim-anilha-arco[data-faixa="otimo"]    { stroke: #16a34a; }
.fim-anilha-arco[data-faixa="bom"]      { stroke: var(--realce); }
.fim-anilha-arco[data-faixa="fraco"]    { stroke: #dc2626; }

.fim-anilha-centro {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; gap: .1rem;
}
.fim-anilha-centro b { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.fim-anilha-centro small { font-size: .74rem; color: var(--tinta-fraca); }

.fim-marcador { flex: 1 1 260px; min-width: 0; }
.fim-veredito {
  margin: 0 0 .2rem; font-size: 1.5rem; font-weight: 800; line-height: 1.1;
}
.fim-veredito.perfeito { color: #eab308; }
.fim-veredito.otimo    { color: #16a34a; }
.fim-veredito.bom      { color: var(--realce); }
.fim-veredito.fraco    { color: var(--tinta-fraca); }

.quiz-resultado .quiz-pontuacao {
  margin: 0 0 .9rem; font-size: 3.2rem; font-weight: 800; line-height: 1;
  color: var(--realce); font-variant-numeric: tabular-nums;
}
.quiz-resultado .quiz-pontuacao small {
  font-size: .95rem; font-weight: 600; color: var(--tinta-fraca); margin-left: .3rem;
}

.fim-chips { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.fim-chips li { display: grid; gap: .1rem; }
.fim-chips b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fim-chips span {
  font-size: .7rem; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .06em;
}

.fim-subiu {
  margin: 0 0 1.2rem; padding: .7rem 1rem; border-radius: 10px; text-align: center;
  background: color-mix(in srgb, #16a34a 14%, var(--fundo));
  color: #15803d; font-weight: 700; font-size: .95rem;
  animation: fim-sobe .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes fim-sobe { from { opacity: 0; transform: translateY(8px); } }

/* Emblema conquistado é o momento de comemorar; merece brilho. */
.fim-emblemas {
  list-style: none; display: flex; flex-wrap: wrap; gap: .7rem;
  margin: 0 0 1.4rem; padding: 0; justify-content: center;
}
.fim-emblemas li {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: color-mix(in srgb, #eab308 16%, var(--fundo));
  border: 1px solid #eab308; font-size: .86rem; font-weight: 700;
  animation: fim-emblema .55s cubic-bezier(.2,1.6,.4,1) both;
}
.fim-emblemas b { font-size: 1.15rem; }
@keyframes fim-emblema { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }

.fim-acoes { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.4rem; }
.fim-acoes .botao { text-decoration: none; }

.fim-gabarito-titulo {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca); margin: 0 0 .9rem; font-weight: 700;
}

/* ---- gabarito ---- */
.quiz-gabarito { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: gab; }
.quiz-gabarito li {
  position: relative; display: flex; gap: .9rem; align-items: center;
  padding: .7rem 3rem .7rem .9rem; border-radius: 11px;
  border: 1px solid var(--borda); border-left-width: 4px;
  background: var(--fundo-2);
  animation: gab-entra .3s ease both;
}
@keyframes gab-entra { from { opacity: 0; transform: translateX(-6px); } }
.quiz-gabarito li.certa  { border-left-color: #16a34a; }
.quiz-gabarito li.errada { border-left-color: #dc2626; }

.gab-capa { width: 44px; height: 66px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
.gab-corpo { flex: 1; min-width: 0; display: grid; gap: .22rem; }
.gab-pergunta { font-size: .92rem; line-height: 1.34; font-weight: 600; }
.gab-resposta { font-size: .84rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.gab-resposta i { font-style: normal; }
.gab-certa  { color: #16a34a; font-weight: 700; }
.gab-errada { color: #dc2626; text-decoration: line-through; opacity: .8; }
.gab-seta   { color: var(--tinta-fraca); }

.gab-marca {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .82rem; font-weight: 800; color: #fff;
}
.quiz-gabarito li.certa  .gab-marca { background: #16a34a; }
.quiz-gabarito li.errada .gab-marca { background: #dc2626; }

@media (max-width: 560px) {
  .fim-topo { gap: 1.2rem; justify-content: flex-start; }
  .fim-anilha { width: 118px; height: 118px; }
  .quiz-resultado .quiz-pontuacao { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fim-anilha-arco { transition: none; }
  .fim-subiu, .fim-emblemas li, .quiz-gabarito li { animation: none; }
}

/* ═══════════ quiz: a partida ═══════════ */

/* A capa dá rosto à pergunta. O servidor só a envia quando ela não entrega a
   resposta — nunca em pergunta do tipo "que filme é este". */
.quiz-capa {
  margin: 0 0 1.2rem; display: flex; justify-content: center;
}
.quiz-capa img {
  width: 132px; height: auto; border-radius: 10px;
  box-shadow: 0 8px 26px rgb(0 0 0 / .22);
  animation: quiz-capa-entra .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes quiz-capa-entra {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
}

/* ---- opções ---- */
.quiz-opcoes { display: grid; gap: .7rem; }
.quiz-opcoes.com-rosto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.quiz-opcao {
  position: relative; display: flex; align-items: center; gap: .85rem;
  width: 100%; text-align: left; cursor: pointer;
  padding: .85rem 3rem .85rem 1rem;
  border: 2px solid var(--borda); border-radius: 12px;
  background: var(--fundo); color: var(--tinta);
  font: inherit; font-size: 1rem; font-weight: 500;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
  animation: quiz-opcao-entra .34s ease both;
}
@keyframes quiz-opcao-entra {
  from { opacity: 0; transform: translateY(8px); }
}
.quiz-opcao:hover:not(:disabled) {
  border-color: var(--realce); transform: translateY(-2px);
}
.quiz-opcao:focus-visible { outline: 3px solid var(--realce); outline-offset: 2px; }
.quiz-opcao:disabled { cursor: default; }

.quiz-opcao-rosto {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; background: var(--fundo-2);
}
.quiz-opcao-rosto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quiz-opcao-texto { flex: 1; min-width: 0; line-height: 1.3; }

/* ---- o veredito ---- */
/* ANTES ERA SÓ UM FUNDO PÁLIDO. Verde e vermelho a 6% de opacidade, sem
   símbolo nenhum, e a mensagem numa linha de texto miúda embaixo. Quem jogou
   rápido não sabia se tinha acertado. Agora: borda grossa, marca circular na
   ponta, e a errada balança. */
.quiz-opcao-marca {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%) scale(.4);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 800; color: #fff;
  opacity: 0; transition: opacity .2s ease, transform .28s cubic-bezier(.2,1.5,.4,1);
}

.quiz-opcao.certa {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, var(--fundo));
}
.quiz-opcao.certa .quiz-opcao-marca {
  background: #16a34a; opacity: 1; transform: translateY(-50%) scale(1);
}
.quiz-opcao.certa .quiz-opcao-marca::after { content: '✓'; }

.quiz-opcao.errada {
  border-color: #dc2626;
  background: color-mix(in srgb, #dc2626 12%, var(--fundo));
  animation: quiz-treme .42s;
}
.quiz-opcao.errada .quiz-opcao-marca {
  background: #dc2626; opacity: 1; transform: translateY(-50%) scale(1);
}
.quiz-opcao.errada .quiz-opcao-marca::after { content: '✕'; }

@keyframes quiz-treme {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* As não escolhidas recuam, para o olho ir direto ao que importa. */
.quiz-opcao.apagada { opacity: .38; }

/* ---- a faixa de retorno ---- */
.quiz-retorno {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.3rem 0 0; padding: 1rem 1.2rem; border-radius: 12px;
  font-size: 1.1rem; font-weight: 700;
  animation: quiz-retorno-entra .3s ease both;
}
@keyframes quiz-retorno-entra { from { opacity: 0; transform: translateY(-6px); } }

.quiz-retorno-ico {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.3rem; color: #fff;
}
.quiz-retorno-txt { flex: 1; }
.quiz-retorno-pts {
  font-style: normal; font-size: 1.25rem; font-weight: 800;
  animation: quiz-pts .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes quiz-pts { from { opacity: 0; transform: translateY(10px) scale(.7); } }

.quiz-retorno.ok  { background: color-mix(in srgb, #16a34a 14%, var(--fundo)); color: #14532d; }
.quiz-retorno.nao { background: color-mix(in srgb, #dc2626 14%, var(--fundo)); color: #7f1d1d; }
.quiz-retorno.ok  .quiz-retorno-ico { background: #16a34a; }
.quiz-retorno.nao .quiz-retorno-ico { background: #dc2626; }
.quiz-retorno.ok  .quiz-retorno-pts { color: #16a34a; }

:root[data-tema="escuro"] .quiz-retorno.ok,
:root:not([data-tema="claro"]) .quiz-retorno.ok { color: #86efac; }
:root[data-tema="escuro"] .quiz-retorno.nao,
:root:not([data-tema="claro"]) .quiz-retorno.nao { color: #fca5a5; }

/* O placar pulsa quando sobe: sem isso o número muda e ninguém vê. */
.quiz-placar.subiu { animation: quiz-placar-sobe .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes quiz-placar-sobe {
  40% { transform: scale(1.35); color: #16a34a; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-opcao, .quiz-capa img, .quiz-retorno, .quiz-retorno-pts { animation: none; }
  .quiz-opcao.errada { animation: none; }
  .quiz-placar.subiu { animation: none; }
}

/* ---- a experiencia do app, trazida ao site (15/09/2026) ---- */
/* Sequencia da partida: pill dourada, spring a cada acerto. */
.quiz-seq {
  padding: .2rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 800;
  background: #F2B441; color: #111; white-space: nowrap;
}
.quiz-seq.pulsa { animation: quiz-seq-pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes quiz-seq-pop { 40% { transform: scale(1.25); } }

/* Mudo: um botao discreto; riscado quando mudo. */
.quiz-mudo {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--borda);
  background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.quiz-mudo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quiz-mudo .som-off { display: none; }
.quiz-mudo[aria-pressed="true"] .som-on { display: none; }
.quiz-mudo[aria-pressed="true"] .som-off { display: block; }

/* A barra do relogio: dourada, vermelha nos ultimos 20%. */
.quiz-barra i { background: #F2B441; }
.quiz-barra i.urgente { background: #E04457; }

/* A certa pulsa em verde: e a unica coisa que precisa ser lida de longe. */
.quiz-opcao.certa { animation: quiz-certa-glow 1.1s ease-in-out 2; }
@keyframes quiz-certa-glow { 50% { box-shadow: 0 0 0 4px rgba(22,163,74,.35), 0 0 22px rgba(22,163,74,.5); } }

/* O "+N": painel no centro, conta, e voa ate o placar. */
.qfx-pontos {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 60; text-align: center; pointer-events: none;
  background: rgba(11,10,18,.92); color: #fff; padding: 1.1rem 1.8rem; border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  animation: qfx-pontos-entra .35s cubic-bezier(.2,1.6,.4,1) both;
}
.qfx-pontos b { display: block; font-size: 4.4rem; line-height: 1; font-weight: 900; color: #F2B441;
  text-shadow: 0 0 18px rgba(242,180,65,.55); font-variant-numeric: tabular-nums; }
.qfx-pontos span { display: block; font-size: 1rem; font-weight: 600; margin-top: .3rem; }
.qfx-pontos small { display: block; font-size: .78rem; opacity: .7; }
.qfx-pontos.voa { animation: qfx-pontos-voa .5s cubic-bezier(.4,0,.8,.4) forwards; }
@keyframes qfx-pontos-entra { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
@keyframes qfx-pontos-voa {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15); opacity: 0; }
}

/* Particulas douradas do botao certo. */
.qfx-particula {
  position: fixed; width: 8px; height: 8px; border-radius: 50%; background: #F2B441;
  pointer-events: none; z-index: 59; box-shadow: 0 0 8px rgba(242,180,65,.8);
  animation: qfx-particula .8s cubic-bezier(.1,.8,.3,1) forwards;
}
@keyframes qfx-particula { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* Cartoes de progresso do resultado. */
.fim-cartoes {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  animation: fim-cartoes-entra .5s ease both; animation-delay: .5s;
}
@keyframes fim-cartoes-entra { from { opacity: 0; transform: translateY(12px); } }
.fim-cartoes li {
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 12px; padding: .8rem .95rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.fim-cartoes li b { font-size: 1.5rem; line-height: 1.1; }
.fim-cartoes li span { font-size: .8rem; opacity: .75; }
.fim-cartoes li em { font-style: normal; font-weight: 800; color: #16a34a; font-size: .85rem; }
.fim-cartoes .fc-nivel { grid-column: 1 / -1; }
.fc-barra { height: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; margin: .35rem 0 .2rem; }
.fc-barra i { display: block; height: 100%; width: 0; background: #F2B441; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.fc-nivel small { font-size: .78rem; opacity: .8; }
.fc-nivel em { color: #F2B441; animation: quiz-seq-pop .6s cubic-bezier(.2,1.6,.4,1); }

@media (prefers-reduced-motion: reduce) {
  .quiz-seq.pulsa, .quiz-opcao.certa, .fim-cartoes, .fc-nivel em { animation: none; }
  .fc-barra i { transition: none; }
}

/* ---- streaming: os logos e a pagina de cada servico (15/09/2026) ---- */
.str-grade { list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.str-grade a {
  display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center;
  padding: 1.2rem .8rem; border-radius: 14px; border: 1px solid var(--borda); background: var(--fundo-2);
  text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease;
}
.str-grade a:hover, .str-grade a:focus-visible { border-color: var(--marca, var(--realce)); transform: translateY(-2px); }
.str-grade b { font-size: .95rem; }
.str-grade small { font-size: .75rem; opacity: .7; }
.str-grade.compacta { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.str-grade.compacta a { padding: .8rem .5rem; gap: .35rem; }
.str-grade.compacta b { font-size: .8rem; }
.str-logo { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: var(--sombra); }
.str-logo img { width: 100%; height: 100%; object-fit: cover; }
.str-logo.grande { width: 120px; height: 120px; border-radius: 28px; flex: 0 0 auto; }
.str-grade.compacta .str-logo { width: 52px; height: 52px; border-radius: 13px; }

.str-topo { display: flex; gap: 1.6rem; align-items: flex-start; padding: 2.4rem 0 1.4rem;
  border-bottom: 3px solid var(--marca, var(--realce)); margin-bottom: 1.2rem; }
.str-topo h1 { margin: .1rem 0 .5rem; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.str-trilha { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.str-trilha a { color: inherit; text-decoration: none; }
.str-sobre { max-width: var(--medida); color: var(--tinta-fraca); margin: 0 0 .7rem; }
.str-numeros { margin: 0 0 1rem; font-size: .95rem; }
.str-numeros b { font-size: 1.15rem; }
.str-numeros small { display: block; opacity: .6; font-size: .75rem; margin-top: .2rem; }
.str-site { text-decoration: none; }
@media (max-width: 640px) { .str-topo { flex-direction: column; align-items: center; text-align: center; } .str-sobre { margin-inline: auto; } }

.str-busca { margin: 1.4rem 0 .6rem; }
.str-campo { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo-2); max-width: 640px; }
.str-campo svg { width: 20px; height: 20px; fill: currentColor; opacity: .6; flex: 0 0 auto; }
.str-campo input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1rem; outline: none; min-width: 0; }
.str-resultado { margin-top: 1.2rem; }
.str-grade-obras { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.str-grade-obras a { text-decoration: none; color: inherit; display: block; }
.str-grade-obras h3 { font-size: .85rem; font-weight: 600; line-height: 1.2; margin: .45rem 0 .1rem; }
.str-grade-obras .estreia { margin: 0; font-size: .78rem; opacity: .7; }
.str-vazio { opacity: .7; padding: 1rem 0; }

/* A faixa da home: so logos, em linha rolavel. */
.str-faixa { list-style: none; margin: 0; padding: .2rem 0 .6rem; display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity; }
.str-faixa li { flex: 0 0 auto; scroll-snap-align: start; }
.str-faixa a { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 96px; text-decoration: none; color: inherit; font-size: .75rem; text-align: center; }
.str-faixa .str-logo { width: 64px; height: 64px; border-radius: 16px; }

/* ---- destaques: listagem ---- */
.destaques-lista {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.destaque-cartao a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; background: var(--fundo-2);
  transition: border-color .16s ease, transform .16s ease;
}
.destaque-cartao a:hover { border-color: var(--realce); transform: translateY(-2px); }
.destaque-capa-mini { aspect-ratio: 16 / 9; background: var(--fundo); overflow: hidden; }
.destaque-capa-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destaque-corpo-mini { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .45rem; }
/* h2 E h3: o bloco "Leia tambem" usa h3, que ficava sem regra nenhuma —
   herdava a margem do navegador e colava no subtitulo logo abaixo. */
.destaque-corpo-mini h2,
.destaque-corpo-mini h3 { font-size: 1.1rem; line-height: 1.3; margin: 0; font-weight: 650; }
.destaque-corpo-mini p { margin: 0; font-size: .87rem; line-height: 1.5; color: var(--tinta-fraca); }
.destaque-data { font-size: .74rem; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .05em; }

/* ---- destaques: página do artigo ---- */
/* A capa mora DENTRO da coluna de texto, acima do título, e aparece inteira.
   Sangrando de ponta a ponta ela tinha de ser cortada para caber numa faixa, e
   o corte comia o assunto do quadro. `contain` garante a imagem toda mesmo
   quando o backdrop não é exatamente 16:9. Sem véu e sem texto por cima. */
.destaque-capa {
  margin: 0 0 1.7rem; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--borda);
  background: var(--fundo-2);
}
.destaque-capa img {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: contain; display: block;
}

/* RESPIRO NO TOPO. Enquanto a capa sangrava de ponta a ponta, era ela que
   separava o conteúdo do cabeçalho fixo. Trazida para dentro da coluna, o
   artigo passou a encostar na barra preta. */
main.destaque { padding-top: 2rem; }

/* A faixa de publicidade do topo: retangular e deitada, no formato de banner
   horizontal. A do painel lateral é vertical; esta é a que ocupa a largura do
   texto. Altura reservada desde já, pelo mesmo motivo das outras. */
.anuncio-faixa {
  min-height: 96px; margin: 0 0 1.7rem;
  display: grid; place-items: center;
  border: 1px dashed var(--borda-forte); border-radius: 12px;
  background: var(--fundo-2);
}
.anuncio-faixa span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-fraca); opacity: .6;
}

/* Duas colunas, texto e painel. O painel é o que dá ao destaque a cara de blog
   — e é onde moram os caminhos para o resto do site. */
.destaque-grade, .grade-painel {
  display: grid; gap: 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
}
.destaque-grade > *, .grade-painel > * { min-width: 0; }

.destaque-topo { margin: 0 0 2rem; }
.destaque-topo h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); line-height: 1.1; margin: 0 0 .6rem; }
.destaque-sub { font-size: 1.14rem; line-height: 1.5; color: var(--tinta-fraca); margin: 0 0 .8rem; }
.destaque-meta { font-size: .78rem; color: var(--tinta-fraca); margin: 0; text-transform: uppercase; letter-spacing: .05em; }

/* Assinatura do colunista. Só aparece na crônica: o destaque numérico não tem
   autor, e a regra não pode reservar espaço para quem não vem. */
.destaque-assina { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin: 0 0 .35rem; }
.destaque-assina b { font-size: .95rem; font-weight: 650; color: var(--tinta); }
.destaque-assina span { font-size: .8rem; color: var(--tinta-fraca); font-style: italic; }
.destaque-assina span::before { content: "— "; }

.destaque-corpo { margin-bottom: 2.6rem; }
.destaque-corpo h2 { font-size: 1.42rem; line-height: 1.25; margin: 2.2rem 0 .8rem; }
.destaque-corpo h3 { font-size: 1.16rem; margin: 1.8rem 0 .6rem; }
.destaque-corpo p { line-height: 1.72; margin: 0 0 1.1rem; font-size: 1.04rem; }
.destaque-corpo strong { font-weight: 700; color: var(--tinta); }

.destaque-fonte {
  margin: 2rem 0 1rem; padding: .9rem 1rem; border-radius: 10px;
  background: var(--fundo-2); border-left: 3px solid var(--realce);
  font-size: .82rem; line-height: 1.55; color: var(--tinta-fraca);
}

/* Filme ou pessoa citada no corpo do destaque leva à página dela. Sublinhado
   discreto: o texto tem muitos títulos, e link azul em cada um viraria ruído. */
.destaque-corpo .ref-interna {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--realce) 45%, transparent);
  transition: color .14s ease, border-color .14s ease;
}
.destaque-corpo .ref-interna:hover { color: var(--realce); border-bottom-color: var(--realce); }
.destaque-corpo .ref-interna strong { font-weight: 700; }

/* O MESMO LINK NO "EM RESUMO". Sem esta regra ele herdaria o azul padrão e o
   bloco de fatos — que é uma caixa densa de seis linhas — viraria um bloco de
   links, que é o oposto do que ele serve para ser. */
.destaque-fatos .ref-interna {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--realce) 45%, transparent);
  transition: color .14s ease, border-color .14s ease;
}
.destaque-fatos .ref-interna:hover { color: var(--realce); border-bottom-color: var(--realce); }

/* ---- prévia do filme ao passar o mouse ---- */
/* Um cartão flutuante, não um modal: modal interrompe a leitura e exige ser
   fechado. Aqui o cartão aparece ao lado da palavra e some sozinho. O link
   abre em nova aba, então a leitura do texto nunca se perde. */
.previa-filme {
  position: absolute; z-index: 80; width: 250px;
  display: flex; gap: .7rem; padding: .55rem;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: var(--sombra);
  opacity: 0; transform: translateY(5px);
  transition: opacity .13s ease, transform .13s ease;
}
.previa-filme.aberta { opacity: 1; transform: none; }
.previa-filme img {
  width: 90px; height: 135px; flex: 0 0 auto;
  object-fit: cover; border-radius: 8px; background: var(--fundo-2);
}
/* Pessoa: a foto e quadrada. Enfiada na proporcao 2:3 do cartaz, o rosto
   estica — e o cartao existe justamente para dar o rosto. */
.previa-filme.previa-pessoa img { width: 84px; height: 84px; border-radius: 50%; }
.previa-filme.previa-pessoa { width: 236px; align-items: center; }

.previa-info { display: grid; align-content: center; gap: .3rem; min-width: 0; }
.previa-info b { font-size: .93rem; line-height: 1.25; }
.previa-info span { font-size: .8rem; color: var(--tinta-fraca); }

@media (prefers-reduced-motion: reduce) {
  .previa-filme { transition: none; transform: none; }
}

/* Em resumo: os fatos da ficha, antes do texto. Cada linha se sustenta
   sozinha — e por isso pode ser lida (e citada) fora de contexto. */
.destaque-fatos { margin: 1.4rem 0; padding: .9rem 1.1rem;
  border: 1px solid var(--borda); border-left: 3px solid var(--realce);
  border-radius: 0 10px 10px 0; background: var(--fundo-2); }
.destaque-fatos h2 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-fraca); }
.destaque-fatos ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .28rem; }
.destaque-fatos li { font-size: .92rem; line-height: 1.45; }

.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem;
  margin: .9rem 0 0; font-size: .82rem; }
.rodape-links a { color: var(--tinta-fraca); text-decoration: none; }
.rodape-links a:hover { color: var(--tinta); text-decoration: underline; }

.institucional .bloco { max-width: 68ch; }
.institucional .bloco p { line-height: 1.65; }
.fontes-lista { margin: .5rem 0 .8rem; padding-left: 1.1rem; }
.fontes-lista li { margin: .2rem 0; }

/* ---- índices de gênero e ano ---- */
/* Grade densa de propósito: quem chega aqui quer escolher e sair, não ler. */
.indice-atalhos { list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.indice-atalhos a { display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo); text-decoration: none; transition: border-color .12s ease; }
.indice-atalhos a:hover { border-color: var(--realce); }
.indice-atalhos b { font-size: .95rem; font-weight: 600; color: var(--tinta); }
.indice-atalhos small { font-size: .74rem; color: var(--tinta-fraca); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .indice-atalhos a { transition: none; } }

/* ---- filtros dos índices ---- */
/* Uma barra de controles com peso próprio: são sete campos, e enfileirados em
   larguras diferentes eles pareciam sobra de formulário. Grade de colunas
   iguais, 48px de altura e um só desenho de seta em todos — o `appearance:
   none` existe justamente para que Chrome, Safari e Firefox parem de desenhar
   três setas diferentes na mesma linha. */
.filtros { display: grid; gap: .8rem .9rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 1.5rem 0 .3rem; padding: 1.2rem 1.3rem;
  border: 1px solid var(--borda); border-radius: 16px;
  background: var(--fundo-2); box-shadow: var(--sombra); }
.filtros label { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.filtros label > span { font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tinta-fraca); }

/* A seta é do invólucro, não do `select`: `currentColor` dentro de um data-URI
   de SVG não acompanha a troca de tema, e um triângulo recortado acompanha. */
.filtros .campo { position: relative; display: block; }
.filtros .campo::after { content: ''; position: absolute; right: 1rem; top: 50%;
  width: 11px; height: 7px; margin-top: -3px; pointer-events: none;
  background: var(--tinta-fraca); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: background-color .14s ease; }
.filtros .campo:hover::after { background: var(--realce); }

.filtros select { appearance: none; -webkit-appearance: none; width: 100%;
  min-height: 48px; padding: .8rem 2.6rem .8rem 1rem;
  font: inherit; font-size: .93rem; font-weight: 500; line-height: 1.2;
  color: var(--tinta); background: var(--fundo); cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 18, 35, .05);
  transition: border-color .14s ease, box-shadow .14s ease; }
.filtros select:hover { border-color: var(--realce); }
.filtros select:focus-visible { outline: none; border-color: var(--realce);
  box-shadow: 0 0 0 3px rgba(90, 69, 214, .22); }
/* Campo com escolha feita fica visivelmente diferente dos que estão em
   "Qualquer": sem isso não dá para ver, de relance, o que está filtrando. */
.filtros select.marcado { border-color: var(--realce); font-weight: 600; }

:root[data-tema="escuro"] .filtros select { box-shadow: none; }
:root[data-tema="escuro"] .filtros select:focus-visible { box-shadow: 0 0 0 3px rgba(162, 146, 240, .28); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .filtros select { box-shadow: none; }
  :root:not([data-tema="claro"]) .filtros select:focus-visible { box-shadow: 0 0 0 3px rgba(162, 146, 240, .28); }
}

/* Nome próprio: `.acoes` já existe neste arquivo, com `margin-bottom: 1.5rem`
   de outra tela — herdar essa margem era o que descolava o botão da linha. */
.filtros .filtros-acoes { display: flex; align-items: center; gap: .9rem; align-self: end; }
/* `.botao` é `inline-block` com padding: sem virar flex, o rótulo encosta no
   topo assim que a altura mínima passa a mandar. */
.filtros .filtros-acoes .botao { display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.6rem; border-radius: 12px; }
.filtros-limpar { font-size: .84rem; color: var(--tinta-fraca); white-space: nowrap; }
.filtros-limpar:hover { color: var(--realce); }
.filtros-aviso { margin: .6rem 0 0; font-size: .79rem; color: var(--tinta-fraca); }
.filtros-vazio { margin: 2.4rem 0; padding: 2rem; border: 1px dashed var(--borda-forte);
  border-radius: 14px; text-align: center; color: var(--tinta-fraca); }

@media (max-width: 560px) {
  .filtros { grid-template-columns: 1fr 1fr; padding: 1rem; }
  .filtros .filtros-acoes { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .filtros select, .filtros .campo::after { transition: none; }
}

.reenviar-linha { margin: 0 0 1.2rem; }

.rec-motivo { display: block; margin: .2rem 0 0; font-size: .74rem; line-height: 1.3;
  color: var(--realce); }

/* ---- onde assistir: só os logos, sob a capa (20/09/2026) ---- */
.onde-capa { margin-top: .9rem; }
.onde-capa b { display: block; font-size: .82rem; font-weight: 600; color: var(--palco-fraca); margin-bottom: .45rem; }
.onde-capa-logos { display: flex; flex-wrap: wrap; gap: .45rem; }
.onde-capa-logos img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--palco-borda); display: block; }
.onde-capa-logos a { display: block; border-radius: 10px; transition: transform .12s ease; }
.onde-capa-logos a:hover, .onde-capa-logos a:focus-visible { transform: translateY(-2px); outline: none; }
.onde-capa-logos a:hover img, .onde-capa-logos a:focus-visible img { border-color: var(--realce); }

/* ---- onde assistir ---- */
/* Uma linha por provedor: logo, nome, e o que ele oferece. A versão anterior
   repetia os mesmos três logos em duas colunas ("Aluguel" e "Compra"), e o
   leitor tinha de cruzar as listas para descobrir que era o mesmo lugar. */
.onde-lista { list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.onde-lista li { display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--fundo-2); }
.onde-lista img { width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--borda); flex: 0 0 auto; }
/* Nome em cima, etiquetas embaixo. Lado a lado, um nome longo como
   "Google Play Movies" era espremido em três linhas pelas etiquetas. */
.onde-info { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.onde-nome { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.onde-tipos { display: flex; flex-wrap: wrap; gap: .28rem; }
/* As etiquetas dizem o preço, não o nome do lugar: por isso são discretas.
   Em caixa alta e peso 700 competiam com o provedor e a linha virava ruído. */
.onde-tag { padding: .08rem .4rem; border-radius: 5px; font-size: .68rem;
  font-weight: 500; line-height: 1.5; letter-spacing: .01em; }
/* A assinatura tem cor própria: é a resposta que a maioria procura, e ela
   precisa saltar sem que o leitor leia as três etiquetas. */
.onde-assinatura { background: var(--realce); color: #fff; font-weight: 600; }
.onde-aluguel, .onde-compra { border: 1px solid var(--borda); color: var(--tinta-fraca); }
/* Gratis so aparece em serie: `series_providers` tem esse tipo, `title_providers` nao. */
.onde-gratis { border: 1px solid var(--realce); color: var(--realce); font-weight: 600; }

/* ---- menu principal: desktop com submenu, celular com gaveta ---- */
/* O submenu abre no hover E no focus-within. Só o hover deixaria de fora quem
   navega por teclado — e o item ficaria inalcançável, não apenas incômodo. */
.menu-topo .tem-sub { position: relative; }
.menu-topo .submenu { position: absolute; top: 100%; left: -.6rem; z-index: 60;
  min-width: 200px; margin: 0; padding: .45rem; list-style: none;
  background: var(--palco); border: 1px solid var(--palco-borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s; }
.menu-topo .tem-sub:hover > .submenu,
.menu-topo .tem-sub:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
.menu-topo .submenu-dir { left: auto; right: -.6rem; }
.menu-topo .submenu a { display: block; padding: .5rem .7rem; border-radius: 8px;
  font-size: .9rem; white-space: nowrap; color: var(--palco-fraca); }
.menu-topo .submenu a:hover { background: rgba(255,255,255,.07); color: var(--palco-tinta); }

/* O que ainda não tem conteúdo fica visivelmente mais apagado: a pessoa vê o
   plano do site sem esperar uma página pronta do outro lado. */
.menu-topo .e-breve, .menu-movel .e-breve, .rodape-links .e-breve { opacity: .62; }

.hamburguer { display: none; flex-direction: column; gap: 4px; padding: .55rem;
  background: none; border: 0; cursor: pointer; }
.hamburguer span { display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--palco-tinta); }

.menu-movel { position: fixed; inset: 0; z-index: 90; padding: 4.5rem 1.4rem 2rem;
  overflow-y: auto; background: var(--palco); color: var(--palco-tinta); }
.menu-movel ul { list-style: none; margin: 0; padding: 0; }
.menu-movel > ul > li { border-bottom: 1px solid var(--palco-borda); }
.menu-movel a, .menu-movel b { display: block; padding: .85rem .2rem;
  font-size: 1.05rem; font-weight: 600; color: var(--palco-tinta); text-decoration: none; }
.menu-movel ul ul { padding: 0 0 .7rem .9rem; }
.menu-movel ul ul a { padding: .45rem .2rem; font-size: .93rem; font-weight: 400;
  color: var(--palco-fraca); }
.menu-movel-fechar { position: absolute; top: 1rem; right: 1.2rem; padding: .2rem .5rem;
  background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer;
  color: var(--palco-fraca); }
.menu-movel-conta b { color: var(--palco-lampada); }

.rodape-fontes { margin: .8rem 0 0; font-size: .76rem; color: var(--tinta-fraca); }
.breve-enquanto { margin: 1.8rem 0 0; font-size: .9rem; color: var(--tinta-fraca); }

/* O corte: abaixo disto o menu inteiro vira gaveta. 980px porque são nove
   itens de topo mais o seletor de idioma — abaixo disso eles quebram em duas
   linhas e o cabeçalho dobra de altura. */
@media (max-width: 980px) {
  /* O MENU VIRA GAVETA, MAS O AVATAR FICA.
     Ele nao vai para a gaveta junto com o resto: quem esta logado precisa ver
     que ESTA logado sem abrir menu nenhum. Entao a lista continua na barra e
     some item por item — menos a conta. Assim nao ha uma segunda copia do
     avatar em outro lugar do HTML para divergir depois.
     `order: 4` o joga para depois do seletor de idioma e do botao de tema,
     que e onde o dono pediu: ao lado da escolha de tema. */
  .menu-topo { display: flex; order: 4; margin-right: 0; gap: 0; }
  .menu-topo > li { display: none; }
  .menu-topo > .menu-conta { display: flex; margin-left: 0; }
  .menu-topo > .xp-topo-item { display: flex; margin-right: .3rem; }   /* o XP fica visível no celular (18/09/2026) */
  .menu-topo .submenu { left: auto; right: -.6rem; }
  .btn-avatar .avatar { width: 30px; height: 30px; }
  .hamburguer { display: flex; }
}

/* O CABEÇALHO TINHA DE CABER, E NÃO CABIA.
   Medido numa tela de 390px, onde `.env` deixa 350px úteis: logo 169 + 16 de
   vão + hamburguer 40 + 19 + três bandeiras 107 + 19 + tema 34 = 404px. A
   barra empurrava a largura do documento e a PÁGINA INTEIRA saía para o lado —
   era esse o "quebrando no celular", e não um bloco específico.
   O seletor de idioma já devolveu ~30px. O resto vem daqui: a logo de 54px
   pesa 169px de largura sozinha, mais que qualquer outra peça. */
@media (max-width: 560px) {
  .topo { gap: .7rem; }
  .topo nav { gap: .65rem; }
  .marca img { height: 38px; }
  .idioma-atual { padding: .3rem .45rem; gap: .3rem; }
  .hamburguer { padding: .45rem .3rem; }
}
/* Telas de 320px ainda estouravam por 9px. A logo continua sendo a peça mais
   cara da barra, então é ela que cede de novo. */
@media (max-width: 380px) {
  .marca img { height: 32px; }
  .idioma-atual .sigla { display: none; }
}
@media (min-width: 981px) {
  .menu-movel { display: none !important; }
}

/* ---- críticas em modal ---- */
.criticas-chamada { margin: 1.4rem 0 0; }
#palco-criticas { width: min(720px, 92vw); max-height: 86vh; padding: 0;
  border: 1px solid var(--borda); border-radius: 16px; background: var(--fundo);
  color: var(--tinta); overflow: hidden; }
#palco-criticas::backdrop { background: rgba(8, 6, 16, .72); }
#palco-criticas .criticas-corpo { padding: 1.6rem 1.7rem 1.8rem; overflow-y: auto; max-height: 86vh; }
#palco-criticas h2 { margin: 0 0 1.1rem; font-size: 1.2rem; }
#palco-criticas .fechar { position: absolute; top: .6rem; right: .8rem; z-index: 2;
  background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: var(--tinta-fraca); }
#palco-criticas .fechar:hover { color: var(--tinta); }

/* ---- fatos cruzados na página de filme ---- */
/* Lista curta e com peso: são no máximo quatro, e cada uma é uma afirmação
   que nenhum outro site pode fazer. Tratadas como grade de cartões pequenos
   em vez de marcadores, para não parecerem sobra da sinopse. */
/* TOKENS DO PALCO, NÃO DO TEMA. Este bloco vive dentro do herói do filme, que
   é escuro nos dois temas por causa do backdrop — o aviso está no topo deste
   arquivo. Usar `--fundo-2` deixou cartão quase branco com texto claro por
   cima no tema claro: ilegível. O painel é translúcido e escuro para funcionar
   sobre qualquer backdrop, do mais claro ao mais escuro. */
.fatos { list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.fatos li { padding: .7rem .9rem; font-size: .92rem; line-height: 1.4;
  color: var(--palco-tinta); background: rgba(14, 12, 22, .72);
  border-left: 3px solid var(--palco-lampada); border-radius: 0 9px 9px 0; }
.fatos-nota { margin: .7rem 0 0; font-size: .75rem; color: var(--palco-fraca); }

/* ---- faixa de gêneros na home ---- */
/* Formato de "stories": círculos numa tira que rola. O cartaz é cortado em
   círculo a partir de 22% do topo, e não do centro — o cartaz de cinema põe a
   arte em cima e o texto embaixo, então o corte centrado pega letra. */
/* SOMBRAS DAS PONTAS. Sem elas o círculo da borda direita ficava cortado a
   faca no meio da arte, parecendo defeito de renderização em vez de "tem mais
   coisa para o lado". Aparecem só do lado em que há tira escondida — quem
   decide é o `data-esq`/`data-dir` que o JS carimba na rolagem. */
.stories-caixa { position: relative; }
.stories-caixa::before, .stories-caixa::after { content: ''; position: absolute;
  top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .3s ease; }
.stories-caixa::before { left: 0;
  background: linear-gradient(to right, var(--fundo) 12%, transparent); }
.stories-caixa::after { right: 0;
  background: linear-gradient(to left, var(--fundo) 12%, transparent); }
.stories-caixa[data-esq]::before, .stories-caixa[data-dir]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .stories-caixa::before, .stories-caixa::after { transition: none; }
}

.stories { list-style: none; display: flex; gap: 1rem; margin: 1.1rem 0 0;
  padding: .35rem .2rem 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.stories::-webkit-scrollbar { display: none; }
.stories li { flex: 0 0 auto; scroll-snap-align: start; }

/* Arrastar com o mouse: a mão aberta avisa que a tira se puxa. O `snap` sai de
   cena durante o arrasto — encaixar cartão enquanto a pessoa puxa faz a tira
   parecer que resiste à mão. */
.stories { cursor: grab; }
.stories.arrastando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto;
  user-select: none; }
/* SÓ APAGA A AMPLIAÇÃO — nada aqui pode mexer em quem recebe o ponteiro.
   `pointer-events: none` era o que estava aqui, e derrubava toda navegação:
   com o link fora do teste de acerto, `mousedown` e `mouseup` caíam em
   elementos diferentes e o `click` ia parar no `ul`, não no link. Quem impede
   a navegação depois do arrasto é o guarda de 4px no JS, e só ele. */
.stories.arrastando .stories-anel { transform: none; }
.stories img { -webkit-user-drag: none; user-select: none; }
.stories a { display: grid; justify-items: center; gap: .45rem; width: 104px;
  text-decoration: none; }
.stories-anel { display: block; padding: 3px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--realce), var(--lampada), var(--realce));
  transition: transform .16s ease; }
.stories-anel img { display: block; width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; object-position: center 22%;
  border: 3px solid var(--fundo); background: var(--fundo-2); }
.stories a:hover .stories-anel,
.stories a:focus-visible .stories-anel { transform: scale(1.06); }
.stories-nome { font-size: .84rem; font-weight: 600; line-height: 1.15;
  color: var(--tinta); text-align: center; }
.stories-n { font-size: .7rem; color: var(--tinta-fraca); }

@media (prefers-reduced-motion: reduce) { .stories-anel { transition: none; } }

/* ---- colunistas ---- */
.colunistas-lista { list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.colunistas-lista a { display: grid; gap: .2rem; padding: .9rem 1rem;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo);
  text-decoration: none; position: relative; }
.colunistas-lista a:hover { border-color: var(--realce); }
.colunistas-lista b { font-size: 1rem; color: var(--tinta); }
.colunistas-lista span { font-size: .82rem; color: var(--tinta-fraca); }
.colunistas-lista small { position: absolute; top: .9rem; right: 1rem;
  font-size: .75rem; color: var(--tinta-fraca); }

.colunista-tag { font-size: .95rem; color: var(--tinta-fraca); margin: .2rem 0 0; }
.colunista-bio { margin: 1rem 0 0; max-width: 62ch; }
.colunista-tese { margin: .8rem 0 0; padding: .8rem 1rem; max-width: 62ch;
  border-left: 3px solid var(--realce); background: var(--fundo-2);
  border-radius: 0 8px 8px 0; font-size: 1.02rem; }
.colunista-obsessoes { margin: .6rem 0 0; padding-left: 1.1rem; max-width: 62ch; }
.colunista-obsessoes li { margin: .25rem 0; color: var(--tinta-fraca); }
.colunista-metodo p { max-width: 68ch; }

/* Selo de IA. Aparece na assinatura do artigo e no topo do colunista — nos
   dois lugares antes do texto, nunca num rodape que ninguem rola ate o fim. */
.selo-ia { display: inline-block; margin: .5rem 0 0; padding: .18rem .55rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--realce); background: color-mix(in srgb, var(--realce) 12%, var(--fundo));
  border: 1px solid color-mix(in srgb, var(--realce) 35%, var(--fundo));
  border-radius: 999px; text-decoration: none; }
a.selo-ia:hover { background: color-mix(in srgb, var(--realce) 22%, var(--fundo)); }

/* ---- painel lateral ---- */
/* `sticky` para o painel acompanhar a leitura de um texto longo, mas só onde
   há altura sobrando — em tela baixa ele prenderia o conteúdo. */
.destaque-painel, .painel-lateral { display: grid; gap: 1.4rem; }
@media (min-width: 1000px) and (min-height: 700px) {
  .destaque-painel, .painel-lateral { position: sticky; top: 5rem; }
}

.painel-bloco {
  border: 1px solid var(--borda); border-radius: 12px;
  padding: 1.1rem 1.15rem; background: var(--fundo-2);
}
.painel-bloco h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca); margin: 0 0 .9rem; font-weight: 700;
}
.painel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.painel-lista a {
  display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit;
}
.painel-lista img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.painel-lista span { font-size: .86rem; line-height: 1.35; font-weight: 600; }
.painel-lista a:hover span { color: var(--realce); }

/* Vaga de anúncio com altura reservada. Bloco que nasce sem tamanho e cresce
   quando o anúncio carrega empurra a página inteira — é o jeito mais rápido de
   destruir o Core Web Vitals. */
.painel-anuncios { display: grid; gap: 1rem; background: transparent; border: 0; padding: 0; }
.anuncio-vaga {
  min-height: 250px; display: grid; place-items: center;
  border: 1px dashed var(--borda-forte); border-radius: 12px;
  background: var(--fundo-2);
}
.anuncio-vaga span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-fraca); opacity: .6;
}

.painel-cta h2 { color: var(--realce); }
.painel-cta p { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.55; color: var(--tinta-fraca); }
.painel-cta .botao { width: 100%; text-align: center; text-decoration: none; display: block; }
.painel-cta-doar { border-color: var(--realce); }

@media (max-width: 999px) {
  .destaque-grade, .grade-painel { grid-template-columns: 1fr; gap: 2.4rem; }
  .anuncio-vaga { min-height: 160px; }
}

/* ---- destaques na home: palco + lista ---- */
/* O padrão de portal: um item grande com a manchete sobre a imagem e três
   compactos ao lado. A rotação troca qual está no palco — cada um aparece
   grande uma vez por ciclo. */
.vitrine {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: stretch;
}

.vitrine-palco { position: relative; border-radius: 14px; overflow: hidden; background: var(--fundo-2); }

.vitrine-grande { display: block; position: relative; text-decoration: none; color: #fff; height: 100%; }
.vitrine-grande img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* O degradê só na parte de baixo, e forte o bastante para a manchete ser
   legível sobre backdrop claro — que é o caso difícil. */
.vitrine-texto {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem 1.5rem 1.3rem;
  background: linear-gradient(to top, rgb(0 0 0 / .88), rgb(0 0 0 / .55) 45%, transparent);
}
.vitrine-texto h3 {
  margin: 0; font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.26;
  color: #fff; font-weight: 700; text-shadow: 0 1px 12px rgb(0 0 0 / .5);
}
.vitrine-texto p {
  margin: .4rem 0 0; font-size: .86rem; line-height: 1.4;
  color: rgb(255 255 255 / .82); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* A lista ocupa a mesma altura do palco e distribui os três — é isso que
   elimina o vão que sobrava entre os cartões antigos. */
.vitrine-lista {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: .2rem;
}
.vitrine-lista li:not(.vitrine-barra) { border-bottom: 1px solid var(--borda); }
.vitrine-lista li:not(.vitrine-barra):last-of-type { border-bottom: 0; }

/* Com quatro itens o respiro precisa encolher, senão a lista passa da altura
   do palco. Miniatura um pouco menor pelo mesmo motivo. */
.vitrine-lista a {
  display: flex; gap: .75rem; align-items: center;
  padding: .45rem .2rem; text-decoration: none; color: inherit;
}
.vitrine-mini {
  flex-shrink: 0; width: 104px; height: 69px; border-radius: 8px;
  overflow: hidden; background: var(--fundo-2); display: block;
}
.vitrine-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-mini-texto { display: grid; gap: .2rem; min-width: 0; }
.vitrine-mini-titulo {
  font-size: .9rem; line-height: 1.32; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* O resumo no lugar da data. Corte por CSS, em duas linhas: cortar por
   contagem de caracteres parte palavra no meio, e a largura da coluna muda
   com a tela. */
.vitrine-mini-resumo {
  font-size: .78rem; line-height: 1.4; color: var(--tinta-fraca);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vitrine-lista a:hover .vitrine-mini-titulo { color: var(--realce); }

/* Barra de progresso: sem ela a troca automática parece defeito. Com ela, a
   pessoa entende que vai mudar e quanto falta. */
.vitrine-barra { height: 2px; background: var(--borda); border-radius: 2px; overflow: hidden; }
.vitrine-barra span {
  display: block; height: 100%; width: 0; background: var(--realce);
  transition: width .2s linear;
}
.vitrine[data-parado] .vitrine-barra span { background: var(--borda-forte); }

@media (max-width: 860px) {
  .vitrine { grid-template-columns: 1fr; gap: 1rem; }
  .vitrine-lista { gap: .1rem; }
  .vitrine-mini { width: 92px; height: 62px; }
  .vitrine-texto { padding: 1.8rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vitrine-barra { display: none; }
}

/* ---- "Aparece nestes destaques" na página do filme ---- */
.destaques-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.destaques-mini a {
  display: grid; gap: .2rem; text-decoration: none; color: inherit;
  padding: .8rem .95rem; border-radius: 10px;
  background: var(--fundo-2); border-left: 3px solid var(--realce);
  transition: transform .14s ease;
}
.destaques-mini a:hover { transform: translateX(2px); }
.destaques-mini b { font-size: .96rem; line-height: 1.35; font-weight: 600; }
.destaques-mini small { font-size: .8rem; color: var(--tinta-fraca); line-height: 1.45; }

/* ---- "Nas notícias" na página do filme ---- */
.noticias-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.noticias-mini a {
  display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit;
  padding: .5rem; border-radius: 10px; border: 1px solid transparent;
  transition: border-color .14s ease, background .14s ease;
}
.noticias-mini a:hover { border-color: var(--borda); background: var(--fundo-2); }
.noticias-mini img { width: 96px; height: 64px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.noticias-mini span { display: grid; gap: .2rem; min-width: 0; }
.noticias-mini b { font-size: .92rem; line-height: 1.35; font-weight: 600; }
.noticias-mini small { font-size: .76rem; color: var(--realce); font-weight: 700; }

/* ---- noticias: lista ---- */
.noticias-lista {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.noticia-cartao a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden;
  background: var(--fundo-2);
  transition: border-color .16s ease, transform .16s ease;
}
.noticia-cartao a:hover { border-color: var(--realce); transform: translateY(-2px); }
.noticia-cartao a:focus-visible { outline: 2px solid var(--realce); outline-offset: 2px; }

/* Proporcao fixa na capa. A imagem vem do site do veiculo, em tamanho
   imprevisivel — sem a moldura, cada cartao teria uma altura e a grade
   pularia enquanto as fotos carregam. */
.noticia-capa { aspect-ratio: 16 / 9; background: var(--fundo); overflow: hidden; }
.noticia-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.noticia-capa.sem-capa {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fundo-2), var(--borda));
}
.capa-vazia {
  font-size: 2.6rem; font-weight: 800; color: var(--tinta-fraca);
  opacity: .45; text-transform: uppercase; line-height: 1;
}

.noticia-corpo { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.noticia-meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  margin: 0; font-size: .76rem; color: var(--tinta-fraca);
}
.noticia-meta b { color: var(--realce); font-weight: 700; }
.noticia-cartao h2 { font-size: 1.02rem; line-height: 1.32; margin: 0; }
.noticia-resumo {
  margin: 0; font-size: .86rem; line-height: 1.5; color: var(--tinta-fraca);
}

/* ---- noticias: pagina interna ---- */
.noticia-volta { margin: 1.6rem 0 1rem; }
.noticia-topo { margin-bottom: 1.4rem; }
.noticia-topo h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.18; margin: .5rem 0 0; }
.noticia-arte {
  margin: 0 0 1.8rem; border-radius: 14px; overflow: hidden;
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.noticia-arte img { display: block; width: 100%; height: auto; }

.noticia-bloco { margin-bottom: 1.6rem; }
.noticia-bloco h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca); margin: 0 0 .5rem; font-weight: 700;
}
.noticia-descricao { margin: 0; font-size: 1.06rem; line-height: 1.62; }
.noticia-trecho {
  margin: 0; line-height: 1.66; color: var(--tinta-fraca);
  padding-left: 1rem; border-left: 3px solid var(--borda-forte);
}
.noticia-ir { display: block; text-align: center; text-decoration: none; padding: .85rem; }
.noticia-aviso {
  margin: .9rem 0 2rem; font-size: .78rem; line-height: 1.5;
  color: var(--tinta-fraca); text-align: center;
}

/* ---- barra de consentimento (LGPD) ---- */
/* Barra inteira embaixo, e nao um cartao no canto: consentimento nao e um
   convite que da para ignorar de canto de olho. z-index acima do banner de
   doacao (80), que de todo modo espera esta decisao antes de aparecer. */
.consento {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 1.6rem; padding: 1rem 1.4rem;
  background: var(--fundo-2); border-top: 1px solid var(--borda-forte);
  box-shadow: 0 -6px 24px rgb(0 0 0 / .10);
}
.consento p {
  margin: 0; max-width: 62ch; font-size: .88rem; line-height: 1.55; color: var(--tinta-fraca);
}
.consento p a { color: var(--realce); text-decoration: underline; }
.consento-botoes { display: flex; gap: .6rem; flex-shrink: 0; }
.consento-botoes .botao { padding: .55rem 1.3rem; font-size: .9rem; }

@media (max-width: 640px) {
  .consento { flex-direction: column; align-items: stretch; text-align: left; }
  .consento-botoes { justify-content: stretch; }
  .consento-botoes .botao { flex: 1; }
}

/* ---- arte da pagina de doacao ---- */
/* As duas imagens sao JPEG-like sem canal alfa: o fundo e branco SOLIDO. Sem
   moldura clara, no tema escuro elas viram um retangulo branco no meio da
   pagina. Emoldurar faz o branco parecer decisao, nao defeito. */
.doar-arte, .obrigado-arte {
  margin: 2rem 0 0; padding: 0; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--borda);
}
.doar-arte img, .obrigado-arte img { display: block; width: 100%; height: auto; }

/* ---- pagina de agradecimento ---- */
.obrigado { text-align: center; padding-bottom: 3.5rem; }
.obrigado-arte { margin: 2.6rem auto 1.8rem; max-width: 520px; }
.obrigado h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.12; margin: 0 0 .6rem; }
.obrigado-valor {
  font-size: 2.2rem; font-weight: 800; color: var(--realce);
  margin: .4rem 0 .3rem; font-variant-numeric: tabular-nums;
}
.obrigado-sub { color: var(--tinta-fraca); margin: 0 0 1.6rem; font-size: 1.02rem; }
.obrigado-texto { max-width: 46ch; margin: 0 auto 1.4rem; line-height: 1.66; }
.obrigado-email { font-size: .86rem; color: var(--tinta-fraca); margin: 0 0 2rem; }
.obrigado-acoes { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ---- banner flutuante ---- */
.banner-doar {
  position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 80;
  display: flex; align-items: center; gap: .9rem;
  max-width: 380px; padding: .9rem 1rem;
  background: var(--palco); color: var(--palco-tinta);
  border: 1px solid var(--palco-borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.banner-doar.entrou { opacity: 1; transform: translateY(0); }
.banner-doar p { margin: 0; font-size: .88rem; line-height: 1.35; }
.banner-doar-btn {
  flex: 0 0 auto; background: var(--palco-lampada); color: #17130A;
  padding: .45rem .9rem; border-radius: 999px;
  font-weight: 800; font-size: .85rem; text-decoration: none;
}
.banner-doar-btn:hover { filter: brightness(1.08); }
.banner-doar-fechar {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--palco-fraca); font-size: 1.4rem; line-height: 1; padding: 0 .2rem;
}
.banner-doar-fechar:hover { color: var(--palco-tinta); }

@media (max-width: 560px) {
  .banner-doar { left: .8rem; right: .8rem; bottom: .8rem; max-width: none; }
  .doar-caixa { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-doar { transition: none; }
}

/* Atribuicao da TMDb na pagina Sobre. O logo vem antes da frase e fica menor
   que a marca do site, como os termos pedem. */
.creditos-tmdb { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.creditos-tmdb img { width: 180px; height: auto; flex-shrink: 0; }

/* Detalhe das fontes na pagina Sobre: o que vem de cada uma. */
.fontes-detalhe { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.fontes-detalhe li { font-size: .88rem; color: var(--tinta-fraca); line-height: 1.5; }

/* Icone do genero no cartao do indice. Decorativo: some do leitor de tela pelo
   aria-hidden, e o cartao sem icone nao deixa buraco porque o elemento nem e
   impresso.

   O cartao e `space-between` com dois itens (nome e contagem). Um TERCEIRO item
   faria o nome flutuar no meio do cartao — por isso o `margin-right: auto` no
   <b>: ele empurra so a contagem para a direita e mantem icone e nome juntos.
   Sem icone o auto nao muda nada, que e por isso que pode ficar sempre ligado. */
.indice-atalhos .atalho-ico {
  font-size: 1.05rem; line-height: 1; flex-shrink: 0; filter: saturate(.85);
}
.indice-atalhos b { margin-right: auto; }

/* ---------- diretores ---------- */
/* A carreira em numeros. Cada cartao traz o valor, o rotulo e — o que importa —
   DE QUANTOS FILMES aquele numero saiu: so 13% dos titulos tem bilheteria, e
   media sem denominador visivel e estatistica que engana. */
.dir-balanco {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.dir-balanco li {
  border: 1px solid var(--borda); border-radius: 12px;
  padding: .9rem 1rem; background: var(--fundo-2);
  display: grid; gap: .15rem;
}
.dir-balanco b { font-size: 1.35rem; line-height: 1.1; color: var(--tinta); }
.dir-balanco span { font-size: .82rem; color: var(--tinta-fraca); }
.dir-balanco i { font-size: .7rem; color: var(--tinta-fraca); opacity: .75; font-style: normal; }

/* A tabela rola dentro do proprio quadro: numero em coluna nao pode obrigar a
   pagina inteira a rolar de lado no celular. */
.dir-tabela-rolagem { overflow-x: auto; margin: 0 0 2rem; }
.dir-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dir-tabela th, .dir-tabela td { padding: .55rem .7rem; text-align: right; white-space: nowrap; }
.dir-tabela thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); border-bottom: 1px solid var(--borda-forte);
}
.dir-tabela tbody th { text-align: left; font-weight: 600; }
.dir-tabela tbody th a { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.dir-tabela tbody th a:hover span { color: var(--realce); }
.dir-tabela tbody th img { border-radius: 3px; flex-shrink: 0; }
.dir-tabela tbody th span { white-space: normal; }
.dir-tabela tbody tr { border-bottom: 1px solid var(--borda); }
.dir-tabela tbody tr:hover { background: var(--fundo-2); }

/* Linha de contagens no topo do diretor.
   NAO reusa `.linha-meta`: aquela pinta com `--palco-fraca`, token da paleta
   ESCURA FIXA, que so tem contraste dentro da `.capa`. Aqui o fundo e o do
   tema, entao a cor tem de vir dos tokens do tema. */
.dir-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  margin: 0 0 1.4rem; font-size: .9rem; color: var(--tinta-fraca);
}
.dir-meta span + span::before { content: '·'; margin-right: .9rem; opacity: .5; }
.dir-acao { margin: 1rem 0 0; }
.dir-acao .botao { width: 100%; text-align: center; display: block; text-decoration: none; }

/* Etiquetas de genero e de ator recorrente na ficha do diretor. O numero vem
   dentro da propria etiqueta: "Drama 18" se le de uma vez, e uma coluna so
   para a contagem desperdicaria a largura. */
.dir-etiquetas { list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.dir-etiquetas a, .dir-etiquetas span {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .4rem .75rem; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--fundo-2); font-size: .85rem; text-decoration: none; color: var(--tinta);
}
.dir-etiquetas a:hover { border-color: var(--realce); color: var(--realce); }
.dir-etiquetas b { font-size: .75rem; color: var(--tinta-fraca); font-weight: 600; }

/* Premios: ano a esquerda, nome a direita. Indicacao fica mais apagada que
   vitoria — a lista mistura as duas e a diferenca tem de se ver sem ler. */
.dir-premios { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .45rem; }
.dir-premios li { display: flex; align-items: baseline; gap: .7rem; font-size: .9rem; line-height: 1.4; }
.dir-premio-ano {
  flex: 0 0 3.2rem; font-variant-numeric: tabular-nums;
  font-size: .8rem; color: var(--tinta-fraca);
}
.dir-premios li.indicado .dir-premio-nome { color: var(--tinta-fraca); }
.dir-premios i {
  font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-fraca); border: 1px solid var(--borda); border-radius: 4px; padding: 0 .3rem;
}
.dir-periodo { margin: 0 0 1.4rem; font-size: .92rem; color: var(--tinta-fraca); }

/* ---------- premios ---------- */
/* A ESTATUETA NAO E RETRATO. `.pessoa-foto` forca 2/3 com `object-fit: cover`,
   o que decapitaria um Oscar. Aqui a altura e livre e o ajuste e `contain`. */
.premio-imagem {
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-2);
  padding: 1.2rem; display: grid; place-items: center;
}
.premio-imagem img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }

.premios-grade {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.premios-grade a {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  padding: 1.2rem 1rem; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo); text-decoration: none; color: inherit;
  transition: border-color .12s ease;
}
.premios-grade a:hover { border-color: var(--realce); }
.premio-selo { height: 96px; display: grid; place-items: center; }
.premio-selo img { max-height: 96px; width: auto; object-fit: contain; }
.premio-selo span { font-size: 2.4rem; line-height: 1; opacity: .5; }
.premios-grade b { font-size: .95rem; font-weight: 600; line-height: 1.25; }
.premios-grade em { font-style: normal; font-size: .74rem; color: var(--tinta-fraca); line-height: 1.4; }

.premio-cat { margin: 0 0 1.8rem; }
.premio-cat h3 { margin: 0 0 .6rem; }
.premio-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.premio-lista li { display: flex; align-items: baseline; gap: .7rem; font-size: .9rem; }
.premio-ano {
  flex: 0 0 3.2rem; font-variant-numeric: tabular-nums;
  font-size: .8rem; color: var(--tinta-fraca);
}
.premio-lista li.indicado a, .premio-lista li.indicado > span:last-child { color: var(--tinta-fraca); }
.premio-lista i {
  font-style: normal; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-fraca); border: 1px solid var(--borda); border-radius: 4px; padding: 0 .3rem;
}

/* ---------- ficha de premio ---------- */
.premio-topo {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.8rem;
  align-items: center; padding: 2rem 0 1.4rem;
}
.premio-imagem {
  border: 1px solid var(--borda); border-radius: 16px; background: var(--fundo-2);
  padding: 1rem; display: grid; place-items: center; aspect-ratio: 1;
}
/* `contain` e nao `cover`: trofeu cortado deixa de ser trofeu. */
.premio-imagem img { width: 100%; height: 100%; object-fit: contain; }
.premio-texto h1 { margin: 0 0 .5rem; }
.premio-desc { margin: 0 0 .7rem; color: var(--tinta-fraca); line-height: 1.5; max-width: var(--medida); }
.premio-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; font-size: .88rem; color: var(--tinta-fraca); }
.premio-meta a { color: var(--realce); }

/* A TIRA DE ANOS e a navegacao principal da pagina, por isso vem antes do
   conteudo. Rola na horizontal como a das temporadas. */
.premio-anos {
  display: flex; gap: .4rem; overflow-x: auto; padding: 0 0 .8rem;
  margin: 0 0 1.6rem; border-bottom: 1px solid var(--borda);
  scrollbar-width: thin;
}
.premio-anos a {
  flex: 0 0 auto; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo);
  text-decoration: none; color: var(--tinta-fraca);
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
.premio-anos a:hover { border-color: var(--realce); color: var(--realce); }
/* O ANO ATIVO usa `--fundo` como cor do texto, e nao `--palco`.
   `--palco` e quase preto SEMPRE (#12101C), enquanto `--realce` e roxo escuro
   no tema claro (#5A45D6): preto sobre roxo escuro era ilegivel. `--fundo`
   inverte junto com o tema — branco sobre o roxo escuro, escuro sobre o roxo
   claro do modo noturno — e da contraste nos dois. */
.premio-anos a.ativo {
  background: var(--realce); border-color: var(--realce);
  color: var(--fundo); font-weight: 700;
}

.premio-edicao { font-size: 1.2rem; margin: 0 0 1.2rem; }

.premio-cats {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.premio-cats > li {
  border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo-2); padding: 1rem 1.1rem;
}
.premio-cats h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca); margin: 0 0 .6rem; font-weight: 700; }
.premio-vencedor { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600;
  display: flex; align-items: baseline; gap: .45rem; line-height: 1.35; }
.premio-vencedor a { text-decoration: none; color: var(--tinta); }
.premio-vencedor a:hover { color: var(--realce); }
.premio-trofeu { font-size: .85rem; flex-shrink: 0; }
.premio-indicados { margin: .5rem 0 0; font-size: .82rem; color: var(--tinta-fraca); line-height: 1.5; }
.premio-indicados b { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 .2rem; font-weight: 700; }
.premio-indicados a { color: inherit; }
.premio-indicados a:hover { color: var(--realce); }

@media (max-width: 640px) {
  .premio-topo { grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; }
}
.premio-porfilme { margin: .3rem 0 0; font-size: .82rem; color: var(--tinta-fraca); line-height: 1.5; }
.premio-porfilme b { display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 .15rem; font-weight: 700; }
.premio-porfilme a { color: inherit; }
.premio-porfilme a:hover { color: var(--realce); }

/* Abas entre filmografia de cinema e televisao.
   `.abas` ja existia para <a>; o botao entra na mesma regra. */
.abas button {
  font: inherit; cursor: pointer;
  padding: .42rem .85rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo);
  color: var(--tinta-fraca); text-decoration: none;
}
.abas button:hover { border-color: var(--realce); color: var(--realce); }
/* Texto `--fundo` e nao branco fixo: no tema escuro o realce e claro, e branco
   sobre claro nao se le. `--fundo` inverte junto com o tema. */
.abas button.ativo {
  background: var(--realce); border-color: var(--realce);
  color: var(--fundo); font-weight: 700;
}
.obras-abas-barra { margin: 1.6rem 0 1rem; }

/* O `scrollIntoView` da paginacao para o topo da lista debaixo do cabecalho
   fixo. `scroll-margin-top` e o desconto: 5.5rem cobre a barra com folga. */
[data-paginada] { scroll-margin-top: 5.5rem; }

/* ==========================================================================
   PALCO DE ENTRADA — entrar, cadastrar, recuperar senha
   ==========================================================================
   Sem cabecalho e sem rodape. A pessoa veio fazer UMA coisa, e cada link a
   mais e um convite a nao faze-la; e como os servicos de streaming montam a
   entrada, e por boa razao.

   A PALETA AQUI E FIXA E ESCURA, como a `.capa` das fichas. Nao segue o tema
   claro/escuro porque o fundo e uma FOTOGRAFIA: no tema claro, texto escuro
   sobre a imagem seria ilegivel em metade dos casos. Por isso usa `--palco-*`
   e cores literais, nao `--tinta`/`--fundo`. */
.palco-nu {
  min-height: 100vh;
  min-height: 100dvh;   /* dvh conta a barra do navegador no celular */
  margin: 0;
  display: grid;
  place-items: center;
  padding: 2rem 1.2rem;
  background: #0B0A12;
  color: #F1EEE8;
}

/* A imagem entra como camada propria, e nao como `background` do body, para
   receber o veu por cima sem escurecer tambem o formulario. */
.palco-fundo {
  position: fixed; inset: 0; z-index: 0;
  background-image: var(--bg-entrada);
  background-size: cover;
  background-position: center;
}
.palco-fundo::after {
  content: ''; position: absolute; inset: 0;
  /* Duas camadas: a vertical garante contraste no topo e no rodape; a radial
     abre o meio para a arte aparecer atras do cartao. */
  background:
    linear-gradient(to bottom, rgba(11,10,18,.82) 0%, rgba(11,10,18,.62) 45%, rgba(11,10,18,.92) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(11,10,18,.15) 0%, rgba(11,10,18,.75) 100%);
}

.palco-caixa {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  display: grid; gap: 1.4rem; justify-items: center;
}

.palco-marca img { width: 210px; height: auto; display: block; }

.palco-cartao {
  width: 100%;
  background: rgba(18, 16, 28, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 2rem 1.9rem 1.7rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.palco-cartao h1 { margin: 0 0 .35rem; font-size: 1.6rem; line-height: 1.15; color: #fff; }
.palco-cartao .sub { margin: 0 0 1.5rem; font-size: .92rem; color: rgba(241, 238, 232, .66); line-height: 1.5; }

/* O formulario nao herda `.form` do site: la os campos vivem sobre fundo
   claro, e aqui o fundo e escuro sempre. */
.palco-cartao label { display: grid; gap: .35rem; margin: 0 0 1rem; }
.palco-cartao label > span { font-size: .82rem; color: rgba(241, 238, 232, .72); }
.palco-cartao input[type="email"],
.palco-cartao input[type="password"],
.palco-cartao input[type="text"] {
  width: 100%; font: inherit; font-size: .98rem;
  padding: .8rem .9rem; border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.palco-cartao input::placeholder { color: rgba(241, 238, 232, .38); }
.palco-cartao input:focus-visible {
  outline: none;
  border-color: var(--realce);
  box-shadow: 0 0 0 3px rgba(162, 146, 240, .28);
}
.palco-cartao .botao {
  width: 100%; margin-top: .4rem; padding: .85rem 1rem;
  font-size: 1rem; font-weight: 700; text-align: center;
  /* O ouro da plataforma (dono, 16/09/2026), o mesmo do "Jogar quiz" do hero. */
  background: var(--palco-lampada); color: #17130A;
}
.palco-cartao .botao.secundario {
  background: rgba(255, 255, 255, .09); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}

.palco-rodape { margin: 1.3rem 0 0; font-size: .88rem; color: rgba(241, 238, 232, .6); text-align: center; }
.palco-rodape a { color: #fff; text-decoration: none; font-weight: 600; }
.palco-rodape a:hover { text-decoration: underline; }
.palco-rodape + .palco-rodape { margin-top: .5rem; }

/* Os avisos de erro e sucesso sobre fundo escuro. */
.palco-cartao .aviso { border-radius: 10px; padding: .7rem .85rem; font-size: .88rem; margin: 0 0 1.1rem; }
.palco-cartao .aviso.erro { background: rgba(220, 76, 76, .16); border: 1px solid rgba(220, 76, 76, .4); color: #FFD9D9; }
.palco-cartao .aviso.ok   { background: rgba(76, 175, 120, .16); border: 1px solid rgba(76, 175, 120, .4); color: #D8F5E4; }

/* A volta ao catalogo, discreta, fora do cartao. */
.palco-sair { position: relative; z-index: 1; margin: .2rem 0 0; font-size: .86rem; }
.palco-sair a { color: rgba(241, 238, 232, .6); text-decoration: none; }
.palco-sair a:hover { color: #fff; }

@media (max-width: 480px) {
  .palco-cartao { padding: 1.6rem 1.3rem 1.3rem; border-radius: 14px; }
  .palco-marca img { width: 170px; }
}
@media (prefers-reduced-transparency: reduce) {
  .palco-cartao { backdrop-filter: none; background: rgba(18, 16, 28, .95); }
}

/* ---------- membros ---------- */
.membros-grade {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.membros-grade a {
  display: grid; justify-items: center; gap: .45rem; text-align: center;
  padding: 1.2rem .8rem; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo); text-decoration: none; color: inherit;
  transition: border-color .12s ease;
}
.membros-grade a:hover { border-color: var(--realce); }
.membros-grade b { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.membros-grade em { font-style: normal; font-size: .74rem; color: var(--tinta-fraca); }

/* Duas colunas no celular. A regra de 3 tem de ser DESFEITA antes de a de 2
   valer, senao o terceiro item continuaria sem borda no meio da fileira. */
@media (max-width: 560px) {
  .contador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contador li:nth-child(3n+1) { border-left: 1px solid var(--palco-borda); padding-left: 1.1rem; }
  .contador li:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

/* ---------- CineQuiz TV + ultimos destaques ---------- */
/* A grade e a mesma `.vitrine` de antes (1.85fr / 1fr): a proporcao nao muda,
   so o que ocupa a coluna da esquerda. */
.tv-palco { display: grid; gap: .7rem; align-content: start; min-width: 0; }
.tv-titulo { margin: 0; }

/* PROPORCAO DE VIDEO JA AGORA, com o player ainda por vir. Um bloco que nasce
   sem altura e cresce quando o conteudo chega empurra a pagina inteira — e e o
   jeito mais rapido de derrubar o Core Web Vitals. Reservando 16/9 desde o
   inicio, o player entra e nada ao redor se mexe. */
.tv-tela {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #0B0A12;
  border: 1px solid var(--borda);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
/* O iframe cobre a caixa inteira e NAO RECEBE CLIQUE. Sem isto, clicar na tela
   abre o YouTube por cima, com titulo, sugestoes e botao de compartilhar — tudo
   o que esta tela existe para nao mostrar. O som se controla pela barra de
   cima, que fica fora do iframe e continua clicavel. */
.tv-tela iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; pointer-events: none;
}
/* O aviso some quando o player entra. */
.tv-ligada .tv-espaco { display: none; }
.tv-espaco {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(241,238,232,.5);
}

/* ---- a barra de cima: titulo, status e som ---- */
.tv-barra {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
/* GAP ZERO AQUI. `.titulo-secao` e flex com `gap: .9rem` — pensado para
   titulo mais link "ver tudo" — e esse gap somava a margem da assinatura,
   jogando o "by CineQuiz" longe da marca. Aqui so a margem decide. */
.tv-titulo { margin: 0; flex: 0 0 auto; gap: 0; }
/* "by CineQuiz" e assinatura, nao titulo: menor, sem peso e em tinta fraca,
   para nao disputar a leitura com a marca. */
.tv-marca-sub { margin-left: .28rem; font-size: .58em; font-weight: 500;
  letter-spacing: 0; color: var(--tinta-fraca); }

.tv-ponto {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: #3FBF6A; box-shadow: 0 0 0 0 rgba(63,191,106,.6);
  animation: tv-pulsa 2s ease-out infinite;
}
@keyframes tv-pulsa {
  70%  { box-shadow: 0 0 0 7px rgba(63,191,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,191,106,0); }
}
@media (prefers-reduced-motion: reduce) { .tv-ponto { animation: none; } }

.tv-vivo { text-transform: uppercase; letter-spacing: .07em; font-size: .56rem; font-weight: 600; flex: 0 0 auto; }
.tv-som { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
.tv-botao {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; border: 1px solid var(--borda);
  background: var(--fundo-2); color: var(--tinta); cursor: pointer;
}
.tv-botao:hover { border-color: var(--realce); color: var(--realce); }
.tv-botao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* A barra de volume desenhada a mao: o controle nativo muda de cara em cada
   navegador, e aqui ele fica ao lado de um botao que desenhamos. */
.tv-faixa {
  -webkit-appearance: none; appearance: none;
  width: 74px; height: 4px; border-radius: 999px; background: var(--borda-forte);
  cursor: pointer;
}
.tv-faixa::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; background: var(--realce); border: 0;
}
.tv-faixa::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--realce); border: 0;
}
.tv-faixa:focus-visible { outline: 2px solid var(--realce); outline-offset: 3px; }

@media (max-width: 520px) {
  .tv-barra { gap: .5rem; }
  .tv-som { margin-left: auto; }
}

/* A coluna da direita ganhou titulo proprio, entao ela e quem alinha o topo
   com o da TV. */
.vitrine-coluna { display: grid; gap: .7rem; align-content: start; min-width: 0; }
.vitrine-coluna .titulo-secao { margin: 0; }

@media (max-width: 860px) {
  .tv-palco, .vitrine-coluna { gap: .6rem; }
}

/* O cartao da obra em exibicao, sobre a tela da TV.
   FORA do iframe: aquele tem `pointer-events: none` para o clique nao abrir o
   YouTube, e um link dentro dele seria igualmente inerte.
   DENTRO da `.tv-tela`, e nao do `.tv-palco`: o palco e item de uma grade de
   duas colunas e ESTICA ate a altura da coluna vizinha — quando a da direita
   cresceu, o `bottom` do cartao virou o fundo do palco esticado e o cartao foi
   parar flutuando abaixo do video. A tela tem a altura do video e mais nada. */
.tv-ficha {
  /* A DIREITA, e nao a esquerda: a legenda do trailer nasce embaixo e ao
     centro, e o cartao a esquerda comia a primeira linha dela. */
  position: absolute; right: .8rem; bottom: .8rem; z-index: 2;
  display: flex; align-items: center; gap: .7rem;
  max-width: min(340px, calc(100% - 1.6rem));
  padding: .5rem .8rem .5rem .5rem;
  border-radius: 12px; text-decoration: none;
  background: rgba(11, 10, 18, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  color: #F1EEE8;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, border-color .12s ease;
  pointer-events: none;
}
/* So aparece quando o player esta no ar e ha para onde ir. */
.tv-ligada .tv-ficha[href] { opacity: 1; transform: none; pointer-events: auto; }
.tv-ficha:hover { border-color: var(--realce); }
.tv-ficha-capa {
  width: 58px; height: 87px; border-radius: 7px; object-fit: cover;
  flex: 0 0 auto; background: rgba(255,255,255,.06);
}
.tv-ficha-texto { display: grid; gap: .2rem; min-width: 0; }
/* A TRANSMISSAO MUDOU DE LUGAR: era a barra de cima, junto do nome da obra.
   Com o cartao no ar o nome aparecia duas vezes na mesma tela, e o indicador
   faz mais sentido colado ao que esta passando. */
.tv-ficha-vivo { display: flex; align-items: center; gap: .38rem;
  color: rgba(241, 238, 232, .62); }
.tv-ficha-texto b {
  font-size: .88rem; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-ficha-pe { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: rgba(241,238,232,.66); }
.tv-ficha-pe i {
  font-style: normal; font-weight: 700; color: var(--palco-lampada, #E7B84B);
  border: 1px solid currentColor; border-radius: 4px; padding: 0 .25rem; font-size: .66rem;
}
@media (prefers-reduced-motion: reduce) { .tv-ficha { transition: none; } }
@media (max-width: 520px) {
  .tv-ficha { right: .5rem; bottom: .5rem; padding: .4rem .6rem .4rem .4rem; }
  .tv-ficha-capa { width: 44px; height: 66px; }
}

/* ---- TrailerTV: a ficha curta em modal ---- */
/* Mesmo padrao do modal de criticas: `<dialog>` nativo, fundo pelo ::backdrop,
   fechar no canto. Tokens do TEMA e nao do palco — o modal flutua sobre a
   pagina, nao sobre o video, e tem de ler bem nos dois temas. */
/* SEM `position` AQUI. O navegador da a um dialog modal `position: fixed`, e
   declarar `relative` o derruba de volta para o fluxo da pagina: ele deixava de
   flutuar, empurrava o conteudo e a pagina saltava para o topo ao abrir. E
   tambem o `fixed` do navegador que serve de referencia ao `.fechar` absoluto —
   o `#palco-criticas`, que sempre funcionou, nao declara position nenhum. */
#palco-tv {
  width: min(560px, 92vw); max-height: 88vh; padding: 0;
  border: 1px solid var(--borda); border-radius: 16px;
  background: var(--fundo); color: var(--tinta); overflow: auto;
}
#palco-tv::backdrop { background: rgba(8, 6, 16, .72); }
#palco-tv .fechar {
  position: absolute; top: .5rem; right: .7rem; z-index: 2;
  background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: var(--tinta-fraca);
}
#palco-tv .fechar:hover { color: var(--tinta); }

.tvf-corpo { display: flex; gap: 1.2rem; padding: 1.5rem 1.6rem 1.6rem; align-items: flex-start; }
.tvf-capa {
  width: 150px; height: 225px; flex: 0 0 auto; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo-2);
}
.tvf-info { min-width: 0; flex: 1 1 auto; }
.tvf-info h2 { margin: .2rem 0 .6rem; font-size: 1.3rem; line-height: 1.2; }

/* Situacao, data e nota numa linha so: sao tres respostas curtas, e empilhadas
   ocupariam mais altura que o cartaz ao lado. */
.tvf-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .4rem; font-size: .86rem; color: var(--tinta-fraca); }
.tvf-sit { padding: .12rem .5rem; border-radius: 6px; font-size: .72rem;
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
/* Em cartaz e a unica que e novidade acionavel — a pessoa pode ir hoje. */
.tvf-sit-cartaz   { background: var(--realce); color: #fff; }
.tvf-sit-estreia  { border: 1px solid var(--realce); color: var(--realce); }
.tvf-sit-exibicao { border: 1px solid var(--borda); color: var(--tinta-fraca); }
.tvf-nota { font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; }
.tvf-nota::before { content: '★'; margin-right: .2rem; color: var(--lampada); }

.tvf-onde h3 { margin: 1rem 0 0; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-fraca); }
.tvf-onde .onde-lista { margin: .55rem 0 0; grid-template-columns: 1fr; }
.tvf-vazio { margin: 1rem 0 0; font-size: .84rem; color: var(--tinta-fraca); }
.tvf-botao { margin-top: 1.2rem; display: inline-block; }

@media (max-width: 560px) {
  .tvf-corpo { flex-direction: column; align-items: center; text-align: center; }
  .tvf-info { width: 100%; text-align: left; }
  .tvf-capa { width: 122px; height: 183px; }
}

/* ---- o pedido de apoio embaixo da coluna de destaques ---- */
/* O `.painel-bloco h2` e etiqueta: .78rem, caixa alta, espacado — certo para
   "ULTIMOS DESTAQUES", errado para uma frase que precisa ser LIDA. Aqui o
   titulo volta a ser titulo. */
.tv-doar { margin-top: .3rem; }
.tv-doar h2 {
  font-size: 1.02rem; text-transform: none; letter-spacing: -0.01em;
  color: var(--tinta); margin: 0 0 .6rem; line-height: 1.25;
}
.tv-doar p { margin: 0 0 .7rem; }
.tv-doar p:last-of-type { margin-bottom: 1rem; }

/* O coracao do botao de apoio. `fill: currentColor` para acompanhar a cor do
   texto em qualquer estado do botao, inclusive no hover. */
/* `.painel-cta .botao` ja declara `display: block` e vence uma classe sozinha
   por especificidade — por isso o seletor duplo aqui, e nao `.tv-doar-btn`. */
.painel-cta .botao.tv-doar-btn { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.tv-doar-btn svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

/* ---- o selo de pipoca e a batida do botao de apoio ---- */
/* O titulo vira linha: selo a esquerda, frase a direita, alinhados pelo centro
   e nao pela base — o selo e redondo e a base visual dele nao existe. */
.tv-doar h2 { display: flex; align-items: center; gap: .65rem; }
.tv-doar-selo {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  /* Tinta propria, fora dos tokens do tema: o balde e vermelho de cinema nos
     dois temas, e a roda de cor do site nao tem esse vermelho. */
  background: rgba(224, 68, 87, .12);
  border: 1px solid rgba(224, 68, 87, .28);
}
.tv-doar-selo svg { width: 24px; height: 24px; display: block; }
.pipoca-balde  { fill: #E04457; }
.pipoca-faixas { fill: #FBF3E4; }
.pipoca-graos  { fill: #F6DE96; }
.pipoca-fundo  { fill: #E3BE63; }

/* A BATIDA DE 15 EM 15 SEGUNDOS. O movimento ocupa menos de um segundo do
   ciclo: o resto da animacao e parada. Chamar a atencao periferica sem virar
   um elemento que pisca — pisca-pisca em pedido de dinheiro vira anuncio, e
   anuncio o olho aprende a nao ver. */
/* A BATIDA MORA NO COMECO DO CICLO, e nao no fim. `animationiteration` dispara
   na virada, entao com ela aqui o evento cai no mesmo instante do movimento — e
   e nele que o JS troca a frase do botao. No fim do ciclo, texto e movimento
   ficariam a 14 segundos um do outro. */
@keyframes tv-doar-batida {
  0%       { transform: none;             box-shadow: 0 0 0 0 rgba(90, 69, 214, 0); }
  2%       { transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(90, 69, 214, .65); }
  4%       { transform: translateY(0);    box-shadow: 0 4px 12px -6px rgba(90, 69, 214, .45); }
  5.5%     { transform: translateY(-1px); }
  7%, 100% { transform: none;             box-shadow: 0 0 0 0 rgba(90, 69, 214, 0); }
}
@keyframes tv-doar-coracao {
  0%       { transform: scale(1); }
  2%       { transform: scale(1.22); }
  4%       { transform: scale(1); }
  5.5%     { transform: scale(1.1); }
  7%, 100% { transform: scale(1); }
}
/* O atraso segura a primeira batida enquanto a pagina ainda esta se montando:
   movimento no meio do carregamento passa por defeito, nao por chamariz. */
.painel-cta .botao.tv-doar-btn { animation: tv-doar-batida 15s ease-in-out 6s infinite; }
.tv-doar-btn svg { animation: tv-doar-coracao 15s ease-in-out 6s infinite; }
/* A frase atravessa a batida: sai, troca, volta — 300ms dentro de um movimento
   de um segundo. Trocar seca, no meio da quietude, seria um salto. */
.tv-doar-btn [data-doar-frase] { transition: opacity .15s ease; }

/* Quem pediu menos movimento nao recebe o chamariz: e enfeite, nao informacao. */
@media (prefers-reduced-motion: reduce) {
  .painel-cta .botao.tv-doar-btn, .tv-doar-btn svg { animation: none; }
}

/* A contagem dos ultimos segundos, no canto de cima do cartao.
   POR FORA DA QUINA, e nao dentro: o titulo pode ocupar duas linhas e um selo
   dentro do cartao cairia por cima dele. O `.tv-ficha` ja e `absolute`, entao
   serve de referencia sem precisar declarar nada. */
.tv-ficha-conta {
  position: absolute; top: -9px; right: -9px; z-index: 1;
  min-width: 24px; height: 24px; padding: 0 .3rem; box-sizing: border-box;
  display: grid; place-items: center;
  border-radius: 999px; border: 2px solid rgba(11, 10, 18, .85);
  background: #E04457; color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- escolha de generos e tipos (cadastro e perfil) ---- */
/* `.prefs-ficha` e nao `.ficha`: aquela ja existe e e a ficha tecnica do
   filme, um `display: grid` que quebraria estes botoes. */
.prefs { margin: 1.4rem 0 0; text-align: left; }
.prefs h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.prefs-sub { margin: 0 0 1.1rem; font-size: .85rem; line-height: 1.5; color: var(--tinta-fraca); }
.prefs h3 {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 1.2rem 0 .6rem; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-fraca);
}
.prefs-conta { font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--realce); }
/* Enquanto falta gênero o contador avisa pela cor. Nao desabilita nada: botao
   morto nao explica por que esta morto. */
.prefs-conta.prefs-falta { color: #E04457; }
.prefs-acoes { margin-left: auto; display: flex; gap: .5rem; }
.prefs-botao {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: 0; text-transform: none;
  color: var(--realce); text-decoration: underline;
}
.prefs-fichas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }

/* A CAIXA DE MARCAR SOME e o rotulo inteiro vira o alvo: num grid de 19
   opcoes, mirar um quadradinho de 13px e a diferenca entre escolher rapido e
   desistir. O `:focus-visible` do input pinta a ficha, entao quem navega por
   teclado continua vendo onde esta. */
.prefs-ficha { display: inline-flex; cursor: pointer; }
.prefs-ficha input { position: absolute; opacity: 0; width: 0; height: 0; }
.prefs-ficha span {
  display: block; padding: .42rem .8rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo-2);
  font-size: .85rem; line-height: 1.3; color: var(--tinta);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.prefs-ficha:hover span { border-color: var(--realce); }
.prefs-ficha input:checked + span {
  background: var(--realce); border-color: var(--realce); color: #fff; font-weight: 600;
}
.prefs-ficha input:focus-visible + span { outline: 2px solid var(--realce); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .prefs-ficha span { transition: none; } }

/* No palco (cadastro/entrar) o fundo e escuro nos dois temas. */
.palco-cartao .prefs-sub,
.palco-cartao .prefs h3 { color: rgba(241, 238, 232, .66); }
.palco-cartao .prefs-ficha span {
  border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #F1EEE8;
}
.palco-cartao .prefs-ficha input:checked + span { background: var(--realce); border-color: var(--realce); }

/* ---- o coracao das fichas ---- */
/* Mesma silhueta dos outros botoes da linha de acoes (`.btn-trailer`,
   `.btn-quiz`): a acao nova nao pode parecer de outra familia. */
.btn-fav {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--palco-borda); background: rgba(255, 255, 255, .06);
  color: var(--palco-tinta); font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
.btn-fav svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none;
  stroke: currentColor; stroke-width: 1.8; }
.btn-fav:hover { border-color: #E04457; }
/* Marcado: o coracao se preenche. E a unica diferenca que precisa ser lida de
   longe — o rotulo confirma, mas quem responde "ja curti?" e o preenchimento. */
.btn-fav[aria-pressed="true"] { border-color: #E04457; background: rgba(224, 68, 87, .16); }
.btn-fav[aria-pressed="true"] svg { fill: #E04457; stroke: #E04457; }
.btn-fav[disabled] { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .btn-fav { transition: none; } }

/* ---- "ja assisti", a porta da critica ---- */
/* Mesma silhueta do coracao; marcado fica verde, que e "feito", nao "gosto". */
.btn-assistido {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--palco-borda); background: rgba(255, 255, 255, .06);
  color: var(--palco-tinta); font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
.btn-assistido svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none;
  stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-assistido b { font-weight: 600; opacity: .7; font-size: .8rem; }
.btn-assistido:hover { border-color: #2EB872; }
.btn-assistido[aria-pressed="true"] { border-color: #2EB872; background: rgba(46, 184, 114, .16); }
.btn-assistido[aria-pressed="true"] svg { stroke: #2EB872; }
.btn-assistido[disabled] { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .btn-assistido { transition: none; } }

/* ---- a lista de curtidos, no perfil ---- */
.perf-vazio { margin: 1.2rem 0; color: var(--tinta-fraca); font-size: .92rem; line-height: 1.55; }
.fav-grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.fav-grade a { display: grid; gap: .3rem; text-decoration: none; color: inherit; }
.fav-grade img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--borda); background: var(--fundo-2);
}
.fav-grade b { font-size: .84rem; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fav-grade small { font-size: .75rem; color: var(--tinta-fraca); }
.fav-grade a:hover b { color: var(--realce); }
/* Os generos da obra no modal da TrailerTV: contexto, nao titulo. */
.tvf-generos { margin: .1rem 0 0; font-size: .8rem; line-height: 1.4; color: var(--tinta-fraca); }

/* ---- atalho flutuante de preferencias ---- */
/* CANTO SUPERIOR DIREITO E `fixed`: ele acompanha a rolagem porque a pessoa
   costuma perceber que a lista nao e a dela DEPOIS de descer a pagina. */
/* SÓ O ÍCONE, num alvo de 38px. Com o rótulo ao lado a pastilha atravessava um
   terço da largura no celular e tapava o conteúdo — e o que ela diz o ícone já
   diz. O nome fica no `title` e no `aria-label`. */
.prefs-atalho {
  position: fixed; top: 84px; right: 18px; z-index: 60;
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--borda); background: var(--fundo-2); color: var(--tinta);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45);
  transition: border-color .12s ease, transform .12s ease;
}
.prefs-atalho:hover { border-color: var(--realce); transform: translateY(-1px); }
.prefs-atalho svg {
  width: 19px; height: 19px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
}
/* O miolo dos cursores acompanha o fundo do botão, senão vira um borrão. */
.prefs-atalho svg circle { fill: var(--fundo-2); }
@media (max-width: 720px) {
  .prefs-atalho { top: auto; bottom: 16px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .prefs-atalho { transition: none; } }

#prefs-palco {
  width: min(560px, 94vw); max-height: min(86vh, 720px); padding: 0;
  border: 1px solid var(--borda); border-radius: 18px;
  background: var(--fundo); color: var(--tinta); overflow: hidden;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .6);
}
#prefs-palco::backdrop { background: rgba(8, 6, 16, .74); backdrop-filter: blur(2px); }
/* O formulário é a coluna: topo e pé fixos, só o miolo rola. */
#prefs-palco form { display: flex; flex-direction: column; max-height: min(86vh, 720px); }

.prefs-palco-topo {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.4rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--borda);
}
.prefs-palco-topo h2 { margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.01em; }
.prefs-palco-topo p { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--tinta-fraca); }
.prefs-palco-topo .fechar {
  flex: 0 0 auto; margin-left: auto; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--tinta-fraca);
}
.prefs-palco-topo .fechar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.prefs-palco-topo .fechar:hover { border-color: var(--borda); color: var(--tinta); }

.prefs-palco-corpo { padding: 1.2rem 1.5rem 1.4rem; overflow-y: auto; }
/* O título e o texto de apoio do bloco já foram ditos no cabeçalho. */
.prefs-palco-corpo .prefs { margin: 0; }
.prefs-palco-corpo .prefs > h2,
.prefs-palco-corpo .prefs-sub { display: none; }
.prefs-palco-corpo .prefs h3:first-of-type { margin-top: 0; }

.prefs-palco-pe {
  padding: 1.1rem 1.5rem 1.3rem;
  border-top: 1px solid var(--borda); background: var(--fundo-2);
}
.prefs-palco-pe .botao { width: 100%; }
.prefs-palco-erro { margin: 0 0 .8rem; font-size: .85rem; color: #E04457; line-height: 1.45; }

/* AS FICHAS RESPIRAM MAIS DENTRO DO DIÁLOGO. São 19 numa caixa de 560px, e com
   o mesmo tamanho da página elas se encostavam em quatro linhas apertadas. */
.prefs-palco-corpo .prefs-fichas { gap: .4rem; }
.prefs-palco-corpo .prefs-ficha span { padding: .36rem .7rem; font-size: .82rem; }
.prefs-palco-corpo .prefs h3 { margin: 1.3rem 0 .7rem; }

/* ---- o coracao sobre a tela da TrailerTV ---- */
/* Canto de cima a esquerda: a direita e do cartao da obra e, no topo, da
   moldura que o YouTube desenha quando para. Fica FORA do iframe, como o
   cartao — aquele tem `pointer-events: none` e engoliria o clique. */
.tv-coracao {
  position: absolute; top: .7rem; left: .7rem; z-index: 3;
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(11, 10, 18, .62); color: #F1EEE8;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s ease, border-color .12s ease, background .12s ease;
  pointer-events: none;
}
/* Só aparece com o player no ar, como o cartão. */
.tv-ligada .tv-coracao { opacity: 1; pointer-events: auto; }
.tv-coracao svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tv-coracao:hover { border-color: #E04457; }
/* Marcado: o coração se preenche. É o que se lê de longe; o rótulo confirma. */
.tv-coracao[aria-pressed="true"] { border-color: #E04457; background: rgba(224, 68, 87, .26); }
.tv-coracao[aria-pressed="true"] svg { fill: #E04457; stroke: #E04457; }
.tv-coracao[disabled] { opacity: .55; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .tv-coracao { transition: none; } }
@media (max-width: 520px) {
  .tv-coracao { top: .5rem; left: .5rem; width: 34px; height: 34px; }
  .tv-coracao svg { width: 17px; height: 17px; }
}

/* ---- criticas dos nossos leitores ---- */
.btn-critica {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--palco-borda); background: rgba(255, 255, 255, .06);
  color: var(--palco-tinta); font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: none; transition: border-color .12s ease;
}
.btn-critica svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.btn-critica:hover { border-color: var(--realce); }
@media (prefers-reduced-motion: reduce) { .btn-critica { transition: none; } }

/* O modal. Sem clique no fundo e sem Esc — ver o `critica.js`. */
#palco-critica {
  width: min(560px, 94vw); max-height: min(88vh, 760px); padding: 0;
  border: 1px solid var(--borda); border-radius: 18px;
  background: var(--fundo); color: var(--tinta); overflow: hidden;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .6);
}
#palco-critica::backdrop { background: rgba(8, 6, 16, .78); }
#palco-critica form { display: flex; flex-direction: column; max-height: min(88vh, 760px); }
.critica-topo {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.4rem 1.5rem 1.1rem; border-bottom: 1px solid var(--borda);
}
.critica-topo h2 { margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.2; }
.critica-topo p { margin: 0; font-size: .83rem; line-height: 1.45; color: var(--tinta-fraca); }
.critica-topo .fechar {
  flex: 0 0 auto; margin-left: auto; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--tinta-fraca);
}
.critica-topo .fechar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.critica-topo .fechar:hover { border-color: var(--borda); color: var(--tinta); }
.critica-corpo { padding: 1.3rem 1.5rem 1.4rem; overflow-y: auto; }

/* AS ESTRELAS EM ORDEM INVERSA no HTML, para o `~` do CSS alcançar as
   anteriores: sem isso não dá para acender da primeira até a clicada sem
   JavaScript. */
.critica-estrelas { border: 0; margin: 0 0 1.2rem; padding: 0;
  display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; }
.critica-estrelas legend {
  float: left; width: 100%; margin: 0 0 .5rem; padding: 0;
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca);
}
.critica-estrelas input { position: absolute; opacity: 0; width: 0; height: 0; }
.critica-estrelas label { cursor: pointer; color: var(--borda); line-height: 0; }
.critica-estrelas label svg { width: 30px; height: 30px; fill: currentColor; }
.critica-estrelas input:checked ~ label,
.critica-estrelas label:hover,
.critica-estrelas label:hover ~ label { color: var(--lampada); }
.critica-estrelas input:focus-visible + label { outline: 2px solid var(--realce); outline-offset: 2px; }

.critica-campo { display: grid; gap: .4rem; }
.critica-campo > span { font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca); }
.critica-campo textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px;
  padding: .7rem .8rem; border-radius: 10px; font: inherit; font-size: .92rem;
  line-height: 1.5; border: 1px solid var(--borda);
  background: var(--fundo-2); color: var(--tinta);
}
.critica-campo textarea:focus-visible { outline: 2px solid var(--realce); outline-offset: 1px; }
.critica-pe { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
  font-size: .74rem; color: var(--tinta-fraca); }
.critica-pe i { font-style: normal; opacity: .8; }
.critica-erro { margin: .9rem 0 0; font-size: .86rem; color: #E04457; line-height: 1.45; }
.critica-rodape { padding: 1.1rem 1.5rem 1.3rem; border-top: 1px solid var(--borda); background: var(--fundo-2); }
.critica-rodape .botao { width: 100%; }
/* O recado ocupa o miolo; o cabecalho com o X continua acima dele. */
.critica-recado { margin: 0; padding: 1.6rem .4rem; text-align: center;
  font-size: .95rem; line-height: 1.6; }

/* A lista na página. */
.criticas-nossas-titulo { display: flex; align-items: baseline; gap: .6rem; margin: 1.8rem 0 .9rem; }
/* DENTRO DO MODAL o primeiro titulo sobe: o `<h2>` "Criticas do publico" ja
   esta logo acima, e dois titulos colados leem como erro. */
.criticas-corpo .criticas-nossas-titulo:first-of-type { margin-top: 0; }
.criticas-tmdb-titulo { margin: 1.8rem 0 .9rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca); }
.criticas-media { font-size: .92rem; font-weight: 700; color: var(--lampada); }
.criticas-media small { font-weight: 500; color: var(--tinta-fraca); }
.criticas-vazio { margin: 0; font-size: .9rem; color: var(--tinta-fraca); }
.criticas-nossas { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.criticas-nossas li { padding: .9rem 1rem; border: 1px solid var(--borda);
  border-radius: 12px; background: var(--fundo-2); }
.cn-cabeca { display: flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; font-size: .86rem; }
.cn-cabeca b { font-weight: 700; }
.cn-nota { font-weight: 700; color: var(--lampada); font-variant-numeric: tabular-nums; }
.cn-data { margin-left: auto; font-size: .78rem; color: var(--tinta-fraca); }
.criticas-nossas p { margin: 0; font-size: .93rem; line-height: 1.55; }

/* ---- minhas criticas, no perfil ---- */
.minhas-criticas { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.minhas-criticas li { padding: .9rem 1rem; border: 1px solid var(--borda);
  border-radius: 12px; background: var(--fundo-2); }
.mc-cabeca { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.mc-cabeca a { font-weight: 700; font-size: .95rem; color: inherit; text-decoration: none; }
.mc-cabeca a:hover { color: var(--realce); }
.mc-nota { font-weight: 700; color: var(--lampada); font-variant-numeric: tabular-nums; }
.mc-st { margin-left: auto; padding: .1rem .5rem; border-radius: 6px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mc-st-aprovada { background: rgba(63, 191, 106, .18); color: #3FBF6A; }
.mc-st-pendente  { background: rgba(242, 180, 65, .18); color: var(--lampada); }
.mc-st-recusada  { background: rgba(224, 68, 87, .16); color: #E04457; }
.minhas-criticas p { margin: 0; font-size: .92rem; line-height: 1.55; }
.mc-motivo { display: block; margin: .55rem 0 0; font-size: .78rem; color: var(--tinta-fraca); }

/* ---- como funciona a gamificacao, no perfil ---- */
.gam { margin: 2.2rem 0 0; padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-2); }
.gam h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.gam-sub { margin: 0 0 1.2rem; font-size: .87rem; color: var(--tinta-fraca); line-height: 1.5; }
/* OS DOIS LADO A LADO, e nao empilhados: a diferenca entre eles e o assunto,
   e diferenca se le comparando. */
.gam-par { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gam-par > div { padding: .85rem 1rem; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--fundo); }
.gam-par b { display: block; margin: 0 0 .3rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--realce); }
.gam-par p { margin: 0; font-size: .87rem; line-height: 1.5; }
.gam h3 { margin: 1.4rem 0 .6rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca); }
.gam-lista { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem;
  font-size: .89rem; line-height: 1.5; }
.gam > p { margin: 0; font-size: .89rem; line-height: 1.55; }
.gam-nota { margin: 1.3rem 0 0 !important; padding-top: 1rem; border-top: 1px solid var(--borda);
  font-size: .83rem !important; color: var(--tinta-fraca); }

/* ---- conteúdo adulto: capa desfocada e a porta (2026-09-14) ----
   A classe vai no ELEMENTO que envolve a imagem (li, a, div): o servidor decide,
   pelo cookie cq_adulto, se ela entra. O clique continua levando à ficha, que
   faz a confirmação. O desfoque é forte de propósito — 18px não deixa ler
   nem o título impresso no pôster. */
.capa-adulta { position: relative; overflow: hidden; }
.capa-adulta img { filter: blur(18px) saturate(.6); transform: scale(1.08); }
.capa-adulta::after {
  content: "18+"; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  padding: .3rem .7rem; border-radius: 999px; font-weight: 800; font-size: .85rem;
  letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.35); pointer-events: none;
}
.adulto-porta { min-height: 60vh; display: grid; place-items: center; padding: 3rem 1rem; }
.adulto-caixa { max-width: 520px; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.adulto-selo {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 1.3rem; color: #fff; background: #B02A2A;
}
.adulto-caixa h1 { margin: 0; }
.adulto-caixa p { margin: 0; color: var(--tinta-fraca); }
.adulto-acoes { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .4rem; }
/* No dropdown da busca a miniatura tem 34px: selo menor. */
.busca-grupo li.capa-adulta::after { font-size: .5rem; padding: .05rem .3rem; left: 17px; top: 26px; }
/* Na tabela do diretor a miniatura também é de 34px, e o link é inline. */
a.capa-adulta { display: inline-flex; }
a.capa-adulta::after { font-size: .5rem; padding: .05rem .3rem; left: 17px; top: 26px; }

/* ---- a frase marcante da home (15/09/2026; refeita no mesmo dia: "muito
   ruim a leitura") ---- */
/* Frase grande, centrada, branca, com aspas douradas; a autoria em dourado
   embaixo; o botão do quiz numa linha própria. Nada disputa com a busca. */
.frase-marcante {
  display: grid; justify-items: center; gap: .3rem; text-align: center;
  margin: .9rem auto 0; max-width: 560px; padding: .6rem .9rem .55rem;
  border-radius: 16px; background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(242, 180, 65, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: opacity .6s ease, transform .6s ease;
}
.frase-marcante.frase-sai { opacity: 0; transform: translateY(8px); }
.frase-marcante-link { display: grid; gap: .25rem; justify-items: center; text-decoration: none; color: #fff; min-width: 0; }
.frase-marcante-link q {
  display: block; font-size: .92rem; font-weight: 600; line-height: 1.35;
  font-style: italic; letter-spacing: -.01em; quotes: "“" "”"; text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.frase-marcante-link q::before, .frase-marcante-link q::after { color: #F2B441; font-style: normal; font-weight: 900; }
.frase-marcante-de {
  font-size: .72rem; font-weight: 600; color: #F2B441; letter-spacing: .01em;
}
.frase-marcante-de::before { content: "— "; }
.frase-marcante-link:hover q { text-decoration: underline; text-decoration-color: #F2B441; text-underline-offset: .2em; }
.frase-marcante-quiz {
  margin-top: .15rem; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: #F2B441; background: transparent; border: 1.5px solid rgba(242, 180, 65, .7);
  padding: .25rem .7rem; border-radius: 999px; text-decoration: none; transition: background .2s, color .2s;
}
.frase-marcante-quiz:hover { background: #F2B441; color: #1A1200; }
@media (max-width: 600px) {
  .frase-marcante { margin-top: .9rem; padding: .7rem .8rem .65rem; }
  .frase-marcante-link q { font-size: .88rem; }
}

/* ---- frases marcantes e curiosidades na ficha (16/09/2026) ---- */
.frases-filme { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .55rem; }
.frases-filme li { padding: .6rem .9rem; border-left: 3px solid #F2B441; background: var(--fundo-2); border-radius: 0 10px 10px 0; }
.frases-filme q { font-style: italic; font-weight: 600; quotes: "“" "”"; }
.frases-filme q::before, .frases-filme q::after { color: #F2B441; }
.frases-filme span { display: block; font-size: .8rem; color: var(--tinta-fraca); margin-top: .15rem; }
.curiosidades { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; line-height: 1.5; }
.curiosidades li::marker { color: #F2B441; }
.pessoa-lead { margin: .2rem 0 1rem; font-size: 1.02rem; color: var(--tinta-fraca); }
.pessoa-lead a { color: inherit; font-weight: 600; }
.capa-texto .lead { margin: .2rem 0 .6rem; font-size: 1.02rem; color: var(--tinta-fraca); max-width: 60ch; }

/* ---- listas editoriais (16/09/2026) ---- */
.lista-pagina .abertura .lead { font-size: 1.02rem; color: var(--tinta-fraca); max-width: 70ch; margin: .4rem 0 .3rem; }
.migalhas { font-size: .8rem; color: var(--tinta-fraca); margin: .6rem 0 0; }
.migalhas a { color: inherit; }
.lista-itens { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: .7rem; }
.lista-item { display: grid; grid-template-columns: 2.4rem 88px 1fr; gap: .9rem; align-items: center;
  padding: .6rem .8rem; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--borda); }
.lista-pos { font-size: 1.5rem; font-weight: 900; color: #F2B441; text-align: center; }
.lista-capa img { width: 88px; height: 132px; object-fit: cover; border-radius: 8px; display: block; background: var(--borda); }
.lista-texto h2 { margin: 0 0 .25rem; font-size: 1.08rem; line-height: 1.25; }
.lista-texto h2 a { color: inherit; text-decoration: none; }
.lista-texto h2 a:hover { text-decoration: underline; }
.lista-texto .ano { color: var(--tinta-fraca); font-weight: 500; }
.lista-meta { margin: 0; font-size: .82rem; color: var(--tinta-fraca); }
.lista-meta .selo { display: inline-block; padding: .05rem .45rem; border-radius: 6px; background: #F2B441; color: #1A1200; font-weight: 800; font-size: .78rem; }
.lista-irmas { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.lista-irmas a { display: inline-block; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--borda); background: var(--fundo-2); text-decoration: none; color: inherit; font-size: .84rem; }
.lista-grupo { margin: 1.4rem 0; }
.lista-grupo h2 small { font-size: .74rem; color: var(--tinta-fraca); font-weight: 600; margin-left: .3rem; }
.lista-links { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem .9rem; }
.lista-links a { color: inherit; text-decoration: none; font-size: .92rem; }
.lista-links a:hover { color: #F2B441; }
@media (max-width: 600px) { .lista-item { grid-template-columns: 1.8rem 64px 1fr; gap: .6rem; } .lista-capa img { width: 64px; height: 96px; } }
.btn-assistido .ico-check { display: none; }
.btn-assistido[aria-pressed="true"] .ico-check { display: inline-block; }
.btn-assistido[aria-pressed="true"] .ico-olho { display: none; }


/* Login com Google e Apple (16/09/2026): abaixo do formulário, nas páginas de conta. */
.social-entrar { margin-top: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.social-ou { width: 100%; margin: 0 0 .2rem; display: flex; align-items: center; gap: .7rem; font-size: .8rem; color: rgba(241, 238, 232, .55); }
.social-ou::before, .social-ou::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
.botao-social {
  width: 320px; max-width: 100%; min-height: 44px; padding: .6rem 1rem; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: #fff; color: #000; border: 1px solid #000; border-radius: 999px;
  font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.botao-social:hover { background: #f2f2f2; }
.botao-social:disabled { opacity: .7; cursor: progress; }
/* O iframe do GIS, transparente, por cima da pílula: recebe o clique, não aparece. */
.botao-social-google { position: relative; width: 320px; max-width: 100%; min-height: 44px; }
.botao-social-google .g_id_signin { position: absolute; inset: 0; opacity: .001; overflow: hidden; }
.botao-social-google .g_id_signin > div { width: 100% !important; }

/* Primeiro acesso (16/09/2026): três passos num formulário só. */
.passos .prefs { margin-top: .4rem; }
.passos .prefs > h2, .passos .prefs > .prefs-sub { display: none; }
.passos-trilha { list-style: none; display: flex; gap: .5rem; justify-content: center; margin: 0 0 1.2rem; padding: 0; }
.passos-trilha li { width: 2.2rem; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.passos-trilha li.ativo { background: var(--palco-lampada); }
.passo-email h3 { margin: .4rem 0 .3rem; font-size: 1rem; }
.passos-nav { display: flex; gap: .6rem; margin-top: 1.2rem; }
.passos-nav .botao { flex: 1; margin-top: 0; }
.social-aceite { margin: .2rem 0 0; font-size: .74rem; line-height: 1.45; text-align: center; color: rgba(241, 238, 232, .55); max-width: 320px; }
.social-aceite a { color: rgba(241, 238, 232, .85); }

/* Formas de entrar (perfil, 16/09/2026). */
.social-ligados { list-style: none; margin: .6rem 0 .2rem; padding: 0; }
.social-ligados li { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--borda); font-size: .92rem; }
.social-ligados li b { font-weight: 600; color: var(--tinta-fraca); margin-right: auto; }
.social-ligados .form-inline { margin: 0; }
.botao.mini { padding: .3rem .7rem; font-size: .8rem; }
.social-vincular { align-items: flex-start; margin-top: .8rem; }
.social-vincular .botao-social { color: #000; }

/* Contato (17/09/2026): campo-armadilha fora da tela; select no molde dos inputs. */
.campo-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-contato select, .form-contato textarea { width: 100%; box-sizing: border-box; background: var(--fundo-2); color: var(--tinta); border: 1px solid var(--borda-forte); border-radius: 8px; padding: .7rem .8rem; font: inherit; }
.form-contato textarea { resize: vertical; min-height: 9rem; }

/* Selos das lojas no rodapé (17/09/2026): formato oficial, "Em breve" no lugar de "Baixar". */
.rodape-lojas { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.1rem 0 0; }
.selo-loja {
  display: inline-flex; align-items: center; gap: .55rem; min-width: 168px; padding: .45rem .9rem .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff;
  text-align: left; line-height: 1.05; cursor: default;
}
.selo-loja .selo-texto { display: flex; flex-direction: column; }
.selo-loja small { font-size: .62rem; letter-spacing: .01em; color: rgba(255, 255, 255, .72); }
.selo-loja b { font-size: 1rem; font-weight: 600; }

/* Assinatura do rodapé (17/09/2026). */
.rodape-assinatura { margin: .9rem 0 0; font-size: .76rem; line-height: 1.6; color: var(--tinta-fraca); }
.rodape-assinatura a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.rodape-assinatura a:hover { text-decoration: underline; }

/* ---------- Rodapé completo (17/09/2026; harmonizado na mesma noite) ----------
   Uma cor de destaque só, e pouca: o ouro fica para o hover e para o "Apoiar".
   Marfim para títulos e números, cinza-lilás para o resto, linhas finas. */
.rodape { padding: 2.8rem 0 2rem; }
.rodape-grade { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem 2rem; align-items: start; }
.rodape-marca .marca-rodape { margin-bottom: .8rem; }
.rodape-resumo { margin: 0 0 1rem; font-size: .84rem; line-height: 1.6; color: var(--palco-fraca); max-width: 38ch; }
.rodape-doar { margin: 0; }
.rodape-doar a {
  display: inline-block; padding: .45rem .95rem; border: 1px solid rgba(242, 180, 65, .55); border-radius: 999px;
  color: var(--palco-lampada); font-weight: 600; font-size: .82rem; text-decoration: none;
}
.rodape-doar a:hover { background: rgba(242, 180, 65, .1); }
.rodape-coluna h3 { margin: .35rem 0 .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--palco-tinta); border: 0; }
.rodape-coluna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.rodape-coluna a { color: var(--palco-fraca); text-decoration: none; font-size: .86rem; }
.rodape-coluna a:hover { color: var(--palco-tinta); }
.rodape-numeros {
  list-style: none; margin: 2.2rem 0 0; padding: 1.2rem 0; border-top: 1px solid var(--palco-borda); border-bottom: 1px solid var(--palco-borda);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
.rodape-numeros li { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.rodape-numeros b { color: var(--palco-tinta); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rodape-numeros span { margin-top: .2rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--palco-fraca); }
.rodape-meio { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: 1.4rem; }
.rodape-idiomas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rodape-idiomas a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 1px solid var(--palco-borda); border-radius: 999px; color: var(--palco-fraca); text-decoration: none; font-size: .84rem; }
.rodape-idiomas a:hover { color: var(--palco-tinta); border-color: rgba(244, 241, 233, .35); }
.rodape-idiomas a.ativo { color: var(--palco-tinta); border-color: rgba(244, 241, 233, .35); background: rgba(255, 255, 255, .05); }
.rodape-idiomas .bandeira { font-size: 1.05rem; line-height: 1; }
.rodape-meio .rodape-lojas { margin: 0; justify-content: flex-end; }
.selo-loja { border-color: rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .28); }
.rodape-base { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--palco-borda); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.rodape-base .rodape-fontes, .rodape-base .rodape-assinatura { margin: 0; font-size: .76rem; line-height: 1.7; color: var(--palco-fraca); }
.rodape-assinatura { text-align: right; }
.rodape-assinatura a { color: var(--palco-tinta); font-weight: 600; text-decoration: none; }
.rodape-assinatura a:hover { color: var(--palco-lampada); }
@media (max-width: 960px) {
  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
  .rodape-marca { grid-column: 1 / -1; }
  .rodape-numeros { grid-template-columns: repeat(3, 1fr); row-gap: 1.2rem; }
  .rodape-base { grid-template-columns: 1fr; }
  .rodape-assinatura { text-align: left; }
  .rodape-meio .rodape-lojas { justify-content: flex-start; }
}
@media (max-width: 560px) {
  /* Rodapé no celular (auditoria 17/09/2026): as quatro colunas viravam quatro
     listas empilhadas — 1.700 px só de rodapé. Agora duas colunas, com os
     títulos como sanfona (JS em `_layout.php`): abre no toque, tudo continua lá. */
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
  .rodape-marca { grid-column: 1 / -1; }
  .rodape-coluna h3 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: .55rem 0; cursor: pointer; }
  .rodape-coluna h3::after { content: ''; width: .5rem; height: .5rem; border-right: 2px solid var(--palco-fraca); border-bottom: 2px solid var(--palco-fraca); transform: rotate(45deg); }
  .rodape-coluna.fechada h3::after { transform: rotate(-45deg); }
  .rodape-coluna.fechada ul { display: none; }
  .rodape-coluna ul { padding-bottom: .6rem; }
  .rodape-numeros { grid-template-columns: repeat(2, 1fr); }
  .rodape-numeros li:last-child { grid-column: 1 / -1; }
}

/* Espaços de anúncio vazios não aparecem no celular (17/09/2026): caixa pontilhada
   "Espaço do parceiro 970×90" numa tela de 390 px é ruído. Voltam quando houver anúncio. */
@media (max-width: 640px) {
  .anuncio, .anuncio-vaga, .anuncio-faixa { display: none; }
  .banner-doar { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; padding: .6rem .7rem; gap: .6rem; }
  .banner-doar p { font-size: .8rem; }
}

/* =====================================================================
   MOBILE-FIRST (auditoria 17/09/2026): grades que viravam pilhas de 15–25
   telas no celular passam a ser TRILHOS horizontais com snap — o mesmo
   padrão da `.tira` da home. Nenhum item sai; a pessoa desliza com o dedo.
   Vale só até 640 px; no desktop tudo continua em grade.
   ===================================================================== */
@media (max-width: 640px) {
  .videos, .galeria, .elenco, .recomendados, .franquia, .trailers, .aniversarios, .blog {
    display: grid; grid-auto-flow: column; grid-template-columns: none; gap: .8rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    padding-bottom: .8rem; margin-inline: -1.25rem; padding-inline: 1.25rem;   /* sangra até a borda: a .env tem 1,25rem de cada lado */
  }
  .videos > li, .galeria > li, .elenco > li, .recomendados > li, .franquia > li, .trailers > li, .aniversarios > li, .blog > li { scroll-snap-align: start; }
  .videos    { grid-auto-columns: 78vw; }
  .galeria   { grid-auto-columns: 78vw; }
  .trailers  { grid-auto-columns: 82vw; }
  .blog      { grid-auto-columns: 82vw; }
  .recomendados, .franquia { grid-auto-columns: 132px; }
  .elenco    { grid-auto-columns: 112px; }
  .elenco img, .elenco .sem-foto { width: 96px; height: 96px; }
  .aniversarios { grid-auto-columns: 118px; }
  .aniversarios img, .aniversarios .sem-foto { width: 84px; height: 84px; }
  .aniv-mais { display: flex; align-items: center; justify-content: center; }
}

/* Índices no celular (17/09/2026): duas colunas compactas, fonte mínima legível, "mostrar mais". */
.atalhos-mais-linha { margin: 1rem 0 0; text-align: center; }
@media (max-width: 640px) {
  .indice-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .indice-atalhos a { flex-direction: column; align-items: flex-start; gap: .15rem; padding: .6rem .7rem; }
  .indice-atalhos b { font-size: .9rem; line-height: 1.2; }
  .indice-atalhos small { font-size: .78rem; }
}

/* Índice de listas (17/09/2026): título como botão (sanfona no celular), links com altura de toque. */
.lista-grupo-toggle { all: unset; cursor: default; display: inline-flex; align-items: baseline; gap: .5rem; font: inherit; color: inherit; }
@media (max-width: 640px) {
  .lista-grupo-toggle { cursor: pointer; width: 100%; padding: .55rem 0; }
  .lista-grupo-toggle::after { content: ''; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid var(--tinta-fraca); border-bottom: 2px solid var(--tinta-fraca); transform: rotate(45deg); transition: transform .15s ease; }
  .lista-grupo.fechado .lista-grupo-toggle::after { transform: rotate(-45deg); }
  .lista-grupo.fechado .lista-links { display: none; }
  .lista-links a { display: block; padding: .55rem 0; }
}

/* Ficha da pessoa movida para depois da biografia no celular (17/09/2026). */
.ficha-movida { margin: 1.4rem 0 1.8rem; }
.ficha-movida .lateral-titulo { margin: 0 0 .6rem; }

/* TrailerTV: carregamento em segundo plano, com aviso (17/09/2026). */
.tv-carregando { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: .6rem; color: var(--palco-fraca); font-size: .9rem; background: #0B0A12; z-index: 2; }
.tv-esperando .tv-carregando { display: flex; }
.tv-ligada .tv-carregando { display: none; }
.tv-giro { width: 18px; height: 18px; border: 2px solid rgba(244, 241, 233, .25); border-top-color: var(--palco-lampada); border-radius: 50%; animation: tv-giro .9s linear infinite; }
@keyframes tv-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tv-giro { animation: none; } }

/* ---------- Matérias da redação (17/09/2026) ---------- */
.materia-capa { position: relative; background: var(--palco); color: var(--palco-tinta); padding: 3rem 0 2.2rem; overflow: hidden; }
.materia-capa::before { content: ''; position: absolute; inset: 0; background: var(--capa, none) center / cover no-repeat; opacity: .35; filter: saturate(1.1); }
.materia-capa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,18,.2), rgba(11,10,18,.92)); }
.materia-capa .env { position: relative; z-index: 1; max-width: 860px; }
.materia-capa .migalhas { font-size: .82rem; color: var(--palco-fraca); margin-bottom: 1rem; }
.materia-capa .migalhas a { color: var(--palco-fraca); }
.materia-capa h1 { font-size: clamp(1.7rem, 4.5vw, 2.7rem); line-height: 1.12; margin: 0 0 .7rem; max-width: 22ch; }
.materia-sub { font-size: 1.1rem; line-height: 1.5; color: var(--palco-tinta); opacity: .9; margin: 0 0 1rem; max-width: 60ch; }
.materia-linha { font-size: .84rem; color: var(--palco-fraca); margin: 0; }
.materia-autor { color: var(--palco-lampada); font-weight: 600; }
.materia-corpo { padding: 2rem 0 3rem; }
.materia-intro { font-size: 1.08rem; line-height: 1.7; }
.materia-intro p:first-child::first-letter { font-size: 2.6em; font-weight: 800; float: left; line-height: .9; margin: .06em .35rem 0 0; color: var(--realce); }
.materia-itens { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: item; }
.materia-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--borda); }
.materia-cartaz img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.materia-texto h2 { margin: 0 0 .35rem; font-size: 1.35rem; line-height: 1.2; }
.materia-num { display: inline-block; min-width: 1.6em; padding: .1em .35em; margin-right: .35rem; border-radius: 6px; background: var(--realce); color: #fff; font-size: .8em; text-align: center; }
.materia-meta { margin: 0 0 .8rem; font-size: .88rem; color: var(--tinta-fraca); }
.materia-meta a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.materia-texto p { line-height: 1.65; }
.materia-acoes { margin: .8rem 0 0; }
.materia-acoes .botao { padding: .5rem .9rem; font-size: .86rem; }
.materia-fecho { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--borda); font-size: 1.05rem; line-height: 1.65; }
.materia-tags { margin-top: 1.4rem; }
.materia-mais { margin-top: 2.6rem; }
.materia-mais h3 { margin-bottom: 1rem; }
.materia-rotulo { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--realce); font-weight: 700; margin: .5rem 0 .2rem; }
.materias-indice .blog small { display: block; margin-top: .4rem; font-size: .76rem; color: var(--tinta-fraca); }
.paginacao { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 2rem 0 0; }
.paginacao a { font-size: 1.3rem; text-decoration: none; }
@media (max-width: 640px) {
  .materia-item { grid-template-columns: 96px minmax(0, 1fr); gap: .9rem; }
  .materia-texto h2 { font-size: 1.15rem; }
  .materias-indice .blog, .materia-mais .blog { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.materia-nota { color: var(--palco-lampada); font-weight: 700; }

/* Matéria de um filme (18/09/2026): trailer no clique, seções, pessoas, galeria, onde assistir. */
.materia-trailer { margin: 1.6rem 0; }
.materia-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; }
.materia-play img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.materia-play-ico { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; color: #fff; }
.materia-play-ico::before { content: ''; position: absolute; width: 84px; height: 84px; border-radius: 50%; background: rgba(242, 180, 65, .92); z-index: -1; }
.materia-trailer iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.materia-trailer figcaption { margin-top: .5rem; font-size: .8rem; color: var(--tinta-fraca); }
.materia-secao { margin-top: 2rem; }
.materia-secao h2 { font-size: 1.45rem; margin: 0 0 .6rem; line-height: 1.2; }
.materia-secao p { line-height: 1.7; }
.materia-pessoas { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1rem .8rem; }
.materia-pessoas a { display: block; text-align: center; color: inherit; text-decoration: none; }
.materia-pessoas img, .materia-pessoas .sem-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--fundo-2); display: block; margin: 0 auto .4rem; }
.materia-pessoas b { display: block; font-size: .86rem; line-height: 1.2; }
.materia-pessoas small { color: var(--tinta-fraca); font-size: .76rem; }
.materia-galeria { margin-top: 1rem; }
.materia-onde { margin-top: 1rem; }
.materia-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.materia-fontes { margin-top: 1.6rem; font-size: .84rem; color: var(--tinta-fraca); }
.materia-fontes summary { cursor: pointer; font-weight: 600; }
.materia-fontes ul { margin: .5rem 0 0; padding-left: 1.2rem; }
@media (max-width: 640px) { .materia-pessoas { grid-template-columns: repeat(3, 1fr); } .materia-galeria { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* Compartilhar (18/09/2026): matérias e destaques, no alto e no fim. Ícones inline,
   sem script de terceiros. Cores oficiais de cada rede (dono: "vai chamar mais atenção"). */
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.6rem 0 0; }
.compartilhar > span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-fraca); margin-right: .3rem; }
.compartilhar a, .compartilhar button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fundo-2); color: var(--tinta); cursor: pointer; text-decoration: none; padding: 0; transition: transform .15s, filter .15s; }
.compartilhar a:hover, .compartilhar button:hover { transform: translateY(-2px); filter: brightness(1.12); }
.compartilhar svg { width: 18px; height: 18px; fill: currentColor; }
.compartilhar .cp-whatsapp { background: #25d366; color: #fff; }
.compartilhar .cp-facebook { background: #1877f2; color: #fff; }
.compartilhar .cp-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; }
.compartilhar .cp-telegram { background: #26a5e4; color: #fff; }
.compartilhar .cp-pinterest { background: #bd081c; color: #fff; }
.compartilhar .cp-linkedin { background: #0a66c2; color: #fff; }
.compartilhar .cp-x { background: #000; color: #fff; }
.compartilhar .cp-threads { background: #000; color: #fff; }
.compartilhar .cp-email { background: #6b7280; color: #fff; }
.compartilhar .cp-link { background: var(--realce); color: #fff; }
.compartilhar .copiado { background: #2e9e5b; }
.compartilhar-topo { margin: 1.1rem 0 0; }
.compartilhar-topo a, .compartilhar-topo button { width: 36px; height: 36px; }
.compartilhar-topo svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .compartilhar > span { flex-basis: 100%; margin: 0 0 .2rem; } .compartilhar a, .compartilhar button { width: 38px; height: 38px; } .compartilhar-topo a, .compartilhar-topo button { width: 34px; height: 34px; } }

/* Citações nas matérias (18/09/2026): mesmo traço dos destaques. */
.materia-corpo .ref-interna { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--realce) 45%, transparent); transition: color .14s ease, border-color .14s ease; }
.materia-corpo .ref-interna:hover { color: var(--realce); border-bottom-color: var(--realce); }

/* Lupa do menu e busca em tela cheia (18/09/2026): a mesma caixa da home, por cima de tudo. */
.btn-busca { margin-right: .35rem; }
.busca-tela { position: fixed; inset: 0; z-index: 90; background: rgba(8, 7, 14, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: max(10vh, calc(env(safe-area-inset-top, 0px) + 4rem)) 1rem 1rem; overflow-y: auto; }
.busca-tela-caixa { position: relative; max-width: 720px; margin: 0 auto; }
.busca-tela .busca { max-width: none; }
.busca-tela .busca-campo { background: rgba(255, 255, 255, .1); border-color: var(--realce); }
.busca-tela .busca-resultado { position: static; margin-top: .6rem; max-height: none; }
.busca-tela-fechar { position: absolute; right: 0; top: -3rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.busca-tela-fechar:hover { background: rgba(255,255,255,.12); }
html.busca-aberta { overflow: hidden; }
@media (max-width: 640px) { .busca-tela { padding-top: calc(env(safe-area-inset-top, 0px) + 4.2rem); } .busca-tela .busca-ir span { display: none; } }
/* "Estreia em dd/mm" (18/09/2026): o lugar do "Já assisti" antes do lançamento — sem clique. */
.btn-assistido.em-breve { opacity: .75; cursor: default; pointer-events: none; }

/* "Me lembre de assistir" (18/09/2026): a watchlist do app na ficha. Quatro estados, como no app. */
.btn-lembrar { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--palco-borda); background: var(--realce); color: #1a1408; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.15; text-align: left; }
.btn-lembrar svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-lembrar .ico-ok { display: none; }
.btn-lembrar[aria-pressed="true"] .ico-ok { display: block; }
.btn-lembrar span { display: flex; flex-direction: column; }
.btn-lembrar small { font-weight: 400; font-size: .72rem; opacity: .85; }
.btn-lembrar[data-estado="estreia"], .btn-lembrar[data-estado="aguardando"] { background: transparent; color: var(--palco-tinta); border-color: #7c5cff; }
.btn-lembrar[data-estado="disponivel"] { background: #1f8f5a; color: #fff; border-color: #1f8f5a; }
.btn-lembrar:disabled { opacity: .6; cursor: progress; }

/* Modal da newsletter (18/09/2026): dois painéis — slide de capas à esquerda, formulário à direita. */
.nl-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; background: rgba(8, 7, 14, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: nl-fundo .3s ease; }
html.nl-aberto { overflow: hidden; }
@keyframes nl-fundo { from { opacity: 0; } }
@keyframes nl-sobe { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.nl-caixa { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); width: min(860px, 100%); max-height: min(92vh, 720px); background: var(--fundo); color: var(--tinta); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: nl-sobe .35s cubic-bezier(.2, .8, .2, 1); }
.nl-fechar { position: absolute; top: .6rem; right: .7rem; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .35); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.nl-fechar:hover { background: rgba(0, 0, 0, .6); }
.nl-capas { position: relative; background: #0B0A12; min-height: 420px; }
.nl-capa { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.nl-capa.ativa { opacity: 1; }
.nl-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-capa figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.2rem 1.1rem 1.4rem; background: linear-gradient(180deg, rgba(11,10,18,0), rgba(11,10,18,.92)); color: #fff; display: flex; flex-direction: column; gap: .15rem; }
.nl-capa figcaption span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #F2B441; font-weight: 700; }
.nl-capa figcaption b { font-size: 1.05rem; line-height: 1.2; }
.nl-capa figcaption small { color: #b9b3cc; font-size: .8rem; }
.nl-pontos { position: absolute; top: .9rem; left: 1rem; display: flex; gap: .35rem; z-index: 2; }
.nl-pontos i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); transition: background .4s; }
.nl-pontos i.ativo { background: #F2B441; }
.nl-form { padding: 2rem 1.8rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; }
.nl-chapeu { margin: 0 0 .4rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--realce); font-weight: 800; }
.nl-form h2 { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.15; }
.nl-sub { margin: 0 0 .9rem; color: var(--tinta-fraca); line-height: 1.55; font-size: .95rem; }
.nl-lista { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .9rem; }
.nl-lista li::before { content: '★ '; color: var(--realce); }
.nl-campo { display: block; margin-bottom: .7rem; }
.nl-campo span { display: block; font-size: .78rem; font-weight: 700; margin-bottom: .25rem; color: var(--tinta-fraca); }
.nl-campo input { width: 100%; box-sizing: border-box; padding: .7rem .85rem; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo-2); color: var(--tinta); font: inherit; }
.nl-campo input:focus { outline: 2px solid var(--realce); outline-offset: 1px; }
.nl-aceito { display: flex; gap: .55rem; align-items: flex-start; font-size: .8rem; color: var(--tinta-fraca); margin: .3rem 0 .9rem; line-height: 1.45; }
.nl-aceito input { margin-top: .2rem; accent-color: var(--realce); flex: 0 0 auto; }
.nl-aceito a { color: var(--realce); }
.nl-erro { margin: 0 0 .7rem; padding: .55rem .8rem; border-radius: 8px; background: rgba(224, 68, 87, .12); color: #c0303f; font-size: .85rem; }
.nl-enviar { width: 100%; padding: .9rem 1rem; font-size: 1.02rem; font-weight: 800; border-radius: 12px; background: var(--realce); color: #1a1408; border: 0; cursor: pointer; }
.nl-enviar:hover { filter: brightness(1.06); }
.nl-enviar:disabled { opacity: .6; cursor: progress; }
.nl-miudo { margin: .6rem 0 0; font-size: .74rem; color: var(--tinta-fraca); line-height: 1.45; }
.nl-nunca { margin-top: auto; padding-top: 1rem; background: none; border: 0; color: var(--tinta-fraca); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; align-self: center; }
.nl-feito { text-align: center; padding: 1rem 0; animation: nl-sobe .35s ease; }
.nl-feito h2 { font-size: 1.4rem; margin: .3rem 0 .6rem; }
.nl-feito p { color: var(--tinta-fraca); line-height: 1.55; }
.nl-selo { width: 62px; height: 62px; margin: 0 auto .5rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; background: rgba(31, 143, 90, .14); color: #1f8f5a; }
.nl-selo.erro { background: rgba(224, 68, 87, .14); color: #c0303f; }
.nl-redes { margin: 1rem 0 .4rem; font-weight: 700; color: var(--tinta); }
.nl-redes-botoes { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 0; }
.nl-rede { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; }
.nl-rede.telegram { background: #26a5e4; }
.nl-rede.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.nl-pagina .nl-selo { width: 72px; height: 72px; font-size: 2rem; }
.nl-pagina .nl-redes a { color: var(--realce); font-weight: 700; }
@media (max-width: 720px) {
  .nl-caixa { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .nl-capas { min-height: 200px; height: 220px; }
  .nl-capa figcaption { padding: 2rem 1rem 1rem; }
  .nl-form { padding: 1.3rem 1.1rem 1rem; }
  .nl-sub { display: none; }
}

/* XP no menu + chip animado (18/09/2026). */
.xp-topo-item { display: flex; align-items: center; }
.xp-topo { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--palco-borda); color: var(--palco-tinta); text-decoration: none; font-size: .82rem; font-weight: 700; line-height: 1; }
.xp-topo svg { width: 14px; height: 14px; fill: #F2B441; }
.xp-topo span { color: var(--palco-fraca); font-weight: 600; font-size: .7rem; }
.xp-topo:hover { border-color: #F2B441; }
.xp-topo.pulsa { animation: xp-pulsa .6s ease; }
@keyframes xp-pulsa { 30% { transform: scale(1.12); border-color: #F2B441; box-shadow: 0 0 0 6px rgba(242,180,65,.18); } }
.xp-chip { position: absolute; z-index: 120; transform: translate(-50%, -100%); padding: .35rem .7rem; border-radius: 999px; font-weight: 800; font-size: .9rem; color: #1a1408; background: #F2B441; box-shadow: 0 8px 22px rgba(0,0,0,.25); pointer-events: none; animation: xp-sobe 1.5s cubic-bezier(.2,.8,.2,1) forwards; white-space: nowrap; }
.xp-chip.menos { background: #E04457; color: #fff; }
@keyframes xp-sobe { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.05); } 70% { opacity: 1; transform: translate(-50%, -160%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -200%) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .xp-chip { animation: none; opacity: 1; transform: translate(-50%, -140%); } }
@media (max-width: 900px) { .xp-topo { padding: .28rem .55rem; } .xp-topo span { display: none; } }

/* Sobre o CineQuiz — posicionamento (18/09/2026). Herda o tema; a marca entra em ouro. */
.sobre-placar { margin: 1.4rem 0 2.6rem; }
.sobre-frase { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 600; line-height: 1.4; padding-top: 1.2rem; border-top: 1px solid var(--borda); max-width: 36rem; }
.sobre-numeros { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.6rem; }
@media (min-width: 640px) { .sobre-numeros { grid-template-columns: repeat(3, 1fr); } }
.sobre-numeros li { border-top: 1px solid var(--borda); padding-top: .7rem; }
.sobre-numeros b { display: block; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1; letter-spacing: -.01em; }
.sobre-numeros li.heroi b { color: var(--realce); font-size: clamp(1.8rem, 4.2vw, 2.6rem); }
.sobre-numeros span { font-size: .84rem; color: var(--tinta-fraca); }
.sobre-secao .titulo-secao { font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.05; max-width: 22ch; text-wrap: balance; }
.sobre-lede { font-size: clamp(1.05rem, .95rem + .45vw, 1.25rem); font-weight: 500; line-height: 1.45; }
.sobre-beat { margin-top: 1.6rem; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800; line-height: 1.1; color: var(--realce); max-width: 24ch; }
.sobre-coroa { background: var(--fundo-2); border-radius: 16px; padding: 1.6rem clamp(1rem, 3vw, 2rem) 1.8rem; }
.sobre-big { font-size: clamp(1.9rem, 6vw, 3.4rem); font-weight: 900; line-height: 1; color: var(--realce); margin: 0 0 .6rem; letter-spacing: -.02em; }
.sobre-prova { font-weight: 700; font-size: clamp(1rem, 2vw, 1.25rem); margin: 0 0 1.2rem; text-transform: uppercase; letter-spacing: .02em; }
.sobre-struck { font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 800; line-height: 1.05; color: var(--tinta-fraca); text-decoration: line-through; text-decoration-color: var(--realce); text-decoration-thickness: 3px; margin: 0 0 1rem; max-width: 18ch; }
.sobre-motivos { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.sobre-motivos li { border-top: 1px solid var(--borda); padding: 1.4rem 0; display: grid; gap: .5rem 2rem; }
@media (min-width: 720px) { .sobre-motivos li { grid-template-columns: 11rem 1fr; align-items: start; } }
.sobre-motivos .cat { margin: 0; font-style: italic; color: var(--realce); font-weight: 600; }
.sobre-motivos .claim { margin: 0 0 .5rem; font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 800; line-height: 1.1; }
.sobre-motivos .proof { margin: 0; color: var(--tinta-fraca); }
.sobre-voz { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem 2rem; }
@media (min-width: 720px) { .sobre-voz { grid-template-columns: 1fr 1fr; } }
.sobre-voz li { border-top: 1px solid var(--borda); padding-top: .8rem; }
.sobre-voz b { display: block; margin-bottom: .2rem; }
.sobre-voz span { color: var(--tinta-fraca); }
.sobre-fecho { margin: 3rem 0 2.5rem; padding: 2rem clamp(1rem, 3vw, 2rem); border-radius: 16px; background: var(--palco); color: var(--palco-tinta); text-align: center; }
.sobre-fecho-frase { font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.05; margin: 0 0 1.2rem; letter-spacing: -.01em; }
.sobre-fecho .botao { background: var(--realce); color: #1a1408; }

/* Estatueta dourada por categoria no "Sobre" (18/09/2026). */
.sobre-motivos .cat-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.sobre-motivos .estatueta { width: 58px; height: 108px; filter: drop-shadow(0 6px 10px rgba(242, 180, 65, .28)); }
@media (max-width: 719px) { .sobre-motivos .cat-bloco { flex-direction: row; align-items: center; gap: .8rem; } .sobre-motivos .estatueta { width: 30px; height: 56px; } }

/* Página de confirmação da newsletter (18/09/2026): recibo + porta para o conteúdo. */
.nl-pagina .nl-abertura { text-align: center; max-width: 640px; margin: 0 auto 1.5rem; }
.nl-pagina .nl-abertura .nl-selo { margin: 0 auto .8rem; }
.nl-pagina .nl-redes { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; justify-content: center; margin-top: 1.2rem; }
.nl-pagina .nl-redes .nl-rede { color: #fff; }
.nl-caminhos ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.nl-caminhos a { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--borda); color: inherit; text-decoration: none; font-weight: 700; }
.nl-caminhos a:hover { border-color: var(--realce); transform: translateY(-1px); }
.nl-caminhos span { font-size: 1.3rem; }
.nl-materias { margin-top: 1rem; }

/* Turnstile (18/09/2026) */
.cf-turnstile { margin: .6rem 0 .9rem; min-height: 65px; }
.nl-form .cf-turnstile { margin: .2rem 0 .7rem; }

/* Telefone com DDI e bandeira (18/09/2026) */
.campo-fone .rotulo { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.fone-linha { display: flex; gap: .5rem; }
.fone-ddi select { height: 100%; min-height: 48px; max-width: 190px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--tinta); padding: 0 .6rem; font: inherit; }
.fone-linha input { flex: 1; min-width: 0; }

/* PESSOA SEM FOTO MOSTRA O LOGOTIPO (dono, 19/09/2026: "não deixe assim, use o
   nosso logotipo no lugar para não ficar quebrado"). NO FIM DA FOLHA e com os
   seletores de cada bloco, porque `.elenco .sem-foto`, `.materia-pessoas
   .sem-foto` e afins definem `background` próprio com mais especificidade e
   venciam a regra genérica (medido: círculo cinza sem logotipo). */
.sem-foto, .elenco .sem-foto, .indice-pessoas .sem-foto, .pessoa-foto .sem-foto,
.pessoa-lateral .pessoa-foto .sem-foto, .materia-pessoas .sem-foto,
.aniversarios .sem-foto, .tira-pessoas .sem-foto {
  display: block; border-radius: 50%;
  background: #0b0b0f url('/assets/img/logo-cinequiz.webp') center / 62% no-repeat;
  border: 1px solid var(--borda);
}
.elenco .sem-foto, .indice-pessoas .sem-foto { aspect-ratio: 1 / 1; width: 100%; height: auto; }
/* Página da pessoa: a moldura é 2:3 com cantos suaves, não um círculo (dono, 19/09/2026:
   "não pode ficar assim o espaço da logo"); logotipo menor, centrado. */
.pessoa-foto .sem-foto, .pessoa-lateral .pessoa-foto .sem-foto {
  aspect-ratio: 2 / 3; width: 100%; height: auto; border-radius: 12px;
  background-size: 46%; background-position: center;
}

/* Ficha removida / inexistente (19/09/2026): mensagem e botão no centro. */
.nao-encontrado { text-align: center; padding: 4rem 1rem 5rem; }
.nao-encontrado .aviso { font-size: 1.1rem; margin: 0 0 1.6rem; }

/* Índice de diretores (19/09/2026): busca, ordem e contagem numa linha. */
.dir-busca { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.4rem; }
.dir-busca .dir-campo { flex: 1 1 260px; margin: 0; }
.dir-busca .dir-ordem { flex: 0 0 auto; margin: 0; }
.dir-busca input, .dir-busca select { margin: 0; padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--fundo-2); color: var(--tinta); font: inherit; width: 100%; }
.dir-busca .paginacao-conta { margin-left: auto; }

/* Onde assistir: o item inteiro é link para o serviço (19/09/2026). */
.onde-lista a.onde-link { display: flex; align-items: center; gap: .7rem; width: 100%; color: inherit; text-decoration: none; }
.onde-lista a.onde-link:hover .onde-nome, .onde-lista a.onde-link:focus-visible .onde-nome { text-decoration: underline; }
.onde-lista .onde-seta { margin-left: auto; color: var(--tinta-fraca); }