/*
Theme Name: Rigel
Description: Tema de filmes e séries. Sem jQuery, sem bibliotecas de carrossel e sem fonte externa.
Version: 1.0
Requires at least: 5.5
Requires PHP: 7.4
Text Domain: rigel
*/

/* ==========================================================================
   VARIAVEIS

   Paleta herdada do FilmesGratis: ardosia azulada com vermelho na marca.
   A fonte vem da pilha do sistema — o original puxava Open Sans do Google,
   uma requisicao bloqueante para uma fonte que quase ninguem distingue de
   uma sem serifa comum.
   ========================================================================== */

:root {
--rigel-bg:       #0f1c16;
--rigel-surf:     #16261e;
--rigel-surf-2:   #1c3226;
--rigel-topo:     #101f18;
--rigel-borda:    #244534;
--rigel-borda-2:  #2f5c44;
--rigel-txt:      #ffffff;
--rigel-txt-2:    #a3bfae;
--rigel-marca:    #00a651;
--rigel-marca-2:  #067a3c;
--rigel-marca-3:  #80ff30;
--rigel-imdb:     #f5c518;

	--rigel-larg:     1180px;
  --rigel-raio:     8px;
  --rigel-topo-h:   68px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--rigel-bg);
  color: var(--rigel-txt);
  font: 400 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- barra de rolagem ----
   A padrao do Windows e uma faixa clara que corta o tema escuro ao meio.
   O Firefox le scrollbar-width/color; o resto usa ::-webkit-scrollbar.
   As duas declaracoes coexistem: cada navegador ignora a que nao conhece. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rigel-borda-2) var(--rigel-bg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: var(--rigel-bg); }

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--rigel-borda-2);
  /* borda na cor do fundo: e ela que afina o puxador sem precisar
     estreitar a area de clique */
  border: 2px solid var(--rigel-bg);
}

::-webkit-scrollbar-thumb:hover { background: var(--rigel-marca); }

::-webkit-scrollbar-corner { background: var(--rigel-bg); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3 { margin: 0; line-height: 1.2; }

.rigel-wrap {
  width: 100%;
  max-width: var(--rigel-larg);
  margin: 0 auto;
  padding: 0 20px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Atalho de teclado: fica fora da tela ate receber foco */
.rigel-pular {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--rigel-marca);
  color: #fff;
}

.rigel-pular:focus { left: 12px; top: 12px; }

#conteudo { display: block; padding-bottom: 40px; }


/* ==========================================================================
   CABECALHO
   ========================================================================== */

.rigel-topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--rigel-topo);
  border-bottom: 1px solid var(--rigel-borda);
  transition: box-shadow .2s ease;
}

body.rigel-rolou .rigel-topo { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }

/* Barra do admin: o topo pregado precisa descer junto */
.admin-bar .rigel-topo { top: 32px; }
@media (max-width: 782px) { .admin-bar .rigel-topo { top: 46px; } }

/* Tres colunas com as laterais iguais: marca na esquerda, busca na
   direita, menu no centro real da barra — nao no centro do que sobra
   depois dos dois. Com as laterais iguais, abrir a busca tambem nao
   empurra o menu para o lado. */
.rigel-barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  height: var(--rigel-topo-h);
}

.rigel-esq {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-self: start;
}

/* Botao de categorias e menu andam juntos no centro. Sem este agrupador a
   grade trataria os dois como colunas separadas e o menu sairia do meio. */
.rigel-centro {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  justify-self: center;
}

.rigel-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 6px;
  background: transparent;
  color: var(--rigel-txt);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: .18s ease;
}

.rigel-cat svg { color: var(--rigel-marca); }

.rigel-cat:hover {
  background: var(--rigel-surf-2);
  border-color: var(--rigel-marca);
}
.rigel-barra > .rigel-busca { justify-self: end; }

.rigel-logo {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  white-space: nowrap;
  color: var(--rigel-txt);
}

.rigel-logo b { color: var(--rigel-marca); font-weight: 800; }

.rigel-nav { min-width: 0; }

.rigel-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rigel-menu > li { position: relative; }

.rigel-menu > li > a {
  display: block;
  padding: 9px 13px;
  border-radius: 6px;
  /* caixa alta: fonte um ponto menor e um respiro entre as letras, senao
     o texto em maiuscula fica pesado e mais largo que o normal */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--rigel-txt-2);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}

