:root{
  --mok-container: 1380px;
  --orange: #ff8a00;
  --orange2:#ff5a00;

  --panel: rgba(10,10,10,.78);
  --panel2: rgba(20,20,20,.78);
}

/* =========================================================
   IMPORTANTE:
   - NÃO altero .container global (pra não quebrar o site)
   - tudo é isolado com .page-home
   ========================================================= */

/* =========================
   HEADER (HOME) – BLUSH FULL + LINHA FULL
   (mata o “quadrado” do theme, mas NÃO zera o header)
   ========================= */

.page-home .topbar{ display:none !important; }

/* Header full width */
.page-home .header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  margin: 0 !important;
  z-index: 9999 !important;

  background: rgba(0,0,0,.28) !important;  /* blush full */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border: 0 !important;
  box-shadow: none !important;
  transform: none !important; /* evita “puxar” pra esquerda/direita */
}

/* linha full width (até o canto) */
.page-home .header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: rgba(255,255,255,.10);
  pointer-events:none;
}

/* ✅ Mata o “quadrado/painel” do theme (sem mexer no header) */
.page-home .header .container,
.page-home .header .header-container,
.page-home .header .header-content{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
}

/* Container do header (só alinhamento) */
.page-home .header .container.header-container{
  width: min(var(--mok-container), calc(100% - 26px)) !important;
  margin: 0 auto !important;
  padding: 12px 0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

/* MENU CENTRAL */
.page-home .header .nav-center{
  flex: 1;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap: 14px;

  position: static !important;     /* impede o absolute do theme */
  transform: none !important;      /* impede translate do theme */
}

/* DIREITA */
.page-home .header .nav-right{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}

/* LINKS DO MENU – mais fino + hover */
.page-home .header .nav-center .nav-link{
  position: relative;
  padding: 10px 12px !important;

  font-weight: 600 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;

  color: rgba(255,255,255,.78) !important;
  text-decoration: none !important;

  border-radius: 10px;
  transition: .18s ease;
}

.page-home .header .nav-center .nav-link:hover{
  color: rgba(255,255,255,.96) !important;
  background: rgba(255,255,255,.06) !important;
}

/* underline */
.page-home .header .nav-center .nav-link::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg,
     rgba(255,138,0,0),
    rgba(255,138,0,.9),
    rgba(255,90,0,.9),
    rgba(255,138,0,0)
  );
  opacity: 0;
  transform: translateY(3px);
  transition: .18s ease;
  border-radius: 999px;
}

.page-home .header .nav-center .nav-link:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* ÍCONES */
@media (min-width: 900px){
  .page-home .header .nav-center .nav-link{
    padding-left: 28px !important;
  }

  .page-home .header .nav-center .nav-link::before{
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left: 10px;
    top:50%;
    transform:translateY(-50%);
    opacity:.78;
    font-size: 13px;
  }

  .page-home .header .nav-center .nav-link:nth-child(1)::before{ content:"\f015"; }
  .page-home .header .nav-center .nav-link:nth-child(2)::before{ content:"\f1ea"; }
  .page-home .header .nav-center .nav-link:nth-child(3)::before{ content:"\f02d"; }
  .page-home .header .nav-center .nav-link:nth-child(4)::before{ content:"\f019"; }
  .page-home .header .nav-center .nav-link:nth-child(5)::before{ content:"\f06b"; }
  .page-home .header .nav-center .nav-link:nth-child(6)::before{ content:"\f091"; }
}

/* =========================================================
   ESCONDE MENU MOBILE NO DESKTOP (corrige links roxos)
   ========================================================= */
@media (min-width: 961px){
  .page-home .mobile-menu{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }
}
/* =========================================================
   HOME: MATA QUALQUER HEADER DO theme-dark.css
   (evita “cortar” o blush e remove left/transform antigos)
   ========================================================= */
.page-home .header{
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;

  width: 100vw !important;
  max-width: none !important;

  transform: none !important;       /* REMOVE translateX(-50%) antigo */
  margin: 0 !important;

  position: fixed !important;

  background: rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* linha full width */
.page-home .header::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:1px !important;
  width: auto !important;           /* NÃO usa 100vw pra evitar bug com scrollbar */
  background: rgba(255,255,255,.10) !important;
  pointer-events:none !important;
}

/* mata QUALQUER “caixa” do theme no container */
.page-home .header .container,
.page-home .header .header-container,
.page-home .header .header-content{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  max-width: none !important;
  width: 100% !important;

  transform: none !important;       /* REMOVE translateY(-4px) etc */
}

