/*
Theme Name: Deneb
Description: Tema de filmes e séries, claro por padrão. Ícones em SVG embutido, sem jQuery e sem bibliotecas de carrossel.
Author: Torrent Filmes
Version: 1.0
Requires at least: 5.5
Requires PHP: 7.4
Text Domain: deneb
*/

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

   Claro por padrao — o tema de origem e branco com verde, e os anteriores
   da familia eram todos escuros. Ele carregava jQuery, slick, modernizr,
   fitvids e a familia Gotham inteira: cinco pesos em quatro formatos,
   vinte arquivos de fonte. Aqui a fonte vem da pilha do sistema.
   ========================================================================== */

:root {
  --dnb-bg:        #f4f6f5;
  --dnb-surf:      #ffffff;
  --dnb-surf-2:    #eaefec;
  --dnb-topo:      #ffffff;
  --dnb-borda:     #dfe5e1;
  --dnb-borda-2:   #c2ccc6;

  --dnb-txt:       #16211b;
  --dnb-txt-2:     #62716a;

--dnb-marca:     #1E8F5C;  /* verde um pouco mais suave e acinzentado */
--dnb-marca-2:   #146B47;  /* tom mais escuro para hover/active */
--dnb-marca-3:   #80ff30;
  --dnb-marca-txt: #ffffff;
  --dnb-imdb:      #b8860b;

  --dnb-larg:      1300px;
  --dnb-raio:      8px;
  --dnb-topo-h:    68px;

  /* sombra em vez de borda: no tema claro e ela que separa o cartao do
     papel sem sujar a tela de linhas */
  --dnb-sombra:    0 2px 10px rgba(22, 33, 27, .07);
  --dnb-sombra-2:  0 8px 26px rgba(22, 33, 27, .12);
}

/* ==========================================================================
   ESQUEMA ESCURO

   Aqui o verde precisa clarear: o #00934f sobre fundo escuro fica pesado e
   perde legibilidade como texto. Ele sobe para um tom mais vivo, e o texto
   sobre a marca continua branco.
   ========================================================================== */

body.dnb-dark {
  --dnb-bg:        #12151a;
  --dnb-surf:      #191d24;
  --dnb-surf-2:    #212630;
  --dnb-topo:      #14181e;
  --dnb-borda:     #2b323c;
  --dnb-borda-2:   #3c4552;

  --dnb-txt:       #ffffff;
  --dnb-txt-2:     #95a1ac;

  --dnb-marca:     #16c46a;
  --dnb-marca-2:   #0f9b52;
  --dnb-imdb:      #f5c518;

  --dnb-sombra:    0 2px 10px rgba(0, 0, 0, .4);
  --dnb-sombra-2:  0 10px 30px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

/* ---- barra de rolagem ----
   A padrao do Windows destoa nos dois esquemas. O Firefox le
   scrollbar-width/color, o resto usa ::-webkit-scrollbar, e cada navegador
   ignora a declaracao que nao conhece. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dnb-borda-2) var(--dnb-bg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dnb-bg); }

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

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

html { scroll-behavior: smooth; }

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

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; }

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

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

.dnb-pular {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--dnb-marca);
  color: #fff;
}

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

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


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

.dnb-topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--dnb-topo);
  border-bottom: 1px solid var(--dnb-borda);
}

body.dnb-rolou .dnb-topo { box-shadow: var(--dnb-sombra); }

/* a barra do admin empurra o topo pregado para baixo */
.admin-bar .dnb-topo { top: 32px; }
@media (max-width: 782px) { .admin-bar .dnb-topo { top: 46px; } }

.dnb-barra {
  display: grid;
  /* laterais iguais: o menu fica no centro real da barra, e abrir a busca
     nao empurra ele para o lado */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  height: var(--dnb-topo-h);
}

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

.dnb-barra > .dnb-nav { justify-self: center; }
.dnb-barra > .dnb-busca { justify-self: end; }

.dnb-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  white-space: nowrap;
}