.rigel-menu > li > a:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--rigel-txt);
}

/* Item da secao aberta em vermelho.
   As quatro classes cobrem os casos que o WordPress marca: o item exato,
   o pai de um submenu aberto, o ancestral mais acima, e — nas paginas de
   post — o item que aponta para a categoria daquele post. Sem a ultima, o
   menu ficaria apagado justamente dentro do filme. */
.rigel-menu > li.current-menu-item > a,
.rigel-menu > li.current-menu-parent > a,
.rigel-menu > li.current-menu-ancestor > a,
.rigel-menu > li.current-post-ancestor > a {
  background: var(--rigel-marca);
  color: #fff;
}

/* submenu */
.rigel-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin: 6px 0 0;
  padding: 6px;
  border: 1px solid var(--rigel-borda);
  border-radius: var(--rigel-raio);
  background: var(--rigel-surf);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: .18s ease;
}

.rigel-menu > li:hover .sub-menu,
.rigel-menu > li:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.rigel-menu .sub-menu a {
  display: block;
  padding: 8px 11px;
  border-radius: 5px;
  font-size: 13.5px;
  color: var(--rigel-txt-2);
}

.rigel-menu .sub-menu a:hover { background: var(--rigel-marca); color: #fff; }

/* busca */
.rigel-busca {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 260px;
  max-width: 40vw;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 999px;
  background: var(--rigel-surf);
  overflow: hidden;
  transition: border-color .18s ease;
}

.rigel-busca:focus-within { border-color: var(--rigel-marca); }

.rigel-busca input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: var(--rigel-txt);
  font-size: 13.5px;
  outline: none;
}

.rigel-busca input::placeholder { color: #6f7c90; }

.rigel-busca button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 9px 14px 9px 8px;
  border: 0;
  background: transparent;
  color: var(--rigel-txt-2);
  cursor: pointer;
}

.rigel-busca button:hover { color: var(--rigel-marca); }

/* hamburguer: so no celular */
.rigel-hamb {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 8px;
  background: transparent;
  color: var(--rigel-txt);
  cursor: pointer;
}


/* ==========================================================================
   GAVETA
   ========================================================================== */

.rigel-sombra {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  transition: opacity .26s ease;
}

.rigel-sombra.visivel { opacity: 1; }

.rigel-gaveta {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  width: min(310px, 84vw);
  height: 100%;
  padding: 16px;
  background: var(--rigel-surf);
  border-right: 1px solid var(--rigel-borda);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .26s ease;
}

.rigel-gaveta.aberta { transform: translateX(0); }

/* a gaveta e mais clara que a pagina, entao a trilha dela tambem */
.rigel-gaveta { scrollbar-color: var(--rigel-borda-2) var(--rigel-surf); }
.rigel-gaveta::-webkit-scrollbar-track { background: var(--rigel-surf); }
.rigel-gaveta::-webkit-scrollbar-thumb { border-color: var(--rigel-surf); }

body.rigel-travado { overflow: hidden; }

.rigel-gaveta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rigel-borda);
}

.rigel-fechar {
  width: 34px; height: 34px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 8px;
  background: transparent;
  color: var(--rigel-txt);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.rigel-fechar:hover { border-color: var(--rigel-marca); color: var(--rigel-marca); }

/* A gaveta guarda as duas listas e mostra a que o botao pediu. Escondida
   com display, e nao com visibility: o que nao aparece tambem nao entra na
   ordem de tabulacao nem e lido em voz alta. */
.rigel-gaveta[data-menu="principal"] .rigel-gaveta-menu[data-menu="categorias"],
.rigel-gaveta[data-menu="categorias"] .rigel-gaveta-menu[data-menu="principal"] { display: none; }

.rigel-menu-mobile,
.rigel-menu-mobile .sub-menu { margin: 0; padding: 0; list-style: none; }

.rigel-menu-mobile a {
  display: block;
  padding: 11px 10px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rigel-txt-2);
}

.rigel-menu-mobile a:hover { background: var(--rigel-surf-2); color: var(--rigel-txt); }

.rigel-menu-mobile > li.current-menu-item > a,
.rigel-menu-mobile > li.current-menu-parent > a,
.rigel-menu-mobile > li.current-menu-ancestor > a,
.rigel-menu-mobile > li.current-post-ancestor > a {
  background: var(--rigel-marca);
  color: #fff;
}
.rigel-menu-mobile .sub-menu a { padding-left: 24px; font-size: 13.5px; font-weight: 500; }


/* ==========================================================================
   SLIDER DOS MAIS VISTOS

   Trilho com scroll-snap. O avanco automatico e um scrollTo — no celular a
   rolagem por toque ja vem do navegador, sem uma linha de JavaScript.
   ========================================================================== */

.rigel-slider { margin: 24px 0 8px; }

.rigel-slider-caixa {
  position: relative;
  border: 1px solid var(--rigel-borda);
  border-radius: var(--rigel-raio);
  background: var(--rigel-surf);
  overflow: hidden;
}

.rigel-slider-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rigel-slider-trilho::-webkit-scrollbar { display: none; }

.rigel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 26px;
  padding: 26px 30px;
  align-items: center;
}

.rigel-slide-capa {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
  background: var(--rigel-bg);
}

.rigel-slide-capa img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

.rigel-slide-texto { min-width: 0; }

.rigel-slide-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--rigel-marca);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rigel-slide-texto h2 {
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.rigel-slide-texto h2 a:hover { color: var(--rigel-marca); }

.rigel-slide-dados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--rigel-txt-2);
}

.rigel-slide-dados > span:not(.rigel-selo-imdb) {
  padding: 4px 10px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 999px;
}

.rigel-slide-sinopse {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: #c6cddb;
}

/* ---- setas ---- */
.rigel-slider-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}

.rigel-slider-seta.anterior { left: 12px; }
.rigel-slider-seta.proximo  { right: 12px; }

/* aparecem no hover e sempre que receberem foco pelo teclado */
.rigel-slider-caixa:hover .rigel-slider-seta,
.rigel-slider-seta:focus-visible { opacity: 1; }

.rigel-slider-seta:hover { background: var(--rigel-marca); border-color: var(--rigel-marca); }

/* ---- pontos ---- */
.rigel-slider-pontos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

.rigel-slider-pontos button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rigel-borda-2);
  cursor: pointer;
  transition: .2s ease;
}

.rigel-slider-pontos button[aria-selected="true"] {
  width: 22px;
  border-radius: 999px;
  background: var(--rigel-marca);
}

@media (max-width: 780px) {
  .rigel-slide {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }
  .rigel-slide-texto h2 { font-size: 18px; }
  /* no toque as setas nao servem: a rolagem ja e por arrasto */
  .rigel-slider-seta { display: none; }
}

@media (max-width: 460px) {
  .rigel-slide-sinopse { display: none; }
  .rigel-slide { grid-template-columns: 104px minmax(0, 1fr); }
}


/* ==========================================================================
   SECOES E GRADE
   ========================================================================== */

.rigel-secao-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 18px;
}

.rigel-secao-topo h1,
.rigel-secao-topo h2 {
  flex: 1 1 auto;
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--rigel-txt);
}

/* filete vermelho antes do titulo, marca do tema de origem */
.rigel-secao-topo h1::before,
.rigel-secao-topo h2::before {
  content: "";
  display: inline-block;
  width: 4px; height: 17px;
  margin-right: 11px;
  border-radius: 2px;
  background: var(--rigel-marca);
  vertical-align: -2px;
}

.rigel-grade {
  display: grid;
  /* minmax(0, 1fr) e nao 1fr: o segundo nao encolhe abaixo do conteudo, e
     um titulo longo estouraria a coluna para fora do container */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 26px 16px;
  margin-bottom: 30px;
}

.rigel-descricao { margin: -6px 0 22px; color: var(--rigel-txt-2); }
.rigel-vazio { padding: 40px 0; text-align: center; color: var(--rigel-txt-2); }


/* ---- cartao ---- */

.rigel-card { position: relative; }

.rigel-card-capa {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--rigel-surf);
  line-height: 0;
}

.rigel-card-capa img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform .3s ease, opacity .2s ease;
}

.rigel-card:hover .rigel-card-capa img { transform: scale(1.04); opacity: .85; }

.rigel-selo,
.rigel-nota {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

/* na direita: na esquerda ele cobria o rosto do cartaz, que costuma ficar
   no terco superior esquerdo */
.rigel-selo {
  top: 6px; right: 6px;
  background: var(--rigel-marca);
  color: #fff;
}

.rigel-nota {
  bottom: 6px; left: 6px;
  background: rgba(0, 0, 0, .82);
  color: #fff;
}

.rigel-nota b { color: var(--rigel-imdb); }

.rigel-card-titulo {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

/* Uma linha, cortando com reticencias. O title do link guarda o nome
   inteiro no passar do mouse, e o alt da capa guarda para leitor de tela. */
.rigel-card-titulo a {
  display: block;
  color: var(--rigel-txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rigel-card:hover .rigel-card-titulo a { color: var(--rigel-marca); }

.rigel-card-ano {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--rigel-txt-2);
}


/* ---- carrossel ----
   Rolagem nativa com scroll-snap. No toque ela ja vem de graca; as setas
   sao um scrollBy. O tema de origem carregava o slick para isto. */

.rigel-destaques { padding-bottom: 6px; }

.rigel-setas { flex: 0 0 auto; display: flex; gap: 7px; }

.rigel-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 50%;
  background: transparent;
  color: var(--rigel-txt-2);
  cursor: pointer;
  transition: .18s ease;
}

.rigel-seta:hover:not(:disabled) {
  background: var(--rigel-marca);
  border-color: var(--rigel-marca);
  color: #fff;
}

.rigel-seta:disabled { opacity: .3; cursor: default; }

.rigel-trilho {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* a barra de rolagem entre os cartoes suja o bloco; o toque e as setas
     continuam funcionando sem ela */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}

.rigel-trilho::-webkit-scrollbar { display: none; }

.rigel-trilho-item {
  flex: 0 0 auto;
  width: calc((100% - 16px * 6) / 7);
  min-width: 132px;
  scroll-snap-align: start;
}


/* ==========================================================================
   PAGINA DO FILME
   ========================================================================== */

.rigel-cabeca {
  position: relative;
  padding: 26px 0 22px;
  margin-bottom: 26px;
  background: var(--rigel-surf);
  border-bottom: 1px solid var(--rigel-borda);
}


.rigel-cabeca h1 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 12px;
}

.rigel-cats { font-size: 13px; color: var(--rigel-txt-2); }
.rigel-cats a:hover { color: var(--rigel-marca); }

/* Duas colunas: a capa a esquerda, todo o resto a direita. */
.rigel-colunas {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.rigel-col-esq { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.rigel-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Sinopse e trailer na mesma linha.
   Sem align-items a grade estica as duas caixas ate a altura da mais alta,
   que e o que faz elas terminarem juntas — o download embaixo encosta numa
   linha reta em vez de num degrau. */
.rigel-duplo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
}

.rigel-duplo > .rigel-caixa { min-width: 0; }

/* Sem trailer a sinopse toma a linha inteira: metade vazia ao lado dela
   pareceria bloco faltando, nao espaco de proposito. */
.rigel-duplo.sem-trailer { grid-template-columns: minmax(0, 1fr); }

.rigel-capa-caixa {
  position: relative;
  border: 1px solid var(--rigel-borda);
  border-radius: var(--rigel-raio);
  overflow: hidden;
  background: var(--rigel-surf);
}

.rigel-capa {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* A ficha do pe encostava na capa: a capa estica ate o fim exato da grade
   e o bloco vinha logo em seguida, sem margem. A folga aparente sob os
   downloads era so a sobra da coluna da direita, nao espacamento. Aqui a
   distancia e a mesma que separa as colunas. */
.rigel-ficha-pe { margin-top: 26px; }

/* ---- capa terminando junto com os downloads ----

   So vale quando a ficha desceu para o pe: ai a esquerda tem pouca coisa e
   a direita e quem manda na altura da linha.

   O truque esta em tirar a imagem do fluxo. Com ela dentro, a altura dela
   entrava na conta da altura da linha, a linha crescia junto e as duas
   nunca se encontravam. Solta em absolute, a caixa nao tem altura propria,
   estica ate o que a direita definir, e a imagem preenche por cima com
   object-fit: cover. */
.rigel-colunas.ficha-embaixo { align-items: stretch; }

.rigel-colunas.ficha-embaixo .rigel-capa-caixa {
  flex: 1 1 auto;
  /* piso para o poster nao virar uma tira quando a direita for curta */
  min-height: 300px;
}

.rigel-colunas.ficha-embaixo .rigel-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.rigel-caixa {
  padding: 18px;
  border: 1px solid var(--rigel-borda);
  border-radius: var(--rigel-raio);
  background: var(--rigel-surf);
}

.rigel-caixa-titulo {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rigel-borda);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--rigel-txt);
}

/* Ficha deitada: os campos se espalham em colunas em vez de empilhar.
   auto-fit e nao auto-fill — com poucos campos o auto-fill deixaria
   colunas vazias abertas na direita, e o auto-fit as recolhe. */
.rigel-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rigel-ficha li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rigel-borda);
  font-size: 13.5px;
  min-width: 0;
}

/* filho direto, nao descendente.
   Como descendente, estas regras alcancavam tambem o selo do IMDb, que e
   um span dentro do span do valor — e o display:block daqui vencia o
   inline-flex dele por especificidade, esticando o selo ate o fim da
   celula. */
.rigel-ficha li > em {
  display: block;
  margin-bottom: 2px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--rigel-txt-2);
}

/* ---- selo do IMDb na ficha ---- */
.rigel-selo-imdb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--rigel-imdb);
  color: #14181c;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.5;
}

.rigel-selo-imdb b {
  padding-right: 5px;
  border-right: 1px solid rgba(0, 0, 0, .3);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: -.2px;
}

a.rigel-selo-imdb:hover { filter: brightness(1.1); color: #14181c; }

.rigel-ficha li > span {
  display: block;
  font-weight: 600;
  /* valor longo, como uma lista de idiomas, nao pode alargar a coluna e
     desalinhar a fileira inteira */
  overflow-wrap: anywhere;
}

/* ---- ficha em pe ----
   Na coluna estreita nao ha largura para duas colunas de dados, entao ela
   volta a ser lista: rotulo a esquerda, valor a direita. */
.rigel-ficha-vert { grid-template-columns: minmax(0, 1fr); gap: 0; }

.rigel-ficha-vert li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
}

.rigel-ficha-vert li:last-child { border-bottom: 0; }

.rigel-ficha-vert li > em {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.rigel-ficha-vert li > span { text-align: right; }

.rigel-texto { font-size: 14.5px; line-height: 1.75; color: #c6cddb; }
.rigel-texto p { margin: 0 0 12px; }
.rigel-texto p:last-child { margin-bottom: 0; }
.rigel-texto a { color: var(--rigel-marca); }

/* trailer */
.rigel-trailer {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  line-height: 0;
}

.rigel-trailer img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .82; transition: opacity .2s ease; }
.rigel-trailer:hover img { opacity: 1; }

.rigel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--rigel-marca);
  color: #fff;
}

.rigel-trailer-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
.rigel-trailer-frame iframe { width: 100%; height: 100%; border: 0; }


/* ==========================================================================
   DOWNLOADS — o arquivo e o botao

   Sem caixa, sem barra de titulo, sem contador. Cada arquivo e um bloco
   clicavel: uma faixa de cor com a resolucao, o peso em corpo grande e a
   acao no rodape.
   ========================================================================== */

.rigel-baixa { margin: 4px 0; }

.rigel-baixa-idioma {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rigel-txt-2);
}

/* filete que preenche o resto da linha, no lugar de uma borda inteira */
.rigel-baixa-idioma::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rigel-borda);
}

.rigel-baixa:first-child > .rigel-baixa-idioma:first-child { margin-top: 0; }

.rigel-tiles {
  display: grid;
  /* minmax(0, …) no maximo tambem: sem ele um formato longo esticaria a
     coluna e quebraria o alinhamento da fileira */
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.rigel-tile {
  position: relative;
  /* Vermelho fixo, seja qual for a resolucao. A escala de cores por
     resolucao dizia pouco — o numero ja esta escrito na faixa — e enchia a
     pagina de tons que nao sao do site. */
  --tile: var(--rigel-marca);
  border: 1px solid var(--rigel-borda);
  border-radius: 10px;
  background: var(--rigel-surf);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}

.rigel-tile:hover { border-color: var(--tile); transform: translateY(-2px); }

.rigel-tile-link {
  display: block;
  padding: 0 0 0;
  text-align: center;
}

.rigel-tile-q {
  display: block;
  padding: 8px 10px;
  background: var(--tile);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.rigel-tile-meio { display: block; padding: 16px 10px 0; }

.rigel-tile-peso {
  display: block;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--rigel-txt);
}

.rigel-tile-det {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--rigel-txt-2);
}

.rigel-tile-acao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  padding: 11px 10px;
  border-top: 1px solid var(--rigel-borda);
  background: var(--rigel-bg);
  color: var(--rigel-txt-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}

.rigel-tile:hover .rigel-tile-acao { background: var(--tile); color: #fff; }

/* ---- variante larga: um ou dois arquivos ----
   O mesmo bloco deitado. A faixa de cor vira uma coluna a esquerda, o peso
   e o formato ficam no meio e a acao vai para a direita. */

.rigel-tiles-largo { grid-template-columns: minmax(0, 1fr); }

.rigel-tiles-largo .rigel-tile-link {
  display: grid;
  /* Uma linha so, tres colunas. Com o peso e o detalhe agrupados num item
     unico, a segunda linha deixou de existir — e era ela que desalinhava:
     a faixa de cor e o botao ocupavam as duas linhas, isso esticava a
     linha do peso e o texto ficava no topo dela. */
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
}

.rigel-tiles-largo .rigel-tile-q {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
}

.rigel-tiles-largo .rigel-tile-meio { padding: 0 0 0 18px; }
.rigel-tiles-largo .rigel-tile-peso { font-size: 20px; }

.rigel-tiles-largo .rigel-tile-acao {
  align-self: stretch;
  margin: 0;
  padding: 18px 26px;
  border-top: 0;
  border-left: 1px solid var(--rigel-borda);
}

/* Na barra larga o copiar deixa de flutuar e vira uma coluna de verdade,
   depois do Baixar. Sobreposto ele nao tinha canto livre: na direita caia
   sobre o Baixar, na esquerda sobre a resolucao. Aqui ele nao disputa
   espaco com ninguem.

   O botao fica FORA do <a> na marcacao — botao dentro de link e invalido e
   o navegador desmonta —, entao quem vira a fileira e o proprio cartao. */
.rigel-tiles-largo .rigel-tile {
  display: flex;
  align-items: stretch;
}

.rigel-tiles-largo .rigel-tile-link { flex: 1 1 auto; min-width: 0; }

.rigel-tiles-largo .rigel-copiar {
  position: static;
  flex: 0 0 auto;
  width: 54px;
  height: auto;
  border-radius: 0;
  border-left: 1px solid var(--rigel-borda);
  background: var(--rigel-bg);
  color: var(--rigel-txt-2);
  opacity: 1;
}

.rigel-tiles-largo .rigel-copiar:hover { background: var(--rigel-surf-2); color: var(--rigel-txt); }
.rigel-tiles-largo .rigel-copiar.copiado { background: #10b981; color: #fff; }


/* Botao de copiar por cima do canto: dentro do <a> ele seria um botao
   aninhado em link, que o HTML nao permite e o navegador desmonta. */
.rigel-copiar {
  position: absolute;
  top: 6px; right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  cursor: pointer;
  opacity: .65;
  transition: .18s ease;
}

.rigel-copiar:hover { opacity: 1; background: rgba(0, 0, 0, .6); }
.rigel-copiar.copiado { opacity: 1; background: #10b981; }

.rigel-legendas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--rigel-txt-2);
}

.rigel-legendas a {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(245, 197, 24, .34);
  background: rgba(245, 197, 24, .1);
  color: var(--rigel-imdb);
  font-size: 11.5px;
  font-weight: 700;
}

.rigel-legendas a:hover { background: var(--rigel-imdb); color: #1a1a1a; }


/* ==========================================================================
   RELACIONADOS, PAGINACAO, RODAPE
   ========================================================================== */

.rigel-relacionados { margin-top: 34px; }

.rigel-paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 26px 0 34px;
}

.rigel-paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rigel-txt-2);
  transition: .18s ease;
}

.rigel-paginacao .page-numbers:hover { border-color: var(--rigel-marca); color: var(--rigel-txt); }

.rigel-paginacao .page-numbers.current {
  background: var(--rigel-marca);
  border-color: var(--rigel-marca);
  color: #fff;
}

.rigel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: 7px;
  background: var(--rigel-marca);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.rigel-btn:hover { filter: brightness(1.15); color: #fff; }

.rigel-404 { padding: 70px 20px; text-align: center; }
.rigel-404 h1 { font-size: 72px; color: var(--rigel-marca); }
.rigel-404 p { margin: 10px 0 22px; color: var(--rigel-txt-2); }

.rigel-pagina { padding: 10px 0 40px; }

.rigel-rodape {
  padding: 26px 0;
  background: var(--rigel-topo);
  border-top: 1px solid var(--rigel-borda);
  text-align: center;
}

.rigel-rodape-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.rigel-rodape-menu a { color: var(--rigel-txt-2); }
.rigel-rodape-menu a:hover { color: var(--rigel-marca); }

.rigel-copy, .rigel-rodape-txt { margin: 0; font-size: 12.5px; color: var(--rigel-txt-2); }
.rigel-rodape-txt { margin-top: 7px; }


/* ==========================================================================
   COMENTARIOS
   ========================================================================== */

.rigel-comentarios { margin: 34px 0 40px; }
.rigel-lista-com, .rigel-lista-com .children { margin: 0; padding: 0; list-style: none; }
.rigel-lista-com .children { padding-left: 22px; }

.rigel-lista-com li.comment {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--rigel-borda);
  border-radius: var(--rigel-raio);
  background: var(--rigel-surf);
}

.rigel-comentarios input[type="text"],
.rigel-comentarios input[type="email"],
.rigel-comentarios input[type="url"],
.rigel-comentarios textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--rigel-borda-2);
  border-radius: 7px;
  background: var(--rigel-bg);
  color: var(--rigel-txt);
  font: inherit;
}

.rigel-comentarios .submit {
  padding: 11px 22px;
  border: 0;
  border-radius: 7px;
  background: var(--rigel-marca);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}


/* ==========================================================================
   RESPONSIVO

   A grade cai por passos em vez de um salto so: sete colunas num monitor,
   duas num celular. As larguras seguem o cartao, nao um tamanho de
   aparelho — e por isso os cortes nao batem com nenhum modelo.
   ========================================================================== */

@media (max-width: 1100px) {
  .rigel-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rigel-trilho-item { width: calc((100% - 16px * 5) / 6); }
}

@media (max-width: 1000px) {
  /* a coluna da capa nao cabe ao lado: tudo vira uma coluna so, e a capa
     passa a dividir a linha com a ficha */
  .rigel-colunas { grid-template-columns: minmax(0, 1fr); }

  .rigel-col-esq {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  /* o trailer de 300px espremeria a sinopse: os dois empilham */
  .rigel-duplo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .rigel-nav { display: none; }
  .rigel-hamb { display: inline-flex; }

  /* sem espaco para o rotulo, sobra o icone — as categorias continuam
     alcancaveis, que e onde elas mais importam */
  .rigel-cat { padding: 8px 10px; }
  .rigel-cat span { display: none; }

  .rigel-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rigel-trilho-item { width: calc((100% - 16px * 3) / 4); }
}

@media (max-width: 680px) {
  .rigel-ficha { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 18px; }

  .rigel-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .rigel-trilho { gap: 12px; }
  .rigel-trilho-item { width: calc((100% - 12px * 2) / 3); }

  .rigel-cabeca h1 { font-size: 22px; }
  .rigel-secao-topo h1, .rigel-secao-topo h2 { font-size: 17px; }

  /* no toque as setas nao servem para nada */
  .rigel-setas { display: none; }

  .rigel-col-esq { grid-template-columns: minmax(0, 1fr); }
  .rigel-capa { max-width: 220px; margin: 0 auto; }

  .rigel-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .rigel-tile-peso { font-size: 18px; padding-top: 13px; }

  /* a barra larga nao cabe em tres colunas aqui: a acao desce para baixo */
  .rigel-tiles-largo .rigel-tile { flex-wrap: wrap; }
  .rigel-tiles-largo .rigel-tile-link { grid-template-columns: 76px minmax(0, 1fr); flex: 1 1 100%; }
  .rigel-tiles-largo .rigel-copiar {
    width: 100%;
    height: 40px;
    border-left: 0;
    border-top: 1px solid var(--rigel-borda);
  }
  .rigel-tiles-largo .rigel-tile-acao {
    grid-column: 1 / -1;
    padding: 12px 10px;
    border-left: 0;
    border-top: 1px solid var(--rigel-borda);
  }
  .rigel-tiles-largo .rigel-tile-peso { font-size: 18px; }
}

@media (max-width: 460px) {
  .rigel-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rigel-trilho-item { width: calc((100% - 12px) / 2); }
  .rigel-busca { width: auto; }
  .rigel-busca input { width: 100px; }
}