/* remove paddings gigantes do theme */
.page-home .header .header-container{
  padding: 0 !important;
}

/* seu alinhamento real do header */
.page-home .header .container.header-container{
  width: min(var(--mok-container), calc(100% - 26px)) !important;
  margin: 0 auto !important;
  padding: 12px 0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

/* garante que o nav-center NÃO fica absolute (theme faz isso) */
.page-home .header .nav-center{
  position: static !important;
  transform: none !important;
}




/* não empurrar conteúdo pra baixo (home tem hero controlado) */
.page-home main{ padding-top: 0 !important; }

/* =========================
   HERO (ALTURA CORRETA + ESTÁVEL)
   ========================= */
.page-home .hero-mok{
  position: relative;
  min-height: 178vh;           /* altura base do hero */
  overflow: visible;          /* permite glow e botões “invadirem” */
  z-index: 1;

  background:
    radial-gradient(circle at 40% 22%, rgba(255,140,60,.16), transparent 58%),
    radial-gradient(circle at 80% 40%, rgba(255,90,0,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.88));
}

/* =========================
   HERO INNER (NÃO ENCOLHE)
   ========================= */
.page-home .hero-inner{
  position: relative;
  z-index: 2;

  min-height: 82vh;           /* acompanha o hero */
  width: min(var(--mok-container), calc(100% - 26px));
  margin: 0 auto;

  padding-top: 220px;         /* espaço correto pro header */
  padding-bottom: 40px;       /* garante respiro pros botões */

  display: flex;
  align-items: flex-end;
  justify-content: center;

  box-sizing: border-box;     /* CRÍTICO: impede encolhimento */
}


.page-home .hero-dark{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 35%, rgba(0,0,0,.02), rgba(0,0,0,.74));
  pointer-events:none;
  z-index: 1;
}

/* PARTÍCULAS SUBINDO (brasas) */
.page-home .ember-field{
  position:absolute;
  inset:0;
  z-index: 2;
  pointer-events:none;
  overflow:hidden;
}
.page-home .ember{
  position:absolute;
  bottom: -12vh;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,170,70,.92) 0%, rgba(255,90,0,.35) 45%, transparent 70%);
  filter: blur(.2px);
  animation-name: emberRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes emberRise{
  0%   { transform: translate3d(0,0,0) scale(.9); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(-12vw,-120vh,0) scale(.45); opacity: 0; }
}

/* HERO INNER (container próprio da home) */
.page-home .hero-mok{
  min-height: 58vh; /* diminui o espaço gigante do banner */
}

.page-home .hero-inner{
  position: relative;
  z-index: 2;
  min-height: 58vh; /* acompanha o hero */
  width: min(var(--mok-container), calc(100% - 26px));
  transform: translateX(100px);

  padding-top: 180px;   /* ajuste fino */
  padding-bottom: 0px;  /* NUNCA negativo */

  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.page-home .live-strip-full{
  margin-top: -18px; /* vai puxando pra cima até colar */
}
/* ====== REMOVE GAP ENTRE HERO E LIVE (COLAR DE VERDADE) ====== */

/* garante que o hero não tenha margem embaixo */
.page-home .hero-mok{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* a live sobe e ENCOSTA no final do hero */
.page-home .live-strip-full{
  margin-top: 0 !important;     /* zera o margin do tema */
  position: relative;
  top: 0px;                   /* cola (aumente se quiser mais) */
  z-index: 8;
}

/* opcional: pra não cortar glow/brasas quando invadir */
.page-home .hero-mok{
  overflow: visible !important;
}



/* LINHA PERSONAGEM + DOWNLOAD */
.page-home .hero-row{
  width: 100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: clamp(18px, 3vw, 60px);
}

/* PERSONAGEM */
.page-home .hero-character{
  position: relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

/* GLOW (mais forte) */
.page-home .pulse{
  position:absolute;
  left:50%;
  top:60%;
  transform: translate(-50%,-50%);
  width: 980px;
  height: 980px;
  max-width: 200%;
  max-height: 200%;
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;
  pointer-events:none;
  z-index: 1;
  filter: saturate(1.7) blur(.18px) drop-shadow(0 0 26px rgba(255,120,20,.42));
}

.page-home .pulse-left{
  background-image: url("/images/Pulse2Houver.png");
  opacity: .80;
  animation: glowLeft 18s linear infinite;
}
.page-home .pulse-right{
  background-image: url("/images/Pulse3Houver.png");
  opacity: .62;
  animation: glowRight 22s linear infinite;
}

@keyframes glowLeft{
  0%   { transform:translate(-50%,-50%) rotate(0deg)   scale(1.00); }
  50%  { transform:translate(-50%,-50%) rotate(-180deg) scale(1.16); }
  100% { transform:translate(-50%,-50%) rotate(-360deg) scale(1.34); }
}
@keyframes glowRight{
  0%   { transform:translate(-50%,-50%) rotate(0deg)   scale(.98); }
  50%  { transform:translate(-50%,-50%) rotate(180deg) scale(1.18); }
  100% { transform:translate(-50%,-50%) rotate(360deg) scale(1.38); }
}

.page-home .character-img{
  width: min(560px, 100%);
  height:auto;
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.70));
}

/* brilho no olho */
.page-home .eye-glow{
  position:absolute;
  z-index: 6;
  width: 56px;
  height: 56px;
  left: var(--eye-x, 53%);
  top: var(--eye-y, 26%);
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,190,90,.95) 0%, rgba(255,110,10,.35) 45%, transparent 70%);
  filter: blur(.2px) drop-shadow(0 0 18px rgba(255,140,40,.55));
  animation: eyePulse 1.35s ease-in-out infinite;
  pointer-events:none;
}
@keyframes eyePulse{
  0%,100% { transform: translate(-50%,-50%) scale(.92); opacity:.85; }
  50%     { transform: translate(-50%,-50%) scale(1.12); opacity:1; }
}

/* DOWNLOAD */
.page-home .hero-download{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position: relative;
  transform: translate(-350px, 120px);
}

.page-home .download-btn{
  position: relative;
  display:inline-block;
  border-radius: 14px;
  text-decoration:none;
}

.page-home .download-btn img{
  width: min(420, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 28px 80px rgba(0,0,0,.72));
}

/* texto do botão CENTRAL real */
.page-home .download-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
  transform: translate(26px, -25px);
}
/* ====== FORÇA TAMANHO DO BOTÃO DOWNLOAD (independente da classe) ====== */
.page-home .hero-download img,
.page-home a[href*="/downloads"] img,
.page-home img[src*="download"]{
  width: 420px !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
}


.page-home .download-text strong{
  font-weight: 900;
  letter-spacing: 2.2px;
  font-size: 20px;
  color: rgba(255,240,220,.95);
  text-shadow: 0 2px 10px rgba(0,0,0,.60);
}
.page-home .download-text small{
  margin-top: 4px;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 13px;
  color: rgba(255,200,140,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.60);
}
/* =========================
   BOTÃO CADASTRO (igual download)
   ========================= */

/* garante que o link não pinte texto (roxo/azul) */
.page-home .btn-cadastro,
.page-home .btn-cadastro:visited,
.page-home .btn-cadastro:hover,
.page-home .btn-cadastro:active{
  color: transparent !important;
  text-decoration: none !important;
}

/* botão */
.page-home .btn-cadastro{
  position: relative !important;
  display: inline-block !important;
  border-radius: 14px;
  overflow: visible;
  margin-bottom: 18px;
  transform: translate(-190px, 137px);
}

/* imagem */
.page-home .btn-cadastro > img{
  width: 420px !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 28px 80px rgba(0,0,0,.72));
}

/* overlay do texto (igual download-text) */
.page-home .btn-cadastro .cadastro-text{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  text-align: center !important;

  /* ajuste fino (mesma lógica do download) */
  transform: translate(26px, -25px) !important;
}

/* estilo do texto */
.page-home .btn-cadastro .cadastro-text strong{
  display: block;
  font-weight: 900;
  letter-spacing: 2.2px;
  font-size: 20px;
  color: rgba(255,240,220,.95) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.60);
}

.page-home .btn-cadastro .cadastro-text small{
  display: block;
  margin-top: 4px;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 13px;
  color: rgba(255,200,140,.92) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.60);
}

/* se existir algum sublinhado global em span/a */
.page-home .btn-cadastro .cadastro-text,
.page-home .btn-cadastro .cadastro-text *{
  text-decoration: none !important;
}


/* =========================================================
   LIVE EM DESTAQUE (FULL WIDTH sem quebrar outras páginas)
   ========================================================= */
.page-home .live-strip-full{
  position: relative;
  z-index: 6;

  width: 100vw;
  left: 50%;
  transform: translateX(-50%);

  margin-top: 26px;
  padding: 18px 0;

  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);

  background: linear-gradient(90deg,
    rgba(255,138,0,.14),
    rgba(255,90,0,.20),
    rgba(255,138,0,.14)
  );
  backdrop-filter: blur(10px);
}

/* inner da live com largura própria (sem usar .container global) */
.page-home .live-strip-inner{
  width: min(var(--mok-container), calc(100% - 26px));
  margin: 0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.page-home .live-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width:0;
}
.page-home .live-left i{
  font-size: 18px;
  color: rgba(255,225,185,.95);
  opacity:.95;
}

.page-home .live-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 4px;
}

.page-home .live-pill{
  color: rgba(20,12,6,.95);
  background: linear-gradient(90deg, rgba(255,170,70,.98), rgba(255,120,20,.98));
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  padding: 6px 12px;
  border-radius: 999px;
}

.page-home .live-dot{
  color: rgba(255,235,220,.95);
  background: rgba(255,0,0,.18);
  border: 1px solid rgba(255,60,60,.35);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 999px;
  animation: liveBlink 1.2s ease-in-out infinite;
}
@keyframes liveBlink{
  0%,100% { opacity:.55; }
  50%     { opacity:1; }
}

.page-home .live-title{
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,.93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-home .live-right{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-shrink:0;
}

.page-home .live-viewers{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(255,245,235,.92);
  font-weight: 900;
  letter-spacing: .6px;
}

.page-home .live-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .4px;
  text-decoration:none;

  color: rgba(20,12,6,.95);
  background: linear-gradient(90deg, rgba(255,170,70,.98), rgba(255,90,0,.98));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(255,120,20,.18);
}
.page-home .live-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* =========================================================
   NOTÍCIAS + RANKING (não mexe no layout existente além da home)
   ========================================================= */
.page-home .main-section{
  padding: 55px 0 70px;
  position: relative;
  z-index: 2;
}

/* Aqui pode manter seu CSS original de news/ranking,
   não estou sobrescrevendo nada agressivo */

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1100px){
  .page-home .hero-row{
    flex-direction:column;
    align-items:center;
    gap: 18px;
  }

  .page-home .pulse{
    width: 760px;
    height: 760px;
  }

  .page-home .live-strip-inner{
    flex-direction: column;
    align-items:flex-start;
  }

  .page-home .live-right{
    width: 100%;
    justify-content: space-between;
  }

  .page-home .live-title{
    white-space: normal;
  }
 /* =========================================================
   FIX FINAL LIMPO – HERO + VIDEO + FUNDO ABAIXO
   (DEIXE ESTE BLOCO COMO ÚLTIMO DO ARQUIVO)
   ========================================================= */

/* HERO TRAVADO */
.page-home .hero-mok{
  position: relative !important;
  height: 58vh !important;
  min-height: 58vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* VIDEO PRESO AO HERO */
.page-home .hero-mok > .hero-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* CAMADAS DO EFEITO */
.page-home .hero-dark{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.page-home .ember-field{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* CONTEÚDO */
.page-home .hero-inner{
  position: relative !important;
  z-index: 5 !important;
  height: 58vh !important;
  min-height: 58vh !important;
}

/* LIVE */
.page-home .live-strip-full{
  position: relative !important;
  z-index: 8 !important;
  margin-top: 0 !important;
  top: 0 !important;
}

/* =========================================================
   FUNDO DA PARTE DE BAIXO (TAMPA O VÍDEO ATRÁS)
   SUA PASTA É /imagens (não /images)
   ========================================================= */

.page-home .main-section{
  position: relative !important;
  z-index: 50 !important;
  background: url("/imagens/bg-home.jpg") center/cover no-repeat !important;
}

/* se quiser um escurecimento por cima da imagem */
.page-home .main-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.40);
  pointer-events:none;
}

.page-home .main-section > .container{
  position: relative;
  z-index: 1;
}

/* garante que o body/main não fique transparente */
.page-home main{
  background: #070707 !important;
}
/* ===== FUNDO DA PARTE DE BAIXO (TAMPA O VÍDEO ATRÁS) ===== */
.main-section{
  position: relative !important;
  z-index: 50 !important;
  background: url("/imagens/bg-home.jpg") center/cover no-repeat !important;
}

/* overlay para dar contraste */
.main-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  pointer-events:none;
}

/* conteúdo acima do overlay */
.main-section > .container{
  position: relative;
  z-index: 1;
}


}