.dnb-logo b { color: var(--dnb-marca); font-weight: 800; }
.dnb-logo img { max-height: 44px; width: auto; }

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

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

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

.dnb-menu > li > a {
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--dnb-txt-2);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}

.dnb-menu > li > a:hover { background: var(--dnb-surf-2); color: var(--dnb-txt); }

/* Secao aberta em verde cheio. As quatro classes cobrem o que o WordPress
   marca, incluindo o current-post-ancestor — sem ele o menu ficaria
   apagado justamente dentro do filme. */
.dnb-menu > li.current-menu-item > a,
.dnb-menu > li.current-menu-parent > a,
.dnb-menu > li.current-menu-ancestor > a,
.dnb-menu > li.current-post-ancestor > a {
  background: var(--dnb-marca);
  color: #fff;
}

.dnb-menu .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 190px;
  margin: 6px 0 0;
  padding: 6px;
  border: 1px solid var(--dnb-borda);
  border-radius: var(--dnb-raio);
  background: var(--dnb-surf);
  box-shadow: var(--dnb-sombra-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: .18s ease;
}

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

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

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

.dnb-busca {
  display: flex;
  align-items: center;
  width: 250px;
  max-width: 38vw;
  border: 1px solid var(--dnb-borda-2);
  border-radius: 999px;
  background: var(--dnb-surf);
  overflow: hidden;
}

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

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

.dnb-busca input::placeholder { color: var(--dnb-txt-2); }

.dnb-busca button {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 15px;
  border: 0;
  background: var(--dnb-marca);
  color: #fff;
  cursor: pointer;
}

.dnb-busca button:hover { background: var(--dnb-marca-2); }

.dnb-hamb {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--dnb-borda-2);
  border-radius: 8px;
  background: transparent;
  color: var(--dnb-txt);
  cursor: pointer;
}


/* ==========================================================================
   FAIXA DE GENEROS
   ========================================================================== */

.dnb-generos {
  background: var(--dnb-surf);
  border-bottom: 1px solid var(--dnb-borda);
}

.dnb-generos-caixa {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
}

.dnb-gen-trilho {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* a barra entre os itens suja a faixa; o toque e as setas continuam */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dnb-gen-trilho::-webkit-scrollbar { display: none; }

.dnb-gen-trilho a {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dnb-txt-2);
  white-space: nowrap;
}

.dnb-gen-trilho a:hover { background: var(--dnb-surf-2); color: var(--dnb-txt); }
.dnb-gen-trilho a.ativo { background: var(--dnb-marca); color: #fff; }

.dnb-gen-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--dnb-borda);
  border-radius: 50%;
  background: var(--dnb-surf);
  color: var(--dnb-txt);
  cursor: pointer;
  box-shadow: var(--dnb-sombra);
}

.dnb-gen-seta.esq { left: 8px; }
.dnb-gen-seta.dir { right: 8px; }
.dnb-gen-seta:hover { background: var(--dnb-marca); border-color: var(--dnb-marca); color: #fff; }
.dnb-gen-seta:disabled { opacity: 0; pointer-events: none; }


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

.dnb-sombra {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(22, 33, 27, .55);
  opacity: 0;
  transition: opacity .26s ease;
}

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

.dnb-gaveta {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  width: min(300px, 84vw);
  height: 100%;
  padding: 16px;
  background: var(--dnb-surf);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .26s ease;
  box-shadow: var(--dnb-sombra-2);
  scrollbar-color: var(--dnb-borda-2) var(--dnb-surf);
}

.dnb-gaveta::-webkit-scrollbar-track { background: var(--dnb-surf); }
.dnb-gaveta::-webkit-scrollbar-thumb { border-color: var(--dnb-surf); }

.dnb-gaveta.aberta { transform: translateX(0); }
body.dnb-travado { overflow: hidden; }

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

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

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

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

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

.dnb-menu-mobile a:hover { background: var(--dnb-surf-2); color: var(--dnb-txt); }
.dnb-menu-mobile .sub-menu a { padding-left: 26px; font-size: 13.5px; font-weight: 500; }

.dnb-menu-mobile > li.current-menu-item > a,
.dnb-menu-mobile > li.current-post-ancestor > a {
  background: var(--dnb-marca);
  color: #fff;
}


/* ==========================================================================
   TITULOS DE SECAO
   ========================================================================== */

.dnb-secao {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 16px;
}

.dnb-secao h1,
.dnb-secao h2 {
  flex: 1 1 auto;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .2px;
  text-transform: uppercase;
}

/* o peso marca so a palavra em <strong>, como no tema de origem */
.dnb-secao strong { font-weight: 800; color: var(--dnb-marca); }

.dnb-secao.clara h2, .dnb-secao.clara strong { color: #fff; }

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

.dnb-vermais {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--dnb-marca);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dnb-vermais:hover { background: var(--dnb-marca-2); color: #fff; }

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


/* ==========================================================================
   CARTAO

   Capa com cantos arredondados e sombra; os selos ficam nas quinas e o
   titulo embaixo, fora da imagem.
   ========================================================================== */

.dnb-card { display: flex; flex-direction: column; }

.dnb-card-capa {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--dnb-raio);
  overflow: hidden;
  background: var(--dnb-surf-2);
  box-shadow: var(--dnb-sombra);
  line-height: 0;
  transition: box-shadow .2s ease, transform .2s ease;
}

.dnb-card:hover .dnb-card-capa { box-shadow: var(--dnb-sombra-2); transform: translateY(-3px); }

.dnb-card-capa img { width: 100%; height: 100%; object-fit: cover; }

.dnb-card-audio,
.dnb-card-nota,
.dnb-card-res {
  position: absolute;
  font-weight: 800;
  line-height: 1;
}

.dnb-card-audio {
  top: 0; right: 0;
  padding: 6px 10px;
  border-radius: 0 0 0 var(--dnb-raio);
  background: var(--dnb-marca);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* a nota fica sobre o cartaz, entao precisa de fundo cheio: preto
   translucido some sobre capa clara */
.dnb-card-nota {
  position: absolute;
  bottom: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 0 var(--dnb-raio) 0 0;
  background: #14181c;
  color: var(--dnb-imdb);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
}

.dnb-card-nota::before {
  content: "IMDb";
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--dnb-imdb);

}

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

/* duas linhas no maximo: titulo longo desalinharia a fileira inteira */
.dnb-card-titulo a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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


/* ==========================================================================
   DESTAQUES E GRADE
   ========================================================================== */

/* A faixa de destaques usa o verde da marca em degrade no lugar da imagem
   de fundo que o tema de origem carregava: uma requisicao a menos, e a cor
   acompanha o esquema escolhido. */
.dnb-destaques {
  padding: 26px 0 30px;
  background: linear-gradient(135deg, var(--dnb-bg), var(--dnb-bg));
}

.dnb-destaques .dnb-secao { margin-top: 0; }

.dnb-trilho-caixa { position: relative; }

.dnb-trilho {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

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

/* dentro da faixa verde o titulo do cartao vira branco */
.dnb-destaques .dnb-card-titulo a { color: #fff; }
.dnb-destaques .dnb-card:hover .dnb-card-titulo a { color: rgba(255, 255, 255, .8); }

.dnb-trilho-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: .18s ease;
}

.dnb-trilho-seta:hover:not(:disabled) { background: #fff; color: var(--dnb-marca); }
.dnb-trilho-seta:disabled { opacity: .3; cursor: default; }

.dnb-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(6, minmax(0, 1fr));
  gap: 26px 18px;
  margin-bottom: 26px;
}


/* ==========================================================================
   PAGINA DO FILME — hero + abas

   Sem pilha de caixas e sem coluna lateral: um hero de largura total com o
   backdrop ao fundo, e abaixo dele abas que trocam o conteudo no mesmo
   lugar. A pagina cabe numa tela em vez de exigir rolagem ate o fim.
   ========================================================================== */

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

.dnb-migalhas a:hover { color: var(--dnb-marca); }
.dnb-migalhas strong { font-weight: 600; color: var(--dnb-txt); }

.dnb-hero {
  position: relative;
  padding: 34px 0 30px;
  background: var(--dnb-surf-2);
  border-bottom: 1px solid var(--dnb-borda);
}

/* Com backdrop, a imagem cobre a faixa e um veu por cima devolve o
   contraste — sem ele o texto cai sobre qualquer cor que o frame tiver.
   O veu sai das variaveis, entao acompanha o esquema claro ou escuro. */
.dnb-hero.com-fundo {
  background-size: cover;
  background-position: center 22%;
}

.dnb-hero.com-fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--dnb-surf-2) 18%, rgba(234, 239, 236, .93) 52%, rgba(234, 239, 236, .7) 100%),
    linear-gradient(0deg, var(--dnb-bg) 2%, transparent 55%);
}

body.dnb-dark .dnb-hero.com-fundo::before {
  background:
    linear-gradient(90deg, var(--dnb-surf-2) 18%, rgba(33, 38, 48, .93) 52%, rgba(33, 38, 48, .7) 100%),
    linear-gradient(0deg, var(--dnb-bg) 2%, transparent 55%);
}

.dnb-hero-corpo {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.dnb-hero-capa {
  border-radius: var(--dnb-raio);
  overflow: hidden;
  background: var(--dnb-surf);
  box-shadow: var(--dnb-sombra-2);
  line-height: 0;
}

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

.dnb-hero-txt { min-width: 0; }

.dnb-hero-txt h1 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
}

.dnb-hero-orig {
  margin: 6px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--dnb-txt-2);
}

/* etiquetas soltas sobre a imagem, no lugar de uma tabela em caixa */
.dnb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
}

.dnb-chip {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--dnb-surf);
  box-shadow: var(--dnb-sombra);
  font-size: 12.5px;
  font-weight: 700;
}

.dnb-chip.forte { background: var(--dnb-marca); color: #fff; }

.dnb-chip-imdb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--dnb-imdb);
  color: #fff;
}

.dnb-chip-imdb b {
  padding-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, .45);
  font-size: 10px;
  font-weight: 900;
}

a.dnb-chip-imdb:hover { filter: brightness(1.08); color: #fff; }

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


/* ---- abas ----

   Sem JavaScript os quatro paineis ficam visiveis, cada um com seu titulo,
   e a barra de abas nao aparece: a pagina vira uma lista comum. O script
   marca o <html> e inverte isso. */

.dnb-abas { display: none; }

html.dnb-js .dnb-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 22px 0 0;
  padding-bottom: 0;
  border-bottom: 2px solid var(--dnb-borda);
}

.dnb-aba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--dnb-txt-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.dnb-aba:hover { color: var(--dnb-txt); }

/* aria-selected no lugar de uma classe: o estado ja precisa existir para
   o leitor de tela, e repetir numa classe cria duas fontes de verdade */
.dnb-aba[aria-selected="true"] {
  color: var(--dnb-marca);
  border-color: var(--dnb-marca);
}

.dnb-aba em {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--dnb-surf-2);
  font-style: normal;
  font-size: 10.5px;
}

.dnb-paineis { padding: 22px 0 10px; }

.dnb-painel + .dnb-painel { margin-top: 26px; }

/* com abas ligadas, so o painel escolhido aparece */
html.dnb-js .dnb-painel { display: none; margin-top: 0; }
html.dnb-js .dnb-painel.ativo { display: block; }

/* o titulo do painel so serve sem JS: com abas ele repetiria o rotulo da
   aba logo acima */
.dnb-painel-titulo {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dnb-marca);
}

html.dnb-js .dnb-painel-titulo { display: none; }

.dnb-sinopse {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--dnb-txt);
}

.dnb-sinopse p { margin: 0; }

/* ---- ficha ----
   Colunas que se ajustam sozinhas: auto-fit e nao auto-fill, senao com
   poucos campos sobrariam colunas vazias abertas na direita. */
.dnb-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px 26px;
  margin: 0;
}

.dnb-ficha > div { padding: 9px 0; border-bottom: 1px solid var(--dnb-borda); }

.dnb-ficha dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--dnb-txt-2);
}

.dnb-ficha dd {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 600;
  /* valor longo, como uma lista de idiomas, nao pode alargar a coluna */
  overflow-wrap: anywhere;
}

/* ---- trailer ---- */
.dnb-trailer {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--dnb-raio);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  line-height: 0;
}

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

.dnb-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--dnb-marca);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.dnb-trailer-frame { aspect-ratio: 16 / 9; border-radius: var(--dnb-raio); overflow: hidden; }
.dnb-trailer-frame iframe { width: 100%; height: 100%; border: 0; }


/* ==========================================================================
   DOWNLOADS — barras de peso

   Cada arquivo tem uma barra proporcional ao tamanho, e a lista sai do
   mais leve para o mais pesado. E a unica informacao que muda de verdade a
   escolha de quem tem internet ou disco limitado, e nos outros temas ela
   era so mais um numero no meio do texto.
   ========================================================================== */

.dnb-pesos {
  border-radius: var(--dnb-raio);
  background: var(--dnb-surf);
  box-shadow: var(--dnb-sombra);
  overflow: hidden;
}

.dnb-pesos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--dnb-marca);
  color: #fff;
}

.dnb-pesos-topo h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dnb-pesos-conta { font-size: 12px; white-space: nowrap; }
.dnb-pesos-conta b { font-weight: 800; }

.dnb-pesos-lista { padding: 8px 18px 16px; }

.dnb-peso { padding: 14px 0; border-bottom: 1px solid var(--dnb-borda); }
.dnb-peso:last-child { border-bottom: 0; }

.dnb-peso-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.dnb-peso-audio {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dnb-surf-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.dnb-peso-q {
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--dnb-marca);
  color: var(--dnb-marca);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
}

.dnb-peso-det { font-size: 11.5px; color: var(--dnb-txt-2); }

.dnb-peso-selo {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dnb-marca);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.dnb-peso-linha { display: flex; align-items: center; gap: 14px; }

.dnb-peso-barra {
  flex: 1 1 auto;
  min-width: 0;
  height: 10px;
  border-radius: 999px;
  background: var(--dnb-surf-2);
  overflow: hidden;
}

.dnb-peso-barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dnb-marca), var(--dnb-marca-2));
}

/* o mais leve ganha destaque: e a escolha padrao de quem so quer assistir */
.dnb-peso.leve .dnb-peso-barra span {
  background: linear-gradient(90deg, #f5a623, #e8890b);
}

.dnb-peso-tam {
  flex: 0 0 auto;
  min-width: 76px;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
}

.dnb-peso-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }

.dnb-baixar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--dnb-marca);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease;
}

.dnb-baixar:hover { background: var(--dnb-marca-2); color: #fff; }

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

.dnb-copiar:hover { color: var(--dnb-marca); border-color: var(--dnb-marca); }
.dnb-copiar.copiado { background: var(--dnb-marca); border-color: var(--dnb-marca); color: #fff; }

.dnb-pesos-rodape {
  padding: 14px 18px;
  border-top: 1px solid var(--dnb-borda);
  background: var(--dnb-surf-2);
}

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

.dnb-legendas + .dnb-legendas { margin-top: 9px; }

.dnb-legendas em {
  font-style: normal;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--dnb-txt);
}

.dnb-legendas a {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--dnb-imdb);
  color: var(--dnb-imdb);
  font-size: 11.5px;
  font-weight: 700;
}

.dnb-legendas a:hover { background: var(--dnb-imdb); color: #fff; }


/* ==========================================================================
   FITA DE RELACIONADOS
   ========================================================================== */

.dnb-fita { padding: 10px 0 20px; }

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

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

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


/* ==========================================================================
   PAGINACAO, RODAPE, COMENTARIOS
   ========================================================================== */

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

.dnb-btn:hover { background: var(--dnb-marca-2); color: #fff; }

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

.dnb-paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--dnb-surf);
  box-shadow: var(--dnb-sombra);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dnb-txt-2);
  transition: .18s ease;
}

.dnb-paginacao .page-numbers:hover { color: var(--dnb-marca); }

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

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

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

.dnb-rodape {
  padding: 18px 0;
  background: var(--dnb-surf);
  border-top: 3px solid var(--dnb-marca);
  text-align: center;
}

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

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

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

/* Sobraram de fora do single: o .dnb-texto e usado nas paginas comuns e o
   .dnb-caixa-titulo no comments.php. */
.dnb-texto { font-size: 15px; line-height: 1.8; color: var(--dnb-txt); }
.dnb-texto p { margin: 0 0 14px; }
.dnb-texto p:last-child { margin-bottom: 0; }
.dnb-texto a { color: var(--dnb-marca); }

.dnb-caixa-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dnb-caixa-titulo svg { color: var(--dnb-marca); }

.dnb-comentarios { margin: 20px 0 30px; }
.dnb-lista-com, .dnb-lista-com .children { margin: 0; padding: 0; list-style: none; }
.dnb-lista-com .children { padding-left: 22px; }

.dnb-lista-com .comment-body {
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: var(--dnb-raio);
  background: var(--dnb-surf);
  box-shadow: var(--dnb-sombra);
}

.dnb-comentarios input[type="text"],
.dnb-comentarios input[type="email"],
.dnb-comentarios input[type="url"],
.dnb-comentarios textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--dnb-borda-2);
  border-radius: 8px;
  background: var(--dnb-surf);
  color: var(--dnb-txt);
  font: inherit;
}

.dnb-comentarios .submit {
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--dnb-marca);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}


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

   Os cortes seguem a largura do cartao, nao um tamanho de aparelho — por
   isso nao batem com nenhum modelo especifico.
   ========================================================================== */

@media (max-width: 1150px) {
  .dnb-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dnb-trilho > * { width: calc((100% - 16px * 4) / 5); }
}

@media (max-width: 1000px) {
  .dnb-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dnb-trilho > * { width: calc((100% - 16px * 3) / 4); }
}

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

@media (max-width: 720px) {
  .dnb-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .dnb-trilho { gap: 12px; }
  .dnb-trilho > * { width: calc((100% - 12px * 2) / 3); }

  .dnb-secao h1, .dnb-secao h2 { font-size: 17px; }

  /* no toque as setas nao servem: a rolagem ja e por arrasto */
  .dnb-gen-seta, .dnb-fita-seta { display: none; }

  /* a capa sai de cima do texto e vira uma faixa estreita ao lado */
  .dnb-hero { padding: 22px 0; }
  .dnb-hero-corpo { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
  .dnb-hero-txt h1 { font-size: 20px; }
  .dnb-chips { margin: 12px 0 10px; gap: 6px; }
  .dnb-chip { padding: 5px 11px; font-size: 11.5px; }

  /* as abas rolam na horizontal em vez de quebrar em duas linhas */
  html.dnb-js .dnb-abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.dnb-js .dnb-abas::-webkit-scrollbar { display: none; }
  .dnb-aba { flex: 0 0 auto; padding: 11px 15px; font-size: 12px; }

  /* A barra some: com pouca largura ela viraria um risco de 40px, sem
     conseguir mostrar proporcao nenhuma. O tamanho em texto continua. */
  .dnb-peso-barra { display: none; }
  .dnb-peso-linha { flex-wrap: wrap; }
  .dnb-peso-tam { min-width: 0; text-align: left; }
  .dnb-peso-acoes { margin-left: auto; }
}

@media (max-width: 460px) {
  .dnb-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dnb-trilho > * { width: calc((100% - 12px) / 2); }
  .dnb-busca { width: auto; }
  .dnb-busca input { width: 90px; }
  .dnb-baixar { flex: 1 1 auto; justify-content: center; }
}