/*
Theme Name: Lumen
Theme URI: https://serveronlineplay.com/
Author: Server Online Play
Author URI: https://serveronlineplay.com/
Description: Tema WordPress para catalogo de filmes e series. Multi-idioma (PT-BR, EN, ES, RU), esquema escuro e claro, painel de downloads em acordeao e menu lateral.
Version: 2.6.1
License: Proprietary - Uso exclusivo, codigo particular nao distribuido publicamente
Text Domain: lumen
*/


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #121212;
  color: #fff;
}

/* Scroll geral (body, html) */
body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body::-webkit-scrollbar-thumb {
  background-color: #e50914; /* vermelho Netflix */
  border-radius: 10px;
  border: 2px solid transparent;
}
/* ===== VARIÁVEIS DE ALTURA DA NAVBAR ===== */
:root {
  --navbar-h: 60px;
  --navbar-safe-top: calc(var(--navbar-h) + env(safe-area-inset-top, 0px));
}

/* === LOGO DO SITE === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

.logo-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #fff;                  /* texto principal branco */
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

.logo-highlight {
  color: #22c55e;               /* verde do tema para "TORRENT" */
}

.logo-text:hover {
  color: #22c55e;               /* muda o "BORA" no hover */
  text-shadow: 0 0 12px rgba(34,197,94,0.8);
}

/* Responsividade */
@media (max-width: 768px) {
  .logo-text {
    font-size: 26px;
  }
}
@media (max-width: 480px) {
  .logo-text {
    font-size: 22px;
  }
}


/* === NAVBAR TOPO === */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--navbar-h);
  width: 100%;
  background: #262626;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  z-index: 1100;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);

  /* DESKTOP: logo à esquerda, busca à direita */
  justify-content: space-between;
}



/* === BOTÕES DA NAVBAR === */
.hamburger-btn,
.search-toggle {
  background: none;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
}
.hamburger-btn:hover,
.search-toggle:hover {
  color: #fff;
}

/* === BUSCA DESKTOP === */
.search-box-wrapper {
  margin-left: auto; /* garante que vá para a direita */
  max-width: 340px;
  width: 100%;
}
.lumen-search-form {
  display: flex;
  align-items: center;
  background: #2b2b2b;
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}
.lumen-search-input {
  border: none;
  background: transparent;
  color: #ddd;
  padding: 10px;
  flex: 1;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.lumen-search-btn {
  background: #393939;
  color: #aaa;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
}
.lumen-search-btn:hover {
  color: #fff;
}

/* === BUSCA MOBILE (ESCONDIDA POR PADRÃO) === */
.mobile-search {
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  right: 0;
  background: #1f1f1f;
  padding: 8px 12px;
  border-bottom: 1px solid #333;
  z-index: 1099;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-search.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-search .lumen-search-form {
  width: 100%;
}

/* === DESKTOP: oculta ícones extras === */
.hamburger-btn,
.search-toggle {
  display: none;
}

/* === MOBILE: ajustes === */
@media (max-width: 768px) {
  .top-navbar {
    justify-content: flex-start;
    gap: 10px;
  }
  .hamburger-btn,
  .search-toggle {
    display: inline-block !important;
  }
  .search-box-wrapper {
    display: none !important;
  }
}


/* === SIDEBAR (DESKTOP) === */
.sidebar {
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  width: 220px;
  height: calc(100vh - var(--navbar-h));
  background: #1a1a1a;
  padding: 20px;
  overflow-y: auto;
  z-index: 1000;
  transition: left .3s ease, transform .25s ease;
}

/* === MENU === */
.sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar nav ul li { margin-bottom: 15px; position: relative; }
.sidebar nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  transition: background .2s;
  cursor: pointer;
}
.sidebar nav ul li a:hover { color: #e50914; background: #2a2a2a; }

/* === SETA DO SUBMENU === */
.sidebar nav ul li.menu-item-has-children > a::after {
  content: '▶';
  font-size: 12px;
  transition: transform .2s ease;
}
.sidebar nav ul li.menu-item-has-children.open > a::after { transform: rotate(90deg); }

/* === SUBMENU === */
.sidebar nav ul li ul.sub-menu { display: none; padding-left: 15px; margin-top: 5px; }
.sidebar nav ul li ul.sub-menu.active { display: block; }
.sidebar nav ul li ul.sub-menu li a {
  background: #1c1c1c;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 3px;
}
.sidebar nav ul li ul.sub-menu li a:hover { background: #333; color: #fff; }

/* === SCROLLBAR === */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: #121212; }
.sidebar::-webkit-scrollbar-thumb { background: #e50914; border-radius: 10px; }

/* === BOTÃO HAMBÚRGUER === */
.hamburger-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
  margin-left: 8px;
  display: none;
}
.hamburger-btn:hover { color: #fff; }

/* === OVERLAY (MOBILE) === */
.sidebar-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sidebar-overlay.show{ opacity: 1; pointer-events: auto; }

/* === CONTEÚDO GERAL (respeita navbar fixa) === */
.content{
  margin-left: 240px;
  padding: 30px 40px 40px;
  background-color: #181818;
  min-height: 100vh;
  padding-top: calc(var(--navbar-safe-top) + 10px); /* afastamento do topo */
}

/* === SECTION HEADER (sempre abaixo da navbar) === */
.featured-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: calc(var(--navbar-safe-top) + 12px); /* distância padrão (mobile) */
  margin-bottom: 20px;
  gap: 10px;
  scroll-margin-top: calc(var(--navbar-safe-top) + 10px); /* ancoragem */
}

/* Desktop: diminui distância */
@media (min-width: 769px) {
  .featured-section-header {
    margin-top: var(--navbar-h);
  }
}


/* === GRID / CARDS / TREND e META (mantidos) === */
.featured-games{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; align-items:stretch }
.featured-card{ background:#1e1e1e; border-radius:10px; overflow:hidden; transition:transform .3s ease; display:flex; flex-direction:column; height:100% }
.featured-card:hover{ transform:scale(1.02) }
.featured-card div:first-child{ aspect-ratio:16/9; background-size:cover; background-position:center; background-repeat:no-repeat; margin-bottom:0 }
.featured-card div:last-child{ padding:15px; color:#fff; display:flex; flex-direction:column; flex-grow:1 }
.featured-card h4{ margin-top:10px; font-size:18px }
.featured-card p{ font-size:13px; margin:5px 0; flex-grow:1; overflow:hidden }
.featured-card a{ color:#e50914; font-size:13px; display:inline-block; margin-top:5px; text-decoration:none }
.featured-card a:hover{ text-decoration:underline }
.featured-card span{ font-size:12px; background:red; padding:2px 6px; border-radius:3px }

.trend-games{ margin-bottom:50px; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px }
.trend-games h2{ grid-column:1/-1; font-size:24px; color:#fff; margin-bottom:20px }
.trend-card{ background:#1e1e1e; background-size:cover; background-position:center; border-radius:10px; color:#fff; height:300px; position:relative; overflow:hidden; display:flex; align-items:flex-end; transition:transform .3s ease }
.trend-card:hover{ transform:scale(1.03) }
.trend-card div{ background:rgba(0,0,0,.7); padding:15px; width:100%; text-align:center }
.trend-card strong{ font-size:16px; display:block; margin-bottom:5px }
.trend-card span{ font-size:12px; background:red; padding:3px 6px; border-radius:3px; display:inline-block; margin:3px 4px }

.trend-card .meta-info,
.meta-info{ font-size:12px; color:#bbb; margin-top:10px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px }
.meta-info span{ display:inline-block; font-size:12px; background:red; color:#fff; padding:4px 10px; border-radius:4px; margin:2px 4px 0 0 }
.meta-info .badge-idioma,
.meta-info .badge-qualidade{ background:#FFD700; color:#000 }
.badge-date{ display:inline-block; background:#007bff; color:#fff; font-size:12px; padding:4px 10px; border-radius:4px }
.badge-date i{ margin-right:4px }
.meta-info .badge-date{ background:#007bff !important; color:#fff }

/* === BOTÕES / TÍTULOS / PAGINAÇÃO (mantidos) === */
.featured-games-title{ grid-column:1/-1; font-size:24px; font-weight:700; margin-bottom:20px; color:#fff }
.section-buttons{ display:flex; gap:10px }
.section-btn{ background:#2b2b2b; color:#fff; border:none; padding:10px 15px; border-radius:4px; text-decoration:none; font-weight:500; font-size:14px; transition:background .3s ease }
.section-btn:hover{ background:#444 }
.section-btn.active-filter{ background:#e50914; color:#fff }

.pagination-wrapper{ width:100%; margin-top:30px; display:flex; justify-content:center; align-items:center; box-sizing:border-box; padding:0 20px }
.pagination-wrapper .page-numbers{ display:inline-block; margin:0 6px; padding:8px 12px; background:#2b2b2b; color:#fff; border-radius:4px; text-decoration:none; transition:background .3s ease }
.pagination-wrapper .page-numbers.current{ background:#e50914; font-weight:bold }
.pagination-wrapper .page-numbers:hover{ background:#444 }

/* === MOBILE / OFF-CANVAS === */
@media (max-width: 768px){

  /* força navbar em linha, altura fixa */
  .top-navbar{
    padding: 8px 12px !important;
    gap: 10px;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: var(--navbar-h) !important;
  }

  /* hambúrguer + busca lado a lado */
  .hamburger-btn{ display:inline-block; order:2 }
  .search-box-wrapper{
    order:3; margin:0 !important; width:auto !important; max-width:none !important;
    flex:1 1 auto !important;
  }
  .lumen-search-form{ width:100%; min-width:0 }
  .lumen-search-input{ flex:1; min-width:0 }
  .lumen-search-btn{ margin-left:0 }

  /* sidebar off-canvas acima de tudo */
  .sidebar{
    top: 0; left: 0; width: min(84vw, 320px); height: 100dvh;
    z-index: 2100; padding: 16px 12px;
    transform: translateX(-100%); box-shadow: 0 10px 30px rgba(0,0,0,.45);
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.open{ transform: translateX(0) }

  /* conteúdo sem margem lateral e com espaço do topo */
  .content{
    margin-left: 0 !important;
    padding-left: 16px; padding-right: 16px;
    padding-top: calc(var(--navbar-safe-top) + 14px) !important;
  }

  /* sem offset na UL */
  ul#menu-menu-principal.sidebar-menu{ position: static; top: auto }
}

/* === BLOQUEIO SCROLL QUANDO MENU ABRE === */
html.no-scroll, body.no-scroll{ overflow:hidden; height:100% }

/* === ACESSIBILIDADE: reduz animações === */
@media (prefers-reduced-motion: reduce){
  .sidebar, .sidebar-overlay,
  .sidebar nav ul li.menu-item-has-children > a::after{ transition:none !important }
}


/* ============================
   SINGLE – ESTILO COMPLETO
   ============================ */

.tag-badge{
  display:inline-block;
  background:#2b2b2b;
  color:#fff;
  padding:4px 10px;
  border-radius:4px;
  font-size:12px;
  text-decoration:none;
  transition:background .2s ease;
}
.tag-badge:hover{ background:#444; }


  /* iframe principal (fora do modal) */
  .player-iframe{
    width:100%;
    height:500px;
    border:none;
    display:block;
  }

/* trava rolagem quando modal aberto */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

/* Overlay do modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden; /* impede scroll fora */
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain; /* evita “scroll chaining” */
}

.modal-overlay.aberto {
  display: flex;
}

/* Caixa do modal (90% da tela) */
.modal-content {
  position: relative;
  width: 90%;
  height: 90%;
  max-width: 100%;
  max-height: 100%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header fixo no topo do modal */
.modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Iframe interno */
.modal-iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
}

/* Botão vermelho */
.modal-close {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-weight: 800;
  border: none;
  padding: 14px 22px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.modal-close:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Responsivo */
@media (max-width: 768px) {
  .player-iframe {
    height: 420px;
  }
  .modal-close {
    font-size: 16px;
    padding: 12px 18px;
  }
}

@media (max-width: 480px) {
  .player-iframe {
    height: 360px;
  }
  .modal-content {
    border-radius: 8px;
    width: 94%;
    height: 92%;
  }
  .modal-close {
    font-size: 15px;
    padding: 10px 16px;
  }
}


/* Container externo do iframe */
.container-box.iframe-container{
  width:100%;
  max-width:100%;
  margin:40px auto;
  padding:0;
  border-radius:10px;
  background:#1e1e1e;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  border:1px solid #333;
  box-sizing:border-box;
  overflow:hidden;
}

/* Wrapper do iframe (aspecto de vídeo) */
.iframe-wrapper{
  width:100%;
  aspect-ratio:16 / 5;    /* ajustado abaixo no mobile */
  position:relative;
}

/* Iframe */
.iframe-wrapper iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}

/* CONTAINER GERAL */
.single-container{
  margin-left:220px;
  padding:40px 30px;
  background:#181818;
  min-height:100vh;
  margin-top:30px;
  color:#fff;
}

.single-title{
  font-size:26px;
  color:#fff;
  margin-bottom:5px;
}

.single-meta{
  font-size:13px;
  color:#bbb;
  margin-bottom:25px;
  display:flex;
  gap:20px;
}

/* LADO A LADO */
.single-content{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:flex-start;
}

.single-left-column{ flex:0 0 250px; }

.single-left-column img{
  width:100%;
  height:auto;
  max-height:312px;
  border-radius:6px;
  margin-bottom:15px;
}

.single-right-column{
  flex:1 1 0;        /* permite encolher */
  min-width:0;       /* essencial pra não quebrar no mobile */
}

.section-btn:hover{ background:#c40810; }

.single-synopsis{
  font-size:15px;
  color:#ccc;
  margin-bottom:20px;
  line-height:1.6;
}

.single-info p{ margin:6px 0; font-size:14px; color:#bbb; }
.single-info strong{ color:#e50914; }

/* ===== BLOCO/BOXES GERAIS ===== */
.container-box{
  background:#222;
  padding:30px;
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  max-width:100%;
  margin:0 auto 40px;
  border:1px solid #333;
  box-sizing:border-box;
}

/* CONTAINER VISUAL DAS ABAS */
.tabs-wrapper{
  background:#1e1e1e;
  border-radius:8px;
  padding:20px;
  border:1px solid #333;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  margin-top:0;
  width:100%;
  max-width:100%;
  overflow:hidden;     /* evita vazamento do slider */
}

/* ABAS */
.nav-tabs{
  border-bottom:1px solid #444;
  margin-bottom:20px;
}
.nav-tabs .nav-link{
  color:#ccc;
  border:1px solid #444;
  background:transparent;
  margin-right:5px;
  border-radius:4px 4px 0 0;
}
.nav-tabs .nav-link.active{
  background:#181818;
  color:#e50914;
  border-color:#e50914 #e50914 #181818;
  font-weight:700;
}

.tab-pane{
  color:#ccc;
  font-size:15px;
  line-height:1.6;
  min-width:0;        /* impede forçar largura */
}

.tab-box{ padding:10px 0 0; min-width:0 }

/* ============================
   ELENCO – SLIDER 1 LINHA
   ============================ */

/* Controles (setas) */
.elenco-controls{
  position:relative;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:10px;
}
.elenco-btn{
  width:36px; height:36px; border-radius:8px;
  border:1px solid #333; background:#222; color:#fff;
  font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .15s, border-color .15s;
}
.elenco-btn:hover{ background:#2a2a2a; border-color:#444; transform:translateY(-1px) }
.elenco-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none }

/* Viewport + trilho */
.elenco-viewport{ overflow:auto hidden; width:100% }
.elenco-list{
  display:flex;
  flex-wrap:nowrap;         /* 1 linha */
  gap:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  list-style:none;
  padding:2px 2px 10px;
  margin:0;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  box-sizing:border-box;
  max-width:100%;
}
.elenco-list::-webkit-scrollbar{ height:8px }
.elenco-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:4px }

/* Card */
.elenco-item{
  flex:0 0 160px;           /* largura do card */
  display:flex; flex-direction:column;
  scroll-snap-align:start;
  background:#222;
  border:1px solid #333;
  border-radius:10px;
  overflow:hidden;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.elenco-item:hover{ transform:translateY(-3px); box-shadow:0 4px 14px rgba(0,0,0,.5); border-color:#444 }

/* Foto 2:3 */
.elenco-item img{
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:185 / 278;
  background:#111;
}

/* Texto */
.elenco-info{ padding:10px; min-height:64px }
.elenco-nome{ color:#fff; font-weight:700; font-size:.95rem; line-height:1.2; margin:4px 0 2px }
.elenco-personagem{ color:#bbb; font-size:.85rem; line-height:1.2 }

/* Estado vazio */
.no-data{ color:#bbb; text-align:center; font-style:italic; padding:6px 0 2px }

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

/* Tira deslocamento lateral em telas menores */
@media (max-width:1024px){
  .single-container{ margin-left:0 !important; }
}

@media (max-width:768px){
  .tabs-wrapper{ padding:15px }
  .nav-tabs .nav-link{ font-size:14px }

  .single-content{ flex-direction:column; gap:20px }
  .single-left-column, .single-right-column{ width:100% }
  .single-left-column img{ margin:0 auto; display:block }

  .elenco-list{ gap:12px; padding:2px 0 8px }
  .elenco-item{ flex-basis:130px }
}

@media (max-width:600px){
  /* iframe mais alto e padrão 16:9 */
  .container-box.iframe-container{ margin:20px 0; border-radius:6px }
  .iframe-wrapper{ aspect-ratio:16 / 9 !important; height:auto !important; }
  .iframe-wrapper iframe{ width:100%; height:100% }
}

@media (max-width:480px){
  .elenco-item{ flex-basis:110px }
  .elenco-nome{ font-size:.85rem }
  .elenco-personagem{ font-size:.75rem }
}

/* Segurança extra contra barra horizontal */
html, body{ overflow-x:hidden; }



/* === FOOTER === */
.site-footer {
  background-color: #1e1e1e;
  color: #ccc;
  padding: 30px 20px;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column h4 {
  color: #fff;
  margin-bottom: 10px;
}

.footer-links-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.footer-links-inline li {
  display: inline;
}

.footer-links-inline li a {
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
}

.footer-links-inline li a:hover {
  color: #e50914;
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 20px;
  font-size: 13px;
  color: #999;
}

.footer-divider {
  border-top: 1px solid #444;
  margin: 20px 0;
}


/* === RESPONSIVO === */
@media (max-width: 768px) {
  .top-navbar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: auto;
    padding: 10px;
    gap: 10px;
  }

  .logo {
    width: 100%;
  }

  .search-box-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .lumen-search-form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
  }

  .lumen-search-input {
    flex: 1;
  }

  .lumen-search-btn {
    margin-left: 6px;
  }

  .content {
    margin-left: 0;
    padding-top: 100px;
  }
}

/* ==========================================================================
   CARD DE LISTAGEM — reforma

   O card anterior nao tinha pôster: usava backgrounds1 (panorâmica) e,
   quando o campo estava vazio, ficava só texto. O CSS ainda esperava um
   div com background-image enquanto o PHP imprimia um <img>, e a classe
   .featured-card-img nao tinha estilo nenhum.

   As informações eram cinco <span> de largura total empilhados, em
   vermelho, amarelo e azul. Aqui viram selos sobre o pôster e chips
   pequenos abaixo do título.

   Namespace .lumen- proprio para nao disputar com as regras antigas.
   ========================================================================== */

.lumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 20px;
}

.lumen-card {
  display: flex;
  flex-direction: column;
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.lumen-card:hover {
  transform: translateY(-5px);
  border-color: #e50914;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}

/* ---- pôster ---- */
.lumen-poster {
  position: relative;
  line-height: 0;
  background: #141414;
}

.lumen-poster img {
  width: 100%;
  height: auto;              /* junto com aspect-ratio: sem ele o navegador ignora a proporcao */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.lumen-sem-capa {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(135deg, #242424, #171717);
}

/* ---- selos sobre o pôster ---- */
.lumen-selo {
  position: absolute;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.6;
  backdrop-filter: blur(3px);
  white-space: nowrap;
}

.lumen-selo-qualidade {
  top: 9px;
  left: 9px;
  background: rgba(229, 9, 20, .92);
  color: #fff;
}

.lumen-selo-nota {
  top: 9px;
  right: 9px;
  background: rgba(0, 0, 0, .74);
  color: #ffd54a;
}

.lumen-selo-ano {
  bottom: 9px;
  left: 9px;
  background: rgba(0, 0, 0, .74);
  color: #fff;
}

/* ---- corpo ---- */
.lumen-corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 11px 12px 13px;
}

.lumen-titulo {
  margin: 0 0 8px;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.32;
  color: #fff;
  /* duas linhas fixas: titulo curto e longo ocupam o mesmo espaco, entao
     os chips de todos os cards da fileira ficam alinhados */
  min-height: 2.64em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lumen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}

.lumen-chip {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #c9c9c9;
  background: #262626;
  border: 1px solid #333;
}

.lumen-chip-tipo {
  color: #ff8a90;
  background: rgba(229, 9, 20, .13);
  border-color: rgba(229, 9, 20, .3);
}

@media (max-width: 640px) {
  .lumen-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .lumen-titulo { font-size: .8rem; }
  .lumen-corpo { padding: 9px 10px 11px; }
}

/* ==========================================================================
   PAINEL DE DOWNLOADS  (parts/downloads.php)
   Acordeao por idioma. Cada grupo abre e fecha; dentro dele, cada release
   e uma faixa com a resolucao num bloco a esquerda.
   ========================================================================== */

.lumen-downloads { padding: 0; overflow: hidden; }

/* ---- topo ---- */
.lumen-dl-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  background: linear-gradient(90deg, #e50914 0%, #7d0409 100%);
}

.lumen-dl-titulo {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #fff;
}

.lumen-dl-titulo i { margin-right: 8px; }

.lumen-dl-contagem {
  font-size: .74rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- grupo ---- */
.lumen-grupo { border-top: 1px solid #2a2a2a; }
.lumen-grupo:first-child { border-top: none; }

.lumen-grupo-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 22px;
  background: #1c1c1c;
  border: none;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease;
}

.lumen-grupo-cab:hover { background: #232323; }
.lumen-grupo.aberto .lumen-grupo-cab { background: #202020; }

.lumen-grupo-nome {
  flex: 1 1 auto;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.lumen-grupo-qtd {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  color: #ff8a90;
  background: rgba(229, 9, 20, .16);
  border: 1px solid rgba(229, 9, 20, .34);
  padding: 2px 9px;
  border-radius: 999px;
}

.lumen-seta {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #8a8a8a;
  border-bottom: 2px solid #8a8a8a;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .24s ease, border-color .18s ease;
}

.lumen-grupo.aberto .lumen-seta {
  transform: translateY(2px) rotate(-135deg);
  border-color: #e50914;
}

/* corpo: max-height em vez de display:none para a transicao funcionar */
.lumen-grupo-corpo {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.lumen-grupo.aberto .lumen-grupo-corpo {
  max-height: 3000px;
  overflow: visible;
}

/* ---- legendas ---- */
.lumen-legendas-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 13px 22px 0;
  color: #8a8a8a;
  font-size: .78rem;
}

.lumen-legendas-linha a {
  font-size: .72rem;
  font-weight: 700;
  color: #ffd166;
  background: rgba(255, 209, 102, .1);
  border: 1px solid rgba(255, 209, 102, .32);
  padding: 3px 11px;
  border-radius: 999px;
  text-decoration: none;
}

.lumen-legendas-linha a:hover { background: #ffd166; color: #1a1a1a; }

/* ---- item ---- */
.lumen-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 22px;
  padding: 12px 14px;
  background: #151515;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  transition: border-color .18s ease, background .18s ease;
}

.lumen-item:hover { background: #1a1a1a; border-color: #e50914; }

/* bloco de resolucao a esquerda */
.lumen-bloco-q {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 46px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  background: #3a3a3a;
}

.lumen-bloco-q.q-8k  { background: linear-gradient(135deg, #ff8a00, #e52e71); }
.lumen-bloco-q.q-4k  { background: linear-gradient(135deg, #7b2ff7, #f107a3); }
.lumen-bloco-q.q-2k  { background: linear-gradient(135deg, #0575e6, #021b79); }
.lumen-bloco-q.q-fhd { background: linear-gradient(135deg, #e50914, #7d0409); }
.lumen-bloco-q.q-hd  { background: linear-gradient(135deg, #11998e, #38ef7d); color: #06281f; }
.lumen-bloco-q.q-sd  { background: #3a3a3a; color: #b0b0b0; }

.lumen-item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lumen-item-tam {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.lumen-item-fmt {
  font-size: .78rem;
  color: #9a9a9a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lumen-item-acoes {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lumen-baixar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #e50914;
  color: #fff;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease;
}

.lumen-baixar:hover { background: #ff2530; color: #fff; }

.lumen-copiar {
  width: 42px;
  height: 40px;
  background: #242424;
  border: 1px solid #333;
  border-radius: 8px;
  color: #9a9a9a;
  cursor: pointer;
  transition: .18s ease;
}

.lumen-copiar:hover { background: #2e2e2e; color: #fff; border-color: #444; }
.lumen-copiar.copiado { background: #11998e; border-color: #11998e; color: #fff; }

@media (max-width: 640px) {
  .lumen-dl-topo { padding: 13px 15px; }
  .lumen-grupo-cab { padding: 13px 15px; }
  .lumen-legendas-linha { padding: 12px 15px 0; }

  .lumen-item {
    flex-wrap: wrap;
    gap: 11px;
    margin: 10px 15px;
    padding: 12px;
  }

  .lumen-bloco-q { width: 56px; height: 40px; font-size: .72rem; }

  /* botao ocupa a linha toda no celular */
  .lumen-item-acoes { width: 100%; }
  .lumen-baixar { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   RELACIONADOS NA SINGLE
   Usa o mesmo card das listagens (parts/card.php), so com titulo proprio
   e grade um pouco mais compacta.
   ========================================================================== */

.lumen-relacionados { margin-top: 22px; }

.lumen-rel-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-left: 13px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
  border-left: 4px solid #e50914;
  line-height: 1.25;
}

/* linha em degrade preenchendo o espaco a direita do titulo */
.lumen-rel-titulo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, #e50914, transparent);
}

/* auto-fill aqui de proposito, nao auto-fit: com auto-fill o numero de
   colunas depende so da largura, nao da quantidade de itens. Isso deixa a
   medicao do js/relacionados.js estavel — com auto-fit, esconder um card
   faria os outros esticarem e mudaria quantos cabem, num ciclo sem fim. */
.lumen-rel-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }

/* Enquanto o JS nao mede, mostra so a primeira fileira provavel, para nao
   piscar uma parede de cards no carregamento. */
.lumen-rel-grid:not(.medido) .lumen-card:nth-child(n + 10) { display: none; }

/* ---- data no cabecalho do post ---- */
.single-meta .date i {
  margin-right: 6px;
  color: #e50914;
  font-size: .9em;
}

@media (max-width: 640px) {
  .lumen-rel-titulo { font-size: 1rem; }
  .lumen-rel-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
}

/* 12 relacionados enchem a fileira no desktop. No celular seriam varias
   fileiras, entao a partir do 7o item eles somem — imagem com loading
   lazy dentro de display:none nem chega a ser baixada. */


/* ==========================================================================
   HEADER E SIDEBAR — reforma

   Sobrescreve as regras originais. O que mudou de conceito:

     - a barra deixa de ser um bloco chapado e ganha fundo translucido
       com blur, linha vermelha embaixo e sombra so ao rolar
     - o destaque do logo era VERDE (#22c55e) num tema inteiro vermelho
       (#e50914); passou a usar a cor da marca
     - a busca sai da caixa retangular de borda preta e vira pilula, com
       anel de foco na cor da marca
     - o hamburguer vira X quando a gaveta esta aberta
     - a sidebar ganha item ativo, espacamento menor e barra de rolagem
       discreta
   ========================================================================== */

:root {
  --navbar-h: 68px;
  --marca: #e50914;
  --marca-esc: #b00610;
}

/* ---------- barra superior ---------- */

.top-navbar {
  height: var(--navbar-h);
  padding: 0 20px;
  gap: 16px;
  background: rgba(20, 20, 20, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #262626;
  box-shadow: none;
  transition: box-shadow .25s ease, background .25s ease;
}

.top-navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--marca), transparent 65%);
}

body.rolou .top-navbar {
  background: rgba(15, 15, 15, .97);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55);
}

/* ---------- logo ---------- */

.logo-text {
  font-size: 27px;
  letter-spacing: 1.5px;
  transition: color .25s ease, text-shadow .25s ease;
}

.logo-highlight { color: var(--marca); }

.logo-text:hover {
  color: #fff;
  text-shadow: none;
}

.logo-text:hover .logo-highlight {
  color: #ff2530;
  text-shadow: 0 0 16px rgba(229, 9, 20, .65);
}

/* ---------- hamburguer ---------- */

.hamburger-btn {
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 40px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 9px;
  color: #ccc;
  font-size: 17px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.hamburger-btn:hover {
  border-color: var(--marca);
  color: #fff;
  background: rgba(229, 9, 20, .1);
}

/* vira X com a gaveta aberta (f00d = fa-xmark) */
.hamburger-btn[aria-expanded="true"] { border-color: var(--marca); color: #fff; }
.hamburger-btn[aria-expanded="true"] .fa-bars::before { content: "\f00d"; }

/* ---------- busca ---------- */

.search-box-wrapper { max-width: 380px; }

.lumen-search-form {
  background: #1c1c1c;
  border: 1px solid #333;
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.lumen-search-form:focus-within {
  background: #212121;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, .16);
}

.lumen-search-input {
  padding: 11px 6px 11px 18px;
  color: #eee;
  font-size: 13.5px;
}

.lumen-search-input::placeholder { color: #7a7a7a; }

.lumen-search-btn {
  background: transparent;
  color: #8a8a8a;
  padding: 11px 16px 11px 10px;
  transition: color .2s ease;
}

.lumen-search-btn:hover { color: var(--marca); background: transparent; }

.search-toggle {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ccc;
  font-size: 17px;
  transition: background .2s ease, color .2s ease;
}

.search-toggle:hover { background: #262626; color: #fff; }

/* ---------- busca do celular ---------- */

.mobile-search {
  background: rgba(20, 20, 20, .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #262626;
  padding: 12px 16px;
}

/* ---------- sidebar ---------- */

.sidebar {
  width: 235px;
  padding: 18px 14px;
  background: #141414;
  border-right: 1px solid #212121;
  scrollbar-width: thin;
  scrollbar-color: #333 #141414;
}

.sidebar nav ul li { margin-bottom: 3px; }

.sidebar nav ul li a {
  padding: 11px 13px;
  border-radius: 9px;
  font-size: .92rem;
  font-weight: 500;
  color: #c9c9c9;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}

.sidebar nav ul li a:hover {
  background: #1f1f1f;
  color: #fff;
  padding-left: 17px;
}

/* item da pagina atual */
.sidebar nav ul li.current-menu-item > a,
.sidebar nav ul li.current-menu-parent > a,
.sidebar nav ul li.current-menu-ancestor > a {
  background: linear-gradient(90deg, rgba(229, 9, 20, .18), transparent);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--marca);
}

/* seta do submenu, desenhada em CSS no lugar do caractere ▶ */
.sidebar nav ul li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform .22s ease;
  opacity: .7;
}

.sidebar nav ul li.menu-item-has-children.open > a::after {
  transform: translateY(1px) rotate(45deg);
  opacity: 1;
}

.sidebar nav ul li.menu-item-has-children.open > a { color: #fff; }

.sidebar nav ul li ul.sub-menu {
  padding-left: 10px;
  margin: 4px 0 8px;
  border-left: 2px solid #2a2a2a;
}

.sidebar nav ul li ul.sub-menu li { margin-bottom: 2px; }

.sidebar nav ul li ul.sub-menu li a {
  background: transparent;
  font-size: .84rem;
  font-weight: 400;
  color: #9a9a9a;
  padding: 8px 12px;
}

.sidebar nav ul li ul.sub-menu li a:hover {
  background: #1f1f1f;
  color: var(--marca);
  padding-left: 16px;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: #141414; }
.sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--marca); }

/* ---------- overlay ---------- */

.sidebar-overlay {
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(2px);
}

@media (max-width: 900px) {
  .top-navbar { padding: 0 14px; gap: 10px; }
  .logo-text { font-size: 22px; }
}


/* ---- Quem aparece em cada tamanho de tela ----
   No desktop a sidebar ja fica fixa a esquerda e a busca aparece inteira
   na barra, entao hamburguer e lupa nao tem funcao. Eles so existem no
   celular. As regras acima definem a APARENCIA; o display fica aqui, para
   nao anular as media queries do tema.
   (Foi o que aconteceu quando escrevi display:flex solto nelas.) */

.hamburger-btn,
.search-toggle {
  display: none;
}

@media (max-width: 768px) {

  .hamburger-btn,
  .search-toggle {
    display: flex !important;
  }

  .search-box-wrapper { display: none !important; }
}

/* ==========================================================================
   ESQUEMA DE CORES: LIGHT
   Ativado em Opções do Tema → Esquema de cores → Light.
   Adiciona a classe .lumen-light no <body>.

   A cobertura abaixo saiu de uma VARREDURA do próprio style.css: 44
   seletores com fundo escuro e 32 usando a cor da marca. Não é lista
   escrita por suposição — no tema anterior eu chutei nomes de classe e
   metade das regras não casava com nada.

   O vermelho da marca é mantido: #e50914 tem 5.2:1 sobre branco, então
   passa em texto e em botão. O que muda é a base neutra.
   ========================================================================== */

body.lumen-light {
  --c-bg:      #f5f6f8;
  --c-surf:    #ffffff;
  --c-surf-2:  #eef0f3;
  --c-surf-3:  #e4e7ec;
  --c-borda:   #e2e5ea;
  --c-borda-2: #cdd3db;
  --c-txt:     #15181d;
  --c-txt-2:   #5a6472;
  /* No claro a marca e VERDE, nao o vermelho do tema escuro: sao duas
     identidades. #0a7a33 da 5.46:1 sobre branco — o verde vivo do tipo
     #22c55e daria 2.28:1, ilegivel. */
  --marca:     #0a7a33;
  --marca-esc: #056027;

  background-color: var(--c-bg);
  color: var(--c-txt);
}

/* ---------- cabecalho ---------- */

body.lumen-light .top-navbar {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--c-borda);
}

body.lumen-light.rolou .top-navbar,
body.lumen-light .top-navbar { box-shadow: none; }
body.rolou.lumen-light .top-navbar { box-shadow: 0 4px 18px rgba(21, 24, 29, .08); }

body.lumen-light .logo-text { color: var(--c-txt); }
body.lumen-light .logo-text:hover { color: var(--c-txt); }

body.lumen-light .hamburger-btn { border-color: var(--c-borda-2); color: var(--c-txt-2); }
body.lumen-light .hamburger-btn:hover {
  border-color: var(--marca);
  color: var(--marca);
  background: rgba(10, 122, 51, .07);
}

body.lumen-light .search-toggle { color: var(--c-txt-2); }
body.lumen-light .search-toggle:hover { background: var(--c-surf-2); color: var(--c-txt); }

body.lumen-light .lumen-search-form { background: var(--c-surf-2); border-color: var(--c-borda-2); }
body.lumen-light .lumen-search-form:focus-within {
  background: var(--c-surf);
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(10, 122, 51, .12);
}
body.lumen-light .lumen-search-input { color: var(--c-txt); }
body.lumen-light .lumen-search-input::placeholder { color: #8a93a0; }
body.lumen-light .lumen-search-btn { background: transparent; color: var(--c-txt-2); }
body.lumen-light .lumen-search-btn:hover { color: var(--marca); }

body.lumen-light .mobile-search { background: rgba(255, 255, 255, .97); border-bottom-color: var(--c-borda); }

/* ---------- sidebar ---------- */

body.lumen-light .sidebar { background: var(--c-surf); border-right-color: var(--c-borda); }
body.lumen-light .sidebar nav ul li a { color: var(--c-txt-2); }
body.lumen-light .sidebar nav ul li a:hover { background: var(--c-surf-2); color: var(--c-txt); }

body.lumen-light .sidebar nav ul li.current-menu-item > a,
body.lumen-light .sidebar nav ul li.current-menu-parent > a,
body.lumen-light .sidebar nav ul li.current-menu-ancestor > a {
  background: linear-gradient(90deg, rgba(10, 122, 51, .1), transparent);
  color: var(--c-txt);
}

body.lumen-light .sidebar nav ul li ul.sub-menu { border-left-color: var(--c-borda-2); }
body.lumen-light .sidebar nav ul li ul.sub-menu li a { background: transparent; color: var(--c-txt-2); }
body.lumen-light .sidebar nav ul li ul.sub-menu li a:hover { background: var(--c-surf-2); color: var(--marca); }

body.lumen-light .sidebar::-webkit-scrollbar-track { background: var(--c-surf); }
body.lumen-light .sidebar::-webkit-scrollbar-thumb { background: var(--c-borda-2); }
body.lumen-light .sidebar-overlay { background: rgba(21, 24, 29, .4); }

/* ---------- caixas e listagens ---------- */

body.lumen-light .container-box,
body.lumen-light .tabs-wrapper,
body.lumen-light .trend-card,
body.lumen-light .trend-card div {
  background: var(--c-surf);
  border: 1px solid var(--c-borda);
  color: var(--c-txt);
}

body.lumen-light .container-box.iframe-container,
body.lumen-light .iframe-wrapper iframe { background: var(--c-surf-3); }

body.lumen-light .featured-games-title,
body.lumen-light .single-title,
body.lumen-light section h2 { color: var(--c-txt); }

body.lumen-light .section-btn {
  background: var(--c-surf-2);
  border: 1px solid var(--c-borda);
  color: var(--c-txt-2);
}
body.lumen-light .section-btn:hover { background: var(--c-surf-3); color: var(--c-txt); }
body.lumen-light .section-btn.active-filter { background: var(--marca); border-color: var(--marca); color: #fff; }

body.lumen-light .pagination-wrapper .page-numbers {
  background: var(--c-surf);
  border: 1px solid var(--c-borda);
  color: var(--c-txt-2);
}
body.lumen-light .pagination-wrapper .page-numbers:hover { border-color: var(--marca); color: var(--marca); }
body.lumen-light .pagination-wrapper .page-numbers.current { background: var(--marca); border-color: var(--marca); color: #fff; }

/* ---------- card ---------- */

body.lumen-light .lumen-card { background: var(--c-surf); border-color: var(--c-borda); }
body.lumen-light .lumen-card:hover { border-color: var(--marca); box-shadow: 0 12px 26px rgba(21, 24, 29, .12); }
body.lumen-light .lumen-poster { background: var(--c-surf-2); }
body.lumen-light .lumen-sem-capa { background: linear-gradient(135deg, var(--c-surf-2), var(--c-surf-3)); }
body.lumen-light .lumen-titulo { color: var(--c-txt); }
body.lumen-light .lumen-card:hover .lumen-titulo { color: var(--marca); }

body.lumen-light .lumen-chip { background: var(--c-surf-2); border-color: var(--c-borda); color: var(--c-txt-2); }
body.lumen-light .lumen-chip-tipo {
  color: var(--marca-esc);
  background: rgba(10, 122, 51, .09);
  border-color: rgba(10, 122, 51, .24);
}

/* selos ficam escuros sobre a capa nos dois esquemas: e o unico jeito de
   funcionar sobre qualquer poster */
body.lumen-light .lumen-selo-nota,
body.lumen-light .lumen-selo-ano { background: rgba(21, 24, 29, .74); color: #fff; }
body.lumen-light .lumen-selo-nota { color: #ffd54a; }

/* ---------- painel de downloads ---------- */

body.lumen-light .lumen-downloads { background: var(--c-surf); border-color: var(--c-borda); }
body.lumen-light .lumen-dl-contagem { background: rgba(0, 0, 0, .22); }

body.lumen-light .lumen-grupo { border-top-color: var(--c-borda); }
body.lumen-light .lumen-grupo-cab { background: var(--c-surf); color: var(--c-txt); }
body.lumen-light .lumen-grupo-cab:hover,
body.lumen-light .lumen-grupo.aberto .lumen-grupo-cab { background: var(--c-surf-2); }

body.lumen-light .lumen-grupo-qtd {
  color: var(--marca-esc);
  background: rgba(10, 122, 51, .1);
  border-color: rgba(10, 122, 51, .26);
}

body.lumen-light .lumen-seta { border-color: var(--c-txt-2); }
body.lumen-light .lumen-grupo.aberto .lumen-seta { border-color: var(--marca); }

body.lumen-light .lumen-item { background: var(--c-surf-2); border-color: var(--c-borda); }
body.lumen-light .lumen-item:hover { background: var(--c-surf-3); border-color: var(--marca); }
body.lumen-light .lumen-item-tam { color: var(--c-txt); }
body.lumen-light .lumen-item-fmt { color: var(--c-txt-2); }

body.lumen-light .lumen-bloco-q.q-sd { background: var(--c-borda-2); color: var(--c-txt-2); }

body.lumen-light .lumen-copiar { background: var(--c-surf); border-color: var(--c-borda-2); color: var(--c-txt-2); }
body.lumen-light .lumen-copiar:hover { background: var(--c-surf-2); color: var(--c-txt); }

body.lumen-light .lumen-legendas-linha { color: var(--c-txt-2); }
body.lumen-light .lumen-legendas-linha a {
  color: #8a6100;
  background: rgba(245, 197, 24, .16);
  border-color: rgba(245, 197, 24, .5);
}
body.lumen-light .lumen-legendas-linha a:hover { background: #f5c518; color: #1a1a1a; }

/* ---------- relacionados, tags, elenco ---------- */

body.lumen-light .lumen-rel-titulo { color: var(--c-txt); }

body.lumen-light .tag-badge {
  background: var(--c-surf-2);
  border: 1px solid var(--c-borda);
  color: var(--c-txt-2);
}
body.lumen-light .tag-badge:hover { background: var(--marca); border-color: var(--marca); color: #fff; }

body.lumen-light .elenco-item img { background: var(--c-surf-2); }
body.lumen-light .elenco-nome { color: var(--c-txt); }
body.lumen-light .elenco-personagem { color: var(--c-txt-2); }
body.lumen-light .elenco-btn { background: var(--c-surf); border: 1px solid var(--c-borda); color: var(--c-txt); }
body.lumen-light .elenco-btn:hover { background: var(--marca); border-color: var(--marca); color: #fff; }

/* ---------- modais, rodape, barra de rolagem ---------- */

body.lumen-light .modal-overlay { background: rgba(21, 24, 29, .55); }
body.lumen-light .modal-content { background: var(--c-surf); color: var(--c-txt); }
body.lumen-light .modal-header { background: var(--c-surf-2); border-bottom: 1px solid var(--c-borda); }

body.lumen-light .site-footer { background: var(--c-surf); border-top: 1px solid var(--c-borda); color: var(--c-txt-2); }
body.lumen-light .footer-links-inline a { color: var(--c-txt-2); }
body.lumen-light .footer-links-inline a:hover { color: var(--marca); }
body.lumen-light .footer-divider { background: var(--c-borda); }

body.lumen-light ::-webkit-scrollbar-track { background: var(--c-surf-2); }
body.lumen-light ::-webkit-scrollbar-thumb { background: var(--c-borda-2); }
body.lumen-light ::-webkit-scrollbar-thumb:hover { background: var(--marca); }

body.lumen-light .single-meta,
body.lumen-light .single-meta .date { color: var(--c-txt-2); }

/* ---- Light: superficies que a primeira varredura deixou passar ----

   A varredura anterior usava uma LISTA de tons escuros escrita a mao, e
   #181818 e #121212 nao estavam nela — por isso a area de conteudo
   continuava preta enquanto cabecalho e sidebar viravam brancos.

   Refeita medindo a luminancia de cada cor de fundo, achou 57 seletores
   escuros no tema, 13 sem cobertura. Os que sao ACENTO (botao de baixar,
   topo do painel, gradientes de resolucao, linha vermelha) continuam
   coloridos de proposito — so as SUPERFICIES mudam. */

body.lumen-light .content,
body.lumen-light .single-container {
  background-color: var(--c-bg);
}

body.lumen-light .featured-card {
  background: var(--c-surf);
  border: 1px solid var(--c-borda);
}

body.lumen-light .elenco-item { background: var(--c-surf-2); }

body.lumen-light .nav-tabs .nav-link.active {
  background: var(--c-surf);
  border-color: var(--c-borda);
  color: var(--c-txt);
}

body.lumen-light .nav-tabs .nav-link { color: var(--c-txt-2); }
body.lumen-light .nav-tabs .nav-link:hover { color: var(--c-txt); }

/* bloco de resolucao sem valor reconhecido */
body.lumen-light .lumen-bloco-q { background: var(--c-borda-2); color: var(--c-txt-2); }
body.lumen-light .lumen-bloco-q.q-fhd,
body.lumen-light .lumen-bloco-q.q-4k,
body.lumen-light .lumen-bloco-q.q-2k,
body.lumen-light .lumen-bloco-q.q-8k { color: #fff; }
body.lumen-light .lumen-bloco-q.q-hd { color: #06281f; }

/* ==========================================================================
   SINGLE — mais destaque
   Vale nos dois esquemas. A pagina tinha tudo com o mesmo peso visual:
   titulo pequeno, poster solto, rotulos e valores quase iguais.
   ========================================================================== */

.single-title {
  position: relative;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.15;
  padding-left: 16px;
  margin-bottom: 10px;
}

/* barra vermelha a esquerda, do tamanho do titulo */
.single-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e50914, #7d0409);
}

.single-meta {
  padding-left: 16px;
  margin-bottom: 26px;
  font-size: 13.5px;
}

/* poster ganha moldura e sombra em vez de ficar solto */
.single-left-column img {
  max-height: none;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ---- abas ---- */
.nav-tabs { border-bottom: 1px solid #2e2e2e; gap: 2px; }

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-right: 0;
  padding: 11px 18px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: color .18s ease, border-color .18s ease;
}

.nav-tabs .nav-link:hover { color: #fff; border-bottom-color: #444; }

.nav-tabs .nav-link.active {
  background: transparent;
  color: #fff;
  border-color: transparent transparent #e50914;
  border-bottom-width: 2px;
}

/* ---- ficha tecnica ---- */
.info-label,
.tab-content strong,
.tab-content b {
  color: #fff;
  font-weight: 700;
}

.tab-content p { margin-bottom: 11px; line-height: 1.6; }

/* ---- light ---- */

body.lumen-light .single-title { color: var(--c-txt); }

body.lumen-light .single-left-column img {
  border-color: var(--c-borda);
  box-shadow: 0 14px 32px rgba(21, 24, 29, .16);
}

body.lumen-light .nav-tabs { border-bottom-color: var(--c-borda); }
body.lumen-light .nav-tabs .nav-link { color: var(--c-txt-2); }
body.lumen-light .nav-tabs .nav-link:hover { color: var(--c-txt); border-bottom-color: var(--c-borda-2); }
body.lumen-light .nav-tabs .nav-link.active {
  background: transparent;
  color: var(--c-txt);
  border-color: transparent transparent var(--marca);
}

body.lumen-light .info-label,
body.lumen-light .tab-content strong,
body.lumen-light .tab-content b { color: var(--c-txt); }

body.lumen-light .tab-content { color: var(--c-txt-2); }

/* ---- CORRECAO: o bloco de resolucao perdeu a cor no light ----
   A regra body.lumen-light .lumen-bloco-q veio depois de .lumen-bloco-q.q-fhd e,
   com peso igual, venceu — o gradiente virou cinza. Aqui a especificidade
   sobe para o gradiente voltar. */

body.lumen-light .lumen-bloco-q.q-8k  { background: linear-gradient(135deg, #ff8a00, #e52e71); color: #fff; }
body.lumen-light .lumen-bloco-q.q-4k  { background: linear-gradient(135deg, #7b2ff7, #f107a3); color: #fff; }
body.lumen-light .lumen-bloco-q.q-2k  { background: linear-gradient(135deg, #0575e6, #021b79); color: #fff; }
body.lumen-light .lumen-bloco-q.q-fhd { background: linear-gradient(135deg, #e50914, #7d0409); color: #fff; }
body.lumen-light .lumen-bloco-q.q-hd  { background: linear-gradient(135deg, #11998e, #38ef7d); color: #06281f; }

@media (max-width: 640px) {
  .single-title { font-size: 25px; padding-left: 12px; }
  .single-title::before { width: 4px; }
  .single-meta { padding-left: 12px; }
  .nav-tabs .nav-link { padding: 10px 13px; }
}

/* ==========================================================================
   MODAL DO TRAILER

   Fica escuro nos DOIS esquemas, de proposito. Alem de ser a convencao
   para video, resolve um problema real: o .modal-title vem com a classe
   text-white do Bootstrap fixa no HTML, e o .btn-close-white idem — ao
   clarear o cabecalho no light, o titulo virava branco sobre branco.

   As regras genericas de modal do esquema claro sao anuladas aqui.
   ========================================================================== */

#trailerModal .modal-dialog { max-width: 900px; }

#trailerModal .modal-content,
body.lumen-light #trailerModal .modal-content {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

#trailerModal .modal-header,
body.lumen-light #trailerModal .modal-header {
  background: #0d0d0d;
  border-bottom: 1px solid #1f1f1f;
  padding: 14px 20px;
}

#trailerModal .modal-title,
body.lumen-light #trailerModal .modal-title {
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

/* barrinha vermelha antes do titulo */
#trailerModal .modal-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 15px;
  margin-right: 10px;
  vertical-align: -2px;
  border-radius: 2px;
  background: #e50914;
}

#trailerModal .btn-close,
body.lumen-light #trailerModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .65;
  transition: opacity .18s ease;
}

#trailerModal .btn-close:hover { opacity: 1; }

/* video ocupa a caixa inteira, sem margem sobrando */
#trailerModal .modal-body { padding: 0; background: #000; }

#trailerModal .modal-body iframe,
#trailerModal .modal-body .ratio,
#trailerModal .modal-body embed,
#trailerModal .modal-body video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;   /* junto com aspect-ratio, senao o navegador ignora */
  border: 0;
}

#trailerModal .modal-backdrop,
.modal-backdrop.show { opacity: .82; }

@media (max-width: 640px) {
  #trailerModal .modal-dialog { margin: 12px; }
  #trailerModal .modal-header { padding: 12px 15px; }
  #trailerModal .modal-title { font-size: .88rem; }
}

/* Frase logo acima do painel de downloads */
.lumen-frase {
  /* Respira entre o bloco anterior e o painel de downloads. */
  margin: 32px 0 16px;
  padding: 0 6px;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  color: #ececec;
  text-align: center;
}

.lumen-frase-titulo { color: #fff; font-weight: 800; }

body.lumen-light .lumen-frase { color: var(--c-txt-2); }
body.lumen-light .lumen-frase-titulo { color: var(--marca); }

@media (max-width: 640px) {
  .lumen-frase { font-size: .93rem; margin: 24px 0 12px; text-align: left; }
}

/* ---- Legibilidade da ficha tecnica ----

   .tab-pane tem color:#ccc declarado nele mesmo. Como a cor que eu havia
   posto ficava no .tab-content (o pai), ela chegava por HERANCA — e valor
   herdado sempre perde para valor declarado direto no elemento, seja qual
   for a especificidade. Por isso os valores continuavam cinza-claro.

   Aqui a cor vai no proprio .tab-pane. */

body.lumen-light .tab-pane,
body.lumen-light .tab-pane p,
body.lumen-light .tab-pane li {
  color: #3c4552;          /* 8.7:1 sobre branco */
}

body.lumen-light .tab-pane strong,
body.lumen-light .tab-pane b {
  color: var(--c-txt);     /* rotulo mais escuro que o valor */
}

/* links da ficha na cor da marca, em vez do azul padrao */
body.lumen-light .tab-pane a {
  color: var(--marca);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 122, 51, .3);
  transition: border-color .18s ease;
}

body.lumen-light .tab-pane a:hover {
  color: var(--marca-esc);
  border-bottom-color: var(--marca-esc);
}

/* mesmo tratamento no escuro: valor mais claro que o padrao #ccc */
.tab-pane p,
.tab-pane li { color: #d6d6d6; }

.tab-pane a {
  color: #ff6b73;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 107, 115, .35);
}

.tab-pane a:hover { color: #ff9aa0; border-bottom-color: #ff9aa0; }

/* espacamento entre as linhas da ficha */
.tab-pane p { margin-bottom: 12px; line-height: 1.55; }

/* ---- Light: acentos que estavam fixos no vermelho ----
   Alguns pontos usavam #e50914 direto, fora da variavel --marca, entao
   nao acompanharam a troca para verde. */

body.lumen-light .single-title::before {
  background: linear-gradient(180deg, var(--marca), var(--marca-esc));
}

body.lumen-light .single-meta .date i { color: var(--marca); }

body.lumen-light .lumen-rel-titulo { border-left-color: var(--marca); }
body.lumen-light .lumen-rel-titulo::after {
  background: linear-gradient(90deg, var(--marca), transparent);
}

body.lumen-light .lumen-dl-topo {
  background: linear-gradient(90deg, var(--marca) 0%, var(--marca-esc) 100%);
}

body.lumen-light .lumen-baixar { background: var(--marca); }
body.lumen-light .lumen-baixar:hover { background: var(--marca-esc); color: #fff; }

body.lumen-light .lumen-bloco-q.q-fhd {
  background: linear-gradient(135deg, var(--marca), var(--marca-esc));
}

body.lumen-light .top-navbar::after {
  background: linear-gradient(90deg, var(--marca), transparent 65%);
}

body.lumen-light .sidebar nav ul li.current-menu-item > a,
body.lumen-light .sidebar nav ul li.current-menu-parent > a,
body.lumen-light .sidebar nav ul li.current-menu-ancestor > a {
  box-shadow: inset 3px 0 0 var(--marca);
}

body.lumen-light .sidebar::-webkit-scrollbar-thumb:hover,
body.lumen-light ::-webkit-scrollbar-thumb:hover { background: var(--marca); }

body.lumen-light .modal-close { background: var(--marca); }
body.lumen-light .modal-close:hover { background: var(--marca-esc); }

body.lumen-light .lumen-card:hover { border-color: var(--marca); }
body.lumen-light .lumen-selo-qualidade { background: rgba(10, 122, 51, .92); }

body.lumen-light .logo-text:hover .logo-highlight {
  color: var(--marca-esc);
  text-shadow: 0 0 14px rgba(10, 122, 51, .4);
}

/* O logo destaca em verde no claro */
body.lumen-light .logo-highlight { color: var(--marca); }

/* ---- Light: os ultimos pontos vermelhos ----
   Varredura final. Sao regras do tema escuro que o claro nao anulava,
   entao o vermelho ainda escapava em alguns detalhes. */

body.lumen-light .nav-tabs .nav-link.active { border-bottom-color: var(--marca); }
body.lumen-light .lumen-grupo-qtd {
  color: var(--marca-esc);
  background: rgba(10, 122, 51, .1);
  border-color: rgba(10, 122, 51, .28);
}
body.lumen-light .lumen-grupo.aberto .lumen-seta { border-color: var(--marca); }
body.lumen-light .lumen-item:hover { border-color: var(--marca); }
body.lumen-light .sidebar nav ul li a:hover { color: var(--c-txt); }
body.lumen-light .sidebar nav ul li ul.sub-menu li a:hover { color: var(--marca); }
body.lumen-light .single-info strong { color: var(--c-txt); }
body.lumen-light .lumen-search-form:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(10, 122, 51, .14);
}
body.lumen-light .section-btn.active-filter { background: var(--marca); border-color: var(--marca); }
body.lumen-light .pagination-wrapper .page-numbers.current { background: var(--marca); border-color: var(--marca); }
body.lumen-light .pagination-wrapper .page-numbers:hover { border-color: var(--marca); color: var(--marca); }
body.lumen-light .hamburger-btn:hover { border-color: var(--marca); color: var(--marca); background: rgba(10, 122, 51, .08); }
body.lumen-light .lumen-chip-tipo {
  color: var(--marca-esc);
  background: rgba(10, 122, 51, .1);
  border-color: rgba(10, 122, 51, .26);
}
body.lumen-light .tag-badge:hover { background: var(--marca); border-color: var(--marca); }
body.lumen-light .elenco-btn:hover { background: var(--marca); border-color: var(--marca); }
body.lumen-light .footer-links-inline a:hover { color: var(--marca); }
body.lumen-light .lumen-search-btn:hover { color: var(--marca); }
body.lumen-light .search-toggle:hover { color: var(--marca); }
body.lumen-light .tab-pane a { color: var(--marca); border-bottom-color: rgba(10, 122, 51, .3); }
body.lumen-light .tab-pane a:hover { color: var(--marca-esc); border-bottom-color: var(--marca-esc); }
body.lumen-light .lumen-card:hover .lumen-titulo { color: var(--marca); }
body.lumen-light .lumen-copiar.copiado { background: var(--marca); border-color: var(--marca); color: #fff; }

body.lumen-light .featured-card a { color: var(--marca); }
body.lumen-light .footer-links-inline li a:hover { color: var(--marca); }
body.lumen-light ::-webkit-scrollbar-thumb { background: var(--c-borda-2); }
body.lumen-light body::-webkit-scrollbar-thumb,
body.lumen-light::-webkit-scrollbar-thumb { background: var(--marca); }


/* ==========================================================================\n   HEADER + SIDEBAR DE DESCOBERTA — 2026-09\n   Menu principal no topo; sidebar inspirada em catalogos de streaming.\n   A sidebar termina em GENEROS: sem Upcoming, Streaming ou Countries.\n   ========================================================================== */

/* Menu principal fica imediatamente depois da logo no desktop. */
.desktop-main-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

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

.desktop-main-menu > li {
  position: relative;
  margin: 0;
}

.desktop-main-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 11px;
  border-radius: 8px;
  color: #c5cad3;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}

.desktop-main-menu > li > a:hover,
.desktop-main-menu > li.current-menu-item > a,
.desktop-main-menu > li.current-menu-parent > a,
.desktop-main-menu > li.current-menu-ancestor > a {
  color: #fff;
  background: #242429;
}

.desktop-main-menu .sub-menu {
  /* Mantem o espacamento visual sem criar um "buraco" no hover. */
  display: block;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 7px;
  background: #17171b;
  border: 1px solid #2a2a30;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  z-index: 1200;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-3px);
  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s;
}

/*
 * Ponte invisivel entre o item pai e o submenu.
 * O submenu esta 7px abaixo; esta faixa ocupa exatamente esse caminho,
 * evitando que o cursor perca o :hover ao descer para o submenu.
 */
.desktop-main-menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 9px;
  background: transparent;
}

.desktop-main-menu li:hover > .sub-menu,
.desktop-main-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.desktop-main-menu .sub-menu a {
  display: block;
  padding: 9px 10px;
  border-radius: 7px;
  color: #b7becb;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}

.desktop-main-menu .sub-menu a:hover { background: #242429; color: #fff; }

/* Busca continua presa a direita, depois do menu. */
.top-navbar .search-box-wrapper {
  margin-left: auto;
  flex: 0 1 380px;
  width: min(380px, 34vw);
}

/* Sidebar de descoberta. */
.sidebar {
  width: 260px;
  padding: 22px 16px 28px;
  background: #0f1014;
  border-right: 1px solid #202129;
}

.content { margin-left: 260px; }

.sidebar-discovery,
.sidebar-discovery ul,
.sidebar-discovery li {
  margin: 0;
  padding: 0;
}

.sidebar-discovery ul { list-style: none; }

.sidebar-section + .sidebar-section { margin-top: 27px; }

.sidebar-section-title {
  margin: 0 0 9px 10px;
  color: #73829a;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.sidebar .sidebar-discovery-list li { margin: 0 0 3px; }

.sidebar .sidebar-discovery-list li > a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 9px;
  background: transparent;
  color: #aab5c8;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: color .17s ease, background .17s ease, transform .17s ease;
}

.sidebar .sidebar-discovery-list li > a:hover {
  padding-left: 11px;
  color: #fff;
  background: #1b1d24;
  transform: translateX(2px);
}

.sidebar .sidebar-discovery-list li.is-active > a {
  color: #fff;
  background: var(--marca);
  box-shadow: none;
}

.sidebar-icon {
  width: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1;
}

.sidebar-genres-list { padding-bottom: 6px !important; }

/* O menu principal duplicado dentro da gaveta so aparece no mobile. */
.mobile-main-nav { display: none; }

@media (max-width: 1180px) and (min-width: 769px) {
  .desktop-main-menu > li > a { padding-left: 7px; padding-right: 7px; font-size: 13px; }
  .top-navbar .search-box-wrapper { flex-basis: 285px; width: 285px; }
}

@media (max-width: 768px) {
  .desktop-main-nav { display: none !important; }

  .mobile-main-nav {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid #24262d;
  }

  .mobile-main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-main-menu > li { margin: 0 0 3px; position: relative; }

  .sidebar .mobile-main-menu li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 9px;
    color: #d0d5df;
    background: transparent;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  .sidebar .mobile-main-menu li > a:hover,
  .sidebar .mobile-main-menu li.current-menu-item > a,
  .sidebar .mobile-main-menu li.current-menu-parent > a {
    color: #fff;
    background: #1b1d24;
  }

  .mobile-main-menu .sub-menu {
    display: none;
    list-style: none;
    margin: 4px 0 6px 8px;
    padding: 0 0 0 9px;
    border-left: 1px solid #2b2d35;
  }

  .mobile-main-menu .sub-menu.active { display: block; }

  .sidebar { width: min(86vw, 320px); }
  .content { margin-left: 0 !important; }
}

body.lumen-light .desktop-main-menu > li > a { color: var(--c-txt-2); }
body.lumen-light .desktop-main-menu > li > a:hover,
body.lumen-light .desktop-main-menu > li.current-menu-item > a,
body.lumen-light .desktop-main-menu > li.current-menu-parent > a,
body.lumen-light .desktop-main-menu > li.current-menu-ancestor > a { background: var(--c-surf-2); color: var(--c-txt); }
body.lumen-light .desktop-main-menu .sub-menu { background: var(--c-surf); border-color: var(--c-borda); }
body.lumen-light .desktop-main-menu .sub-menu a { color: var(--c-txt-2); }
body.lumen-light .desktop-main-menu .sub-menu a:hover { background: var(--c-surf-2); color: var(--c-txt); }
body.lumen-light .sidebar-section-title { color: #718096; }
body.lumen-light .sidebar .sidebar-discovery-list li > a { color: var(--c-txt-2); }
body.lumen-light .sidebar .sidebar-discovery-list li > a:hover { background: var(--c-surf-2); color: var(--c-txt); }
body.lumen-light .sidebar .sidebar-discovery-list li.is-active > a { background: var(--marca); color: #fff; }


/* ==========================================================================
   AJUSTES DE LAYOUT — 2026-09-01
   - reduz o espaco entre a navbar e o inicio do catalogo
   - cria um espaco real entre emoji/icone e texto no menu superior
   ========================================================================== */

/* O .content ja reserva a altura da navbar fixa. O margin-top antigo do
   cabecalho do catalogo somava uma segunda navbar inteira e criava o vao. */
.featured-section-header {
  margin-top: 0 !important;
}

/* Icone e rotulo sao separados por spans no desktop via functions.php. */
.desktop-main-menu > li > a {
  gap: 7px;
}

.lumen-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.lumen-menu-label {
  display: inline-block;
}

/* ==========================================================================\n   MENU SUPERIOR CENTRALIZADO — 2026-09-01\n   No desktop, o menu ocupa a coluna central entre a logo e a busca.\n   ========================================================================== */
@media (min-width: 769px) {
  .top-navbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 18px;
  }

  .top-navbar > .logo-text {
    grid-column: 1;
    justify-self: start;
  }

  .top-navbar > .desktop-main-nav {
    grid-column: 2;
    justify-self: center;
    margin: 0;
    min-width: 0;
  }

  .top-navbar > .search-box-wrapper {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }
}


/* ========================================================================== 
   ESTATISTICAS DO MAGNET — discretas dentro da linha de download
   ========================================================================== */
.lumen-torrent-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 13px;
  min-height: 20px;
  margin-top: 5px;
  color: #8f98a8;
  font-size: .72rem;
  line-height: 1.2;
}

.lumen-torrent-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.lumen-torrent-stat strong {
  color: #bcc4d0;
  font-weight: 700;
}

.lumen-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #777;
  flex: 0 0 auto;
}

.lumen-stat-seeds .lumen-stat-dot {
  background: #28c76f;
  box-shadow: 0 0 0 2px rgba(40, 199, 111, .10);
}

.lumen-stat-peers .lumen-stat-dot {
  background: #5b8def;
  box-shadow: 0 0 0 2px rgba(91, 141, 239, .10);
}

.lumen-stat-size i {
  color: #7f8999;
  font-size: .68rem;
}

.lumen-torrent-status {
  color: #636b78;
  font-size: .67rem;
}

.lumen-torrent-stats.is-ready .lumen-torrent-status:empty { display: none; }
.lumen-torrent-stats.is-unavailable .lumen-stat-dot { background: #626262; box-shadow: none; }
.lumen-torrent-stats.is-unavailable .lumen-torrent-stat strong { color: #777; }

@media (max-width: 640px) {
  .lumen-torrent-stats {
    width: 100%;
    gap: 7px 11px;
    margin-top: 7px;
  }
}


/* =====================================================================
 * AVISO DE ANÚNCIOS — downloads DUBLADO NÃO OFICIAL / DUBLADO OFICIAL / LEGENDA FIXA
 * O aviso só existe quando o grupo realmente possui um link cadastrado.
 * ===================================================================== */
.lumen-download-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px 4px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 193, 7, .38);
  border-left: 4px solid #ffc107;
  border-radius: 7px;
  background: rgba(255, 193, 7, .09);
  color: #f4d77a;
  font-size: .82rem;
  line-height: 1.35;
}
.lumen-download-aviso i {
  flex: 0 0 auto;
  color: #ffc107;
  font-size: .95rem;
}
.lumen-download-aviso strong { color: #ffd75e; }

.lumen-anuncio-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 193, 7, .3);
  border-radius: 999px;
  background: rgba(255, 193, 7, .08);
  color: #e7c85d;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.2;
}
.lumen-anuncio-badge i { font-size: .65rem; }

body.lumen-light .lumen-download-aviso {
  background: #fff8df;
  border-color: #e3bd38;
  color: #6c5300;
}
body.lumen-light .lumen-download-aviso i,
body.lumen-light .lumen-download-aviso strong { color: #8a6500; }
body.lumen-light .lumen-anuncio-badge {
  background: #fff7d7;
  border-color: #dfbe46;
  color: #765800;
}

@media (max-width: 640px) {
  .lumen-download-aviso {
    margin: 10px 10px 3px;
    padding: 10px 11px;
    font-size: .78rem;
  }
}


/* Pequena tolerancia extra no item pai para tornar o caminho ao submenu mais confortavel. */
@media (min-width: 769px) {
  .desktop-main-menu > li.menu-item-has-children {
    padding-bottom: 7px;
    margin-bottom: -7px;
  }
}


/* ==========================================================================
   LUMEN V6 — CABEÇALHO DOS RANKINGS DE ACESSO
   ========================================================================== */
.lumen-ranking-header {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  padding: 17px 20px 18px;
  overflow: hidden;
  border: 1px solid rgba(229,9,20,.18);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(229,9,20,.10), transparent 38%),
    linear-gradient(115deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.lumen-ranking-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--marca, #e50914);
}

.lumen-ranking-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--marca, #e50914);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .105em;
}

.lumen-ranking-header__title {
  margin: 0 !important;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.lumen-ranking-header__description {
  margin: 7px 0 0;
  color: #9299a6;
  font-size: 13px;
  line-height: 1.45;
}

body.lumen-light .lumen-ranking-header {
  border-color: rgba(229,9,20,.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(229,9,20,.07), transparent 38%),
    var(--c-surf);
}

body.lumen-light .lumen-ranking-header__description {
  color: var(--c-txt-2);
}

@media (max-width: 600px) {
  .lumen-ranking-header {
    padding: 14px 15px 15px;
    border-radius: 12px;
  }

  .lumen-ranking-header__eyebrow {
    font-size: 10px;
  }

  .lumen-ranking-header__description {
    font-size: 12px;
  }
}

/* Download por demanda — preserva os botoes originais, acresce Copiar link. */
.odl-open, .odl-copy { cursor: pointer; font-family: inherit; font-size: inherit; }
.odl-open:disabled, .odl-copy:disabled { opacity: .65; cursor: progress; }
.odl-copy { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; height: auto; white-space: nowrap; padding: 7px 9px; }
.odl-copy-text { display: inline-block; font-size: 12px; line-height: 1.2; font-weight: 600; }
.odl-copy-icon { font-size: 18px; line-height: 1; }
.odl-feedback { display: block; font-size: 11px; line-height: 1.3; margin-top: 3px; }
.odl-feedback[hidden] { display: none!important; }
.odl-error { color: #ef6060; }
.odl-subtitle { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; vertical-align: middle; }
.odl-subtitle-open { background: transparent; border: 1px solid currentColor; border-radius: 5px; padding: 5px 9px; color: inherit; font-size: 12px; }
.odl-subtitle .odl-copy { padding: 5px 7px; }
.odl-item .odl-open:focus-visible, .odl-item .odl-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lumen-copiar.odl-copy { width: auto; height: auto; padding: 8px 10px; }

.odl-open:not(.odl-subtitle-open) { border: 0; appearance: none; }
.odl-subtitle-open:hover { filter: brightness(1.12); }
@media(max-width: 640px) { .odl-copy-text { font-size: 11px; } .odl-subtitle { margin: 3px 0; } }