/*
 ╔══════════════════════════════════════════════════════════════╗
 ║  PAYAT GAMER — VISUAL SYSTEM v3.1                            ║
 ║  Tema: Cyberpunk Editorial · Dark Arena                      ║
 ║  Melhorias: video modal, streams, podcast player, calendar   ║
 ╚══════════════════════════════════════════════════════════════╝
*/

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden }

/* ── TOKENS ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:    #04040c;
  --bg2:   #07070f;
  --bg3:   #0b0b14;
  --bg4:   #10101a;
  --card:  #0c0c16;
  --card2: #111120;
  --card3: #181828;
  --text:  #f0f0fa;
  --text2: #7a7aa8;
  --text3: #36365a;
  --border:    rgba(255,215,0,.13);
  --borderp:   rgba(145,70,255,.22);
  --card-border: rgba(255,255,255,.06);
  --nav-bg:    rgba(4,4,12,.96);
  --tag-bg:    rgba(255,215,0,.07);
  --title-color: #ffffff;
  --input-bg:  rgba(255,255,255,.04);
  --scan-color: rgba(255,215,0,.03);
}
[data-theme="light"] {
  --bg:    #f2f2fa;
  --bg2:   #ebebf5;
  --bg3:   #e4e4f0;
  --bg4:   #dcdcee;
  --card:  #ffffff;
  --card2: #f7f7fc;
  --card3: #eeeefc;
  --text:  #0e0e1e;
  --text2: #555578;
  --text3: #9090b0;
  --border:    rgba(80,40,180,.18);
  --borderp:   rgba(80,40,180,.22);
  --card-border: rgba(0,0,0,.07);
  --nav-bg:    rgba(242,242,250,.97);
  --tag-bg:    rgba(255,215,0,.09);
  --title-color: #0e0e1e;
  --input-bg:  rgba(0,0,0,.03);
  --scan-color: rgba(0,0,0,.01);
}
:root {
  --y:    #ffd700;
  --y2:   #ffe566;
  --y3:   #6a5000;
  --p:    #9146ff;
  --p2:   #c084fc;
  --p3:   #2d0f6e;
  --red:  #ff2d55;
  --green:#00e676;
  --cyan: #00d4ff;
  --nav-h:    58px;
  --player-h: 72px;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
  --accent:  var(--y);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

/* Scanlines overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    var(--scan-color) 2px, var(--scan-color) 4px
  );
}

::-webkit-scrollbar { width: 4px; height: 4px }
::-webkit-scrollbar-track { background: var(--bg2) }
::-webkit-scrollbar-thumb { background: var(--y); border-radius: 2px }
::-webkit-scrollbar-thumb:hover { background: var(--y2) }

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

/* ── NAV ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--p) 15%, var(--y) 50%, var(--p) 85%, transparent 100%);
  opacity: .55;
  animation: navpulse 8s ease-in-out infinite alternate;
  filter: blur(.5px);
}
@keyframes navpulse {
  0%   { opacity: .3; background-position: 0% }
  100% { opacity: .8; background-position: 100% }
}

.nav-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  gap: 12px;
}

.nav-left  { display: flex; align-items: center; justify-content: flex-end; gap: 2px }
.nav-right { display: flex; align-items: center; justify-content: flex-start; gap: 2px }
.nav-center{ display: flex; justify-content: center; align-items: center }
.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: 10px }

.nav-link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text2);
  padding: 7px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all .2s;
  white-space: nowrap;
  position: relative;
}
.nav-link:hover, .nav-link.act {
  color: var(--y);
  border-color: var(--border);
  background: rgba(255,215,0,.05);
}
.nav-link.act::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 15%; right: 15%;
  height: 2px;
  background: var(--y);
  border-radius: 2px;
}

.nav-drop { position: relative }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 190px;
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all .22s var(--ease-out);
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,215,0,.05);
  z-index: 200;
}
.nav-drop:hover .nav-drop-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--text2);
  transition: all .15s;
}
.nav-drop-menu a:hover { color: var(--y); background: rgba(255,215,0,.07) }
.nav-drop-sep { height: 1px; background: var(--border); margin: 4px 0 }

/* Logo central */
.nav-logo-wrap { display: flex; align-items: center; gap: 10px }
.nav-logo-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: 5px;
  background: linear-gradient(130deg, var(--y) 0%, #fff 40%, var(--p2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.nav-logo-text span { color: var(--text); -webkit-text-fill-color: var(--text) }
.nav-logo-img {
  height: clamp(34px, 4vw, 46px);
  width: auto;
  filter: drop-shadow(0 0 10px rgba(255,215,0,.4));
  transition: filter .3s;
}
.nav-logo-img:hover { filter: drop-shadow(0 0 18px rgba(255,215,0,.7)) }

.live-dot {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--red);
  animation: ldot .9s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ldot {
  0%, 100% { opacity: 1; transform: scale(1) }
  50%       { opacity: .45; transform: scale(1.5) }
}

.lang-btn {
  color: var(--text2);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  transition: all .2s;
}
[data-theme="light"] .lang-btn { border-color: rgba(0,0,0,.1) }
.lang-btn:hover, .lang-btn.act { color: var(--y); border-color: var(--border) }

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--y);
  color: var(--y);
  transform: rotate(30deg);
  box-shadow: 0 0 12px rgba(255,215,0,.25);
}

.btn-login {
  background: rgba(145,70,255,.12);
  border: 1px solid var(--borderp);
  color: var(--p2);
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  cursor: pointer;
  border-radius: 4px;
  transition: all .22s;
  white-space: nowrap;
}
.btn-login:hover {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
  box-shadow: 0 0 20px rgba(145,70,255,.4);
}

.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 36px; height: 36px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.nav-burger:hover { color: var(--y); border-color: var(--border) }

/* Drawer mobile */
.nav-drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(28px);
  z-index: 999;
  padding: 16px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .28s var(--ease-out);
  border-top: 1px solid var(--border);
}
.nav-drawer.open { transform: translateX(0) }
.nav-drawer .nd-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  border: 1px solid transparent;
  margin-bottom: 4px;
  color: var(--text2);
  transition: all .2s;
}
.nav-drawer .nd-link:hover { color: var(--y); border-color: var(--border); background: rgba(255,215,0,.04) }
.nd-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px }

/* Flash */
.flash {
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  right: 14px;
  z-index: 5000;
  padding: 13px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  animation: fls 4s forwards;
  max-width: 90vw;
  font-family: var(--font-display);
  backdrop-filter: blur(12px);
}
.flash.success { background: rgba(0,230,118,.1); border: 1px solid var(--green); color: var(--green) }
.flash.error   { background: rgba(255,45,85,.1);  border: 1px solid var(--red);   color: var(--red) }
@keyframes fls {
  0%  { opacity: 0; transform: translateX(28px) }
  10% { opacity: 1; transform: none }
  80% { opacity: 1 }
  100%{ opacity: 0 }
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
  padding: 60px 20px 100px;
}

.hero-dynamic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
[data-theme="dark"] .hero-dynamic-bg {
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    rgba(40,0,80,.6) 0%,
    rgba(10,0,25,.9) 50%,
    #04040c 100%);
}
[data-theme="light"] .hero-dynamic-bg {
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    rgba(145,70,255,.06) 0%,
    rgba(242,242,250,.95) 60%,
    var(--bg) 100%);
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.hero-style-portal .hero-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  animation: ringFloat 10s ease-in-out infinite;
  transform: translate(-50%, -50%);
}
.hero-style-portal .hero-ring:nth-child(1) {
  width: min(700px, 94vw); height: min(700px, 94vw);
  border: 1px solid rgba(255,215,0,.08);
  animation-duration: 12s;
}
.hero-style-portal .hero-ring:nth-child(2) {
  width: min(500px, 74vw); height: min(500px, 74vw);
  border: 1px dashed rgba(145,70,255,.1);
  animation-duration: 9s;
  animation-direction: reverse;
  animation-delay: -3s;
}
.hero-style-portal .hero-ring:nth-child(3) {
  width: min(320px, 55vw); height: min(320px, 55vw);
  border: 1px solid rgba(0,212,255,.07);
  animation-duration: 7s;
  animation-delay: -5s;
}
@keyframes ringFloat {
  0%, 100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: .5 }
  33%       { transform: translate(-50%,-50%) scale(1.03) rotate(45deg); opacity: .9 }
  66%       { transform: translate(-50%,-50%) scale(.97) rotate(90deg); opacity: .6 }
}

.hero-style-hud .hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gpulse 6s ease-in-out infinite;
}
.hero-style-hud .hud-corner {
  position: absolute;
  width: 44px; height: 44px;
  border-color: rgba(0,255,136,.5);
  border-style: solid;
}
.hero-style-hud .hud-corner.tl { top:24px; left:24px; border-width:2px 0 0 2px }
.hero-style-hud .hud-corner.tr { top:24px; right:24px; border-width:2px 2px 0 0 }
.hero-style-hud .hud-corner.bl { bottom:80px; left:24px; border-width:0 0 2px 2px }
.hero-style-hud .hud-corner.br { bottom:80px; right:24px; border-width:0 2px 2px 0 }
.hero-style-hud .hud-scan {
  position: absolute;
  left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,.4), transparent);
  animation: hudScan 5s linear infinite;
}
@keyframes hudScan { 0% { top: -2px } 100% { top: 100% } }

.hero-style-glitch .glitch-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  animation: glitchScan 3.5s ease-in-out infinite;
  opacity: 0;
}
.hero-style-glitch .glitch-line:nth-child(1) { top:22%; background: linear-gradient(90deg,transparent,rgba(255,45,85,.5),transparent); animation-delay: 0s }
.hero-style-glitch .glitch-line:nth-child(2) { top:58%; background: linear-gradient(90deg,transparent,rgba(255,215,0,.4),transparent); animation-delay: 1.4s }
.hero-style-glitch .glitch-line:nth-child(3) { top:78%; background: linear-gradient(90deg,transparent,rgba(0,212,255,.3),transparent); animation-delay: 2.6s }
@keyframes glitchScan {
  0%,100%{opacity:0;transform:translateX(0)} 20%{opacity:1;transform:translateX(4px)} 40%{opacity:1;transform:translateX(-4px)} 60%{opacity:0}
}

/* ── HERO STYLE: COSMIC ──────────────────────────────────────────── */
.hero-style-cosmic .cosmic-wave {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  animation: cosmicExpand 5s ease-out infinite;
}
.hero-style-cosmic .cosmic-wave:nth-child(1) {
  border: 1px solid rgba(255,215,0,.6);
  animation-delay: 0s;
}
.hero-style-cosmic .cosmic-wave:nth-child(2) {
  border: 1px solid rgba(145,70,255,.45);
  animation-delay: 1.7s;
}
.hero-style-cosmic .cosmic-wave:nth-child(3) {
  border: 1px solid rgba(255,215,0,.25);
  animation-delay: 3.4s;
}
@keyframes cosmicExpand {
  0%   { width: 80px;  height: 80px;  opacity: .9 }
  100% { width: 700px; height: 700px; opacity: 0  }
}
.hero-style-cosmic .cosmic-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  animation: starTwinkle ease-in-out infinite;
}
@keyframes starTwinkle { 0%,100%{opacity:.15} 50%{opacity:1} }

/* ── LOGO INTRO ANIMATIONS ──────────────────────────────────────── */

/* typewriter: texto revelado letra a letra com caret */
.logo-intro-typewriter .logo-main,
.logo-intro-typewriter .logo-tagline {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typeReveal .9s steps(14,end) .2s forwards;
}
.logo-intro-typewriter .logo-tagline {
  animation-delay: 1s;
  animation-duration: .7s;
}
@keyframes typeReveal { to { width: 100% } }
.logo-intro-typewriter .logo-tagline::after {
  content: '|';
  color: var(--y);
  animation: caretBlink .7s step-end infinite;
  margin-left: 2px;
}
@keyframes caretBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* glitch: aparece com distorção horizontal */
.logo-intro-glitch .logo-main {
  animation: introGlitch .6s steps(1) .1s both;
}
@keyframes introGlitch {
  0%  { opacity:0; transform:translateX(-8px) skewX(-5deg) }
  30% { opacity:1; transform:translateX(4px)  skewX(3deg)  }
  60% { transform:translateX(-2px) }
  100%{ transform:none; opacity:1 }
}

/* fade: dissolve simples */
.logo-intro-fade .logo-main,
.logo-intro-fade .logo-tagline {
  animation: introFade .9s ease both;
}
.logo-intro-fade .logo-tagline { animation-delay: .35s }
@keyframes introFade { from{opacity:0} to{opacity:1} }

/* slide: sobe do baixo */
.logo-intro-slide .logo-main {
  animation: introSlide .8s var(--ease-out) both;
}
.logo-intro-slide .logo-tagline {
  animation: introSlide .8s var(--ease-out) .25s both;
}
@keyframes introSlide {
  from { opacity:0; transform:translateY(28px) }
  to   { opacity:1; transform:none }
}

/* Logo flutuante por estilo */
.hero-style-glitch .hero-logo-img {
  animation: heroLogoFloat 4s ease-in-out infinite, heroImgGlitch 6s linear infinite;
}
.hero-style-portal .hero-logo-img,
.hero-style-hud    .hero-logo-img,
.hero-style-cosmic .hero-logo-img {
  animation: heroLogoFloat 5s ease-in-out infinite;
}
@keyframes heroLogoFloat {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-10px) }
}
@keyframes heroImgGlitch {
  0%,80%,100% {
    filter: drop-shadow(0 0 28px rgba(255,215,0,.55)) drop-shadow(0 0 70px rgba(145,70,255,.3));
    transform: none;
  }
  81% { filter: drop-shadow(-4px 0 0 #ff2d55) drop-shadow(4px 0 0 #00e5ff); transform:translateX(-3px) }
  83% { filter: drop-shadow(4px 0 0 #ff2d55) drop-shadow(-4px 0 0 #00e5ff); transform:translateX(3px) }
  85% { filter: drop-shadow(0 0 28px rgba(255,215,0,.55)); transform:none }
}

/* Logo cosmic: pulsa junto com as ondas */
.hero-style-cosmic .hero-logo-img {
  filter: drop-shadow(0 0 30px rgba(255,215,0,.55)) drop-shadow(0 0 70px rgba(145,70,255,.35));
  animation: cosmicLogoFloat 4s ease-in-out infinite;
}
@keyframes cosmicLogoFloat {
  0%,100% { transform:translateY(0) scale(1);    filter:drop-shadow(0 0 30px rgba(255,215,0,.5)) }
  50%     { transform:translateY(-10px) scale(1.02); filter:drop-shadow(0 0 50px rgba(255,215,0,.8)) }
}

/* Logo / tagline */
.logo-main {
  font-family: var(--font-display);
  font-size: clamp(58px, 12vw, 110px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  text-align: center;
}
[data-theme="dark"] .logo-main {
  background: linear-gradient(135deg, #fff 0%, var(--y) 40%, var(--p2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px rgba(255,215,0,.3));
}
[data-theme="light"] .logo-main { color: var(--title-color) }

.logo-tagline {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2vw, 13px);
  margin-top: 16px;
  animation: blink 6s step-end infinite;
}
@keyframes blink { 0%,84%,100%{opacity:1} 90%{opacity:0} }

.logo-line {
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--y), var(--p2), transparent);
  margin: 24px auto;
  animation: lexp 1.5s .5s ease-out forwards;
}
@keyframes lexp { to { width: min(320px, 65%) } }

/* Hero stats */
.hero-stats {
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  margin-top: 40px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center;
}
.hstat-num {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--y);
  line-height: 1;
}
[data-theme="dark"] .hstat-num { text-shadow: 0 0 20px rgba(255,215,0,.7) }
.hstat-lbl {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--text2);
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 700;
  font-family: var(--font-display);
}

/* CTA buttons */
.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-y {
  background: var(--y);
  color: #000;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3.5px;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  transition: all .22s;
  position: relative;
  overflow: hidden;
}
.btn-y::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%);
  transition: transform .4s;
}
.btn-y:hover::before { transform: translateX(100%) }
.btn-y:hover {
  background: #fff;
  box-shadow: 0 0 48px rgba(255,215,0,.7);
  transform: translateY(-3px);
}
.btn-p {
  background: transparent;
  color: var(--p2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3.5px;
  padding: 13px 30px;
  border: 1px solid var(--p);
  cursor: pointer;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  transition: all .22s;
}
.btn-p:hover {
  background: rgba(145,70,255,.18);
  box-shadow: 0 0 32px rgba(145,70,255,.55);
  transform: translateY(-3px);
}

/* Scroll arrow */
.scroll-arr {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text3);
  font-size: 22px;
  cursor: pointer;
  animation: bounce 2.5s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(12px)} }

/* ── LAYOUT ──────────────────────────────────────────────────────── */
main { position: relative; z-index: 1 }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(12px,3vw,28px) }

.sec { padding: clamp(48px,7vw,80px) 0; position: relative }
.sec-alt {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sec-alt::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--y), var(--p));
  opacity: .6;
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--title-color);
  text-transform: uppercase;
  position: relative;
}
[data-theme="dark"] .sec-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--y);
  clip-path: inset(0 100% 0 0);
  animation: titleReveal 1.2s var(--ease-out) forwards;
  animation-play-state: paused;
}
.sec-title.revealed::after { animation-play-state: running }
@keyframes titleReveal { to { clip-path: inset(0 0% 0 0) } }

.sec-tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 4px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.sec-tag.y { background: var(--tag-bg); color: var(--y); border: 1px solid var(--border) }
.sec-tag.p { background: rgba(145,70,255,.1); color: var(--p2); border: 1px solid rgba(145,70,255,.2) }
.sec-tag.r { background: rgba(255,45,85,.08); color: var(--red); border: 1px solid rgba(255,45,85,.18) }
.sec-tag.b { background: rgba(0,212,255,.08); color: var(--cyan); border: 1px solid rgba(0,212,255,.18) }
.sec-tag.g { background: rgba(0,230,118,.08); color: var(--green); border: 1px solid rgba(0,230,118,.18) }

.sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent) }

.badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 2px;
}

.sec-link {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text2);
  border: 1px solid var(--card-border);
  padding: 5px 14px;
  border-radius: 4px;
  transition: all .2s;
  white-space: nowrap;
}
.sec-link:hover { color: var(--y); border-color: var(--border) }

/* ── GRIDS ───────────────────────────────────────────────────────── */
.adaptive-grid-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }
.adaptive-grid-3.has-1 { grid-template-columns: minmax(0,480px); justify-content: center }
.adaptive-grid-3.has-2 { grid-template-columns: repeat(2,1fr); max-width: 880px }
.adaptive-grid-2  { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px }
.stream-grid      { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }
.podcast-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }
.reviews-grid     { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px }
.videos-grid      { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }
.news-list        { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }

/* ── SORTEIOS ────────────────────────────────────────────────────── */
.sort-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
  position: relative;
}

.sort-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(135deg, var(--y), var(--p), var(--cyan), var(--y));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s;
  animation: borderSpin 4s linear infinite paused;
}
.sort-card:hover::before { opacity: 1; animation-play-state: running }
@keyframes borderSpin { to { background-position: 300% 300% } }

.sort-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(255,215,0,.06);
}
.sort-card.featured {
  border-color: rgba(255,215,0,.25);
  box-shadow: 0 0 30px rgba(255,215,0,.07);
}

.sort-cover {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(50,0,100,.5), rgba(10,5,30,.8));
}
.sort-cover img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
  transition: opacity .4s, transform .5s var(--ease-out);
}
.sort-card:hover .sort-cover img { opacity: .5; transform: scale(1.06) }

.sort-cover-ico {
  position: relative;
  z-index: 1;
  font-size: 68px;
  animation: floatIco 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255,215,0,.4));
}
@keyframes floatIco { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }

.sort-featured-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--y);
  color: #000;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 11px;
  border-radius: 3px;
}

.sort-countdown {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 100%);
  backdrop-filter: blur(4px);
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255,215,0,.1);
}
.sort-cnt-block { text-align: center; min-width: 44px }
.sort-cnt-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--y);
  line-height: 1;
  display: block;
}
.sort-cnt-lbl {
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.45);
  font-weight: 700;
  font-family: var(--font-display);
}
.sort-cnt-sep {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--y);
  opacity: .4;
  align-self: flex-start;
  padding-top: 2px;
}

.sort-body { padding: 18px }
.sort-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 12px;
  transition: color .2s;
}
.sort-card:hover .sort-title { color: var(--y) }

.sort-premio {
  background: rgba(255,215,0,.05);
  border: 1px solid rgba(255,215,0,.12);
  border-radius: 5px;
  padding: 10px 13px;
  margin-bottom: 13px;
}
.sort-premio-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--y);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-family: var(--font-display);
}
.sort-premio-txt { font-size: 13px; color: var(--text); font-weight: 600; line-height: 1.5 }

.sort-periodo {
  font-size: 12px;
  color: var(--text2);
  letter-spacing: .5px;
  padding-top: 11px;
  border-top: 1px solid var(--card-border);
  margin-bottom: 4px;
}

.sort-participantes {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text2);
  margin-top: 6px;
  font-weight: 600;
}
.sort-participantes-num { color: var(--green); font-family: var(--font-display); font-size: 14px }

.sort-btn-wrap { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch }

.sort-btn-participate {
  flex: 1;
  padding: 12px 10px;
  background: linear-gradient(135deg, rgba(60,0,140,.8), var(--p));
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  cursor: pointer;
  border-radius: 6px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.sort-btn-participate::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.sort-btn-participate:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(145,70,255,.55) }
.sort-btn-participate:hover::after { opacity: 1 }
.sort-btn-participate.ja {
  background: linear-gradient(135deg, rgba(0,100,50,.3), rgba(0,230,118,.2));
  border: 1px solid rgba(0,230,118,.3);
  color: var(--green);
  cursor: default;
}
.sort-btn-participate.ja:hover { transform: none; box-shadow: none }

.sort-btn-cancel {
  padding: 12px 14px;
  background: rgba(255,45,85,.1);
  border: 1px solid rgba(255,45,85,.25);
  color: var(--red);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  transition: all .2s;
  flex-shrink: 0;
}
.sort-btn-cancel:hover { background: rgba(255,45,85,.22) }

.sort-btn-details {
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 6px;
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sort-btn-details:hover { border-color: var(--border); color: var(--y) }

.sort-btn-disabled {
  flex: 1;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text3);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 6px;
  cursor: default;
}

.sort-login-prompt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(145,70,255,.08);
  border: 1px solid rgba(145,70,255,.2);
  border-radius: 6px;
  transition: all .2s;
}
.sort-login-prompt:hover { background: rgba(145,70,255,.14); border-color: rgba(145,70,255,.4) }
.sort-login-prompt-text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--p2);
}
.sort-login-prompt-arrow { color: var(--p2); font-size: 16px }

/* ── VÍDEOS ──────────────────────────────────────────────────────── */
.vid-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all .28s var(--ease-out);
}
.vid-card:hover {
  border-color: rgba(145,70,255,.3);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(145,70,255,.15);
}
.vid-thumb {
  position: relative;
  height: 172px;
  background: var(--card2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.vid-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  transition: transform .45s var(--ease-out);
}
.vid-card:hover .vid-thumb img { transform: scale(1.06) }
.vid-play-btn {
  position: relative;
  z-index: 2;
  width: 58px; height: 58px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .28s;
  border: 2px solid rgba(255,255,255,.18);
}
.vid-play-btn svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px }
.vid-card:hover .vid-play-btn {
  background: var(--y);
  border-color: var(--y);
  transform: scale(1.15);
  box-shadow: 0 0 32px rgba(255,215,0,.5);
}
.vid-card:hover .vid-play-btn svg { fill: #000 }
.vid-dur {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
}
.vid-featured-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--y); color: #000;
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  padding: 3px 9px; border-radius: 3px;
}
.vid-body { padding: 14px }
.vid-cat { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: var(--p2); margin-bottom: 5px }
.vid-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 1px; color: var(--text); line-height: 1.25; margin-bottom: 8px }
.vid-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); flex-wrap: wrap }
.vid-meta-dot { width: 3px; height: 3px; background: var(--text3); border-radius: 50%; flex-shrink: 0 }
.vid-progress-bar { height: 2px; background: var(--card3); border-radius: 2px; margin-top: 10px; overflow: hidden }
.vid-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--p), var(--y)); border-radius: 2px }

/* ── MODAL DE VÍDEO (melhorado) ──────────────────────────────────── */
.vid-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.vid-modal-bg.open { opacity: 1; pointer-events: all }

.vid-modal {
  width: 100%;
  max-width: 960px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,215,0,.12);
  box-shadow: 0 40px 120px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
  transform: translateY(32px) scale(.96);
  transition: transform .35s var(--ease-out);
  display: flex; flex-direction: column;
}
.vid-modal-bg.open .vid-modal { transform: translateY(0) scale(1) }

/* Top bar inside modal */
.vid-modal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(255,215,0,.07) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.vid-modal-titlelabel {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 12px;
}
.vid-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.vid-modal-ext {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: rgba(255,255,255,.55);
  transition: all .2s;
}
.vid-modal-ext:hover { color: var(--y); border-color: var(--border); background: rgba(255,215,0,.08) }
.vid-modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255,45,85,.08);
  border: 1px solid rgba(255,45,85,.2);
  border-radius: 6px;
  color: rgba(255,255,255,.55);
  font-size: 16px;
  cursor: pointer;
  transition: all .2s;
}
.vid-modal-close:hover { background: rgba(255,45,85,.22); color: #fff; border-color: var(--red) }

.vid-modal-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  flex-shrink: 0;
}
.vid-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ── NOTÍCIAS ────────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px }
.news-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all .28s var(--ease-out);
}
.news-card:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,.4) }
.nc-img {
  height: 280px;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.nc-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.news-card:hover .nc-bg-img { transform: scale(1.05) }
.nc-img-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 56px; opacity: .15 }
.nc-body { position: relative; z-index: 1; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 60%, transparent 100%); width: 100% }
.nc-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  line-height: 1.25;
  margin: 8px 0;
}
.nc-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,.55); flex-wrap: wrap }
.nc-summary { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 8px; line-height: 1.6 }

.news-side { display: flex; flex-direction: column; gap: 10px }
.nc-sm {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .22s;
  flex: 1;
}
.nc-sm:hover { border-color: var(--border); background: var(--card2); transform: translateX(4px) }
.nc-sm-in { display: flex; align-items: center; gap: 12px; padding: 12px 14px }
.nc-sm-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.nc-sm-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text);
  line-height: 1.3;
}
.nc-sm-meta { font-size: 11px; color: var(--text2); margin-top: 3px; letter-spacing: .3px }

.nl-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.nl-card:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.35) }
.nl-cover {
  height: 140px;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--card2);
}
.nl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out) }
.nl-card:hover .nl-cover img { transform: scale(1.07) }
.nl-cover-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px }
.nl-body { padding: 13px }
.nl-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 7px;
}
.nl-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text2); flex-wrap: wrap }

/* ── STREAMS — totalmente clicável ──────────────────────────────── */
.sc {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  transition: all .28s var(--ease-out);
}
.sc--clickable {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.sc:hover { border-color: var(--borderp); transform: translateY(-5px); box-shadow: 0 16px 48px rgba(145,70,255,.18) }
.sc-prev {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: linear-gradient(135deg, rgba(60,0,130,.6), rgba(10,5,30,.85));
  overflow: hidden;
}
.sc-live {
  position: absolute; top: 10px; left: 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  padding: 3px 10px; border-radius: 3px;
  display: flex; align-items: center; gap: 5px;
  z-index: 2;
}
.sc-dot {
  width: 6px; height: 6px;
  background: #fff; border-radius: 50%;
  animation: ldot .9s ease-in-out infinite;
}
.sc-viewers {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 20px;
  z-index: 2;
}
/* Play overlay on stream preview */
.sc-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  background: rgba(145,70,255,.15);
  transition: opacity .25s;
  z-index: 1;
}
.sc:hover .sc-play-overlay { opacity: 1 }
.sc-play-overlay svg { filter: drop-shadow(0 0 12px rgba(145,70,255,.8)) }

.sc-ava {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(145,70,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 900;
  position: relative; z-index: 1;
  background: rgba(145,70,255,.15);
  color: var(--p2);
  transition: border-color .25s, box-shadow .25s;
}
.sc:hover .sc-ava { border-color: var(--p2); box-shadow: 0 0 20px rgba(145,70,255,.5) }

.sc-avatar-img {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(145,70,255,.4);
  object-fit: cover;
  position: relative; z-index: 1;
  transition: border-color .25s, box-shadow .25s;
}
.sc:hover .sc-avatar-img { border-color: var(--p2); box-shadow: 0 0 20px rgba(145,70,255,.5) }

.sc-body { padding: 16px }
.sc-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 1.5px; color: var(--text); margin-bottom: 4px }
.sc-game { font-size: 12px; color: var(--text2); margin-bottom: 6px; font-weight: 600 }
.sc-desc { font-size: 13px; color: var(--text3); margin-bottom: 10px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.sc-nets { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px }
.sc-net-btn {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  padding: 5px 12px; border: 1px solid var(--card-border);
  border-radius: 4px; color: var(--text2); transition: all .2s;
}
.sc-net-btn:hover { border-color: var(--border); color: var(--y) }

/* CTA button-like inside stream card */
.sc-btn-wrap {
  width: 100%; padding: 11px;
  background: linear-gradient(135deg, rgba(145,70,255,.15), rgba(145,70,255,.25));
  border: 1px solid rgba(145,70,255,.3);
  color: var(--p2);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 2.5px;
  border-radius: 5px; transition: all .22s;
  display: flex; align-items: center; justify-content: center;
}
.sc:hover .sc-btn-wrap { background: var(--p); color: #fff; border-color: var(--p); box-shadow: 0 6px 24px rgba(145,70,255,.4) }

/* ── PODCAST ─────────────────────────────────────────────────────── */
.pod-live-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, rgba(255,45,85,.08), rgba(145,70,255,.06));
  border: 1px solid rgba(255,45,85,.2);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: all .25s;
}
.pod-live-banner:hover { border-color: rgba(255,45,85,.4); transform: translateX(4px) }
.pod-live-ico { font-size: 36px; flex-shrink: 0 }
.pod-live-info { flex: 1 }
.pod-live-tag {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  color: var(--red); margin-bottom: 4px;
}
.pod-live-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: ldot .9s ease-in-out infinite }
.pod-live-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 1.5px; color: var(--text) }
.pod-live-desc { font-size: 13px; color: var(--text2); margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.pod-live-cta {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--red); border: 1px solid rgba(255,45,85,.3); padding: 10px 18px;
  border-radius: 5px; flex-shrink: 0; transition: all .2s;
}
.pod-live-banner:hover .pod-live-cta { background: var(--red); color: #fff; border-color: var(--red) }

.pod-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all .25s var(--ease-out);
}
.pod-card:hover { border-color: var(--borderp); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(145,70,255,.1) }

.pod-thumb {
  height: 148px;
  background: linear-gradient(135deg, rgba(50,0,100,.6), rgba(10,5,30,.9));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.pod-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
  transition: opacity .3s, transform .4s var(--ease-out);
}
.pod-card:hover .pod-thumb-img { opacity: .65; transform: scale(1.04) }
.pod-thumb-ico { position: relative; z-index: 1; font-size: 52px; filter: drop-shadow(0 0 16px rgba(145,70,255,.5)) }
.pod-ep {
  position: absolute; bottom: 10px; right: 10px;
  background: var(--y); color: #000;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  padding: 3px 10px; border-radius: 3px; z-index: 2;
}

/* Play button overlaid on thumbnail */
.pod-thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(145,70,255,.2);
  border: none; cursor: pointer; z-index: 3;
  opacity: 0; transition: opacity .25s;
  color: #fff;
}
.pod-thumb-play svg { filter: drop-shadow(0 0 10px rgba(145,70,255,.9)); transform: scale(1.2) }
.pod-card:hover .pod-thumb-play { opacity: 1 }

.pod-body { padding: 14px }
.pod-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--text); line-height: 1.3; margin-bottom: 7px }
.pod-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text2); margin-bottom: 8px; flex-wrap: wrap }
.pod-desc { font-size: 12px; color: var(--text3); line-height: 1.55; margin-bottom: 12px }

.pod-play {
  width: 100%; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(145,70,255,.12), rgba(145,70,255,.2));
  border: 1px solid rgba(145,70,255,.25);
  color: var(--p2);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer; border-radius: 5px; transition: all .22s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none;
}
.pod-play:hover, .pod-play.playing {
  background: var(--p); color: #fff; border-color: var(--p);
  box-shadow: 0 4px 18px rgba(145,70,255,.4);
}
.pod-play-icon { transition: transform .2s }
.pod-play:hover .pod-play-icon, .pod-play.playing .pod-play-icon { transform: scale(1.2) }

/* ── PODCAST PLAYER BAR ──────────────────────────────────────────── */
.pod-player-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(145,70,255,.22);
  z-index: 890;
  transform: translateY(100%);
  transition: transform .35s var(--ease-out);
  box-shadow: 0 -8px 32px rgba(0,0,0,.4);
}
.pod-player-bar.active { transform: translateY(0) }

.pod-player-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 clamp(12px,2vw,24px);
  height: 60px;
  display: flex; align-items: center; gap: 16px;
}
.pod-player-info {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 0 0 220px;
}
.pod-player-ico { font-size: 24px; flex-shrink: 0 }
.pod-player-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: .8px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pod-player-ep { font-size: 10px; color: var(--text2); letter-spacing: 1.5px; font-family: var(--font-display); font-weight: 700 }

.pod-player-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.pod-bar-btn {
  background: none; border: 1px solid var(--card-border); color: var(--text2);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.pod-bar-btn:hover { border-color: var(--borderp); color: var(--p2) }
.pod-bar-play {
  width: 40px; height: 40px;
  border-color: rgba(145,70,255,.35); color: var(--p2);
  box-shadow: 0 0 16px rgba(145,70,255,.2);
}
.pod-bar-play:hover { background: var(--p); color: #fff; border-color: var(--p); box-shadow: 0 0 24px rgba(145,70,255,.55) }

.pod-player-progress-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
}
.pod-bar-time {
  font-family: var(--font-mono); font-size: 10px; color: var(--text3); white-space: nowrap; flex-shrink: 0;
}
.pod-bar-prog {
  flex: 1; height: 4px; background: var(--card3); border-radius: 2px;
  cursor: pointer; overflow: hidden; border-radius: 2px;
  position: relative;
}
.pod-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--p), var(--y));
  border-radius: 2px; width: 0; transition: width .5s linear;
}

.pod-player-vol { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.pod-player-vol span { font-size: 14px }
input[type=range].pod-vol-range { width: 72px; accent-color: var(--p2) }

.pod-bar-close {
  background: none; border: 1px solid var(--card-border); color: var(--text3);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.pod-bar-close:hover { border-color: var(--red); color: var(--red) }

/* ── REVIEWS ─────────────────────────────────────────────────────── */
.rv {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all .28s var(--ease-out);
}
.rv:hover { border-color: var(--border); transform: translateY(-5px); box-shadow: 0 14px 44px rgba(0,0,0,.45) }
.rv-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px; background: linear-gradient(135deg, rgba(255,215,0,.06), rgba(145,70,255,.04));
  border-bottom: 1px solid var(--card-border);
}
.rv-score {
  font-family: var(--font-display); font-size: 44px; font-weight: 900; color: var(--y); line-height: 1;
}
[data-theme="dark"] .rv-score { text-shadow: 0 0 24px rgba(255,215,0,.6) }
.rv-score-sub { font-family: var(--font-display); font-size: 14px; color: var(--text3) }
.rv-body { padding: 14px }
.rv-game { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--text); margin-bottom: 4px }
.rv-genre { font-size: 10px; letter-spacing: 2.5px; color: var(--text2); font-family: var(--font-display); font-weight: 700; margin-bottom: 12px }
.rv-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px }
.rv-bar-lbl { font-size: 10px; color: var(--text2); font-weight: 700; letter-spacing: .5px; width: 56px; flex-shrink: 0 }
.rv-bar-bg { flex: 1; height: 4px; background: var(--card3); border-radius: 2px; overflow: hidden }
.rv-bar-fill { height: 100%; background: linear-gradient(90deg, var(--p), var(--y)); border-radius: 2px; width: 0; transition: width 1.2s var(--ease-out) }
.rv-bar-val { font-family: var(--font-mono); font-size: 11px; color: var(--y); width: 28px; text-align: right; flex-shrink: 0 }

/* Reviews — Ver Review button */
.rv-cta {
  display: block; text-align: center; margin: 14px 14px 0;
  padding: 10px; border-radius: 5px;
  background: linear-gradient(135deg, rgba(255,215,0,.08), rgba(255,215,0,.15));
  border: 1px solid rgba(255,215,0,.2);
  color: var(--y);
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  transition: all .22s; cursor: pointer;
}
.rv-cta:hover { background: var(--y); color: #000; border-color: var(--y); box-shadow: 0 4px 18px rgba(255,215,0,.35) }

/* Produto detail popup */
.prod-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88); backdrop-filter: blur(14px);
  z-index: 3200; display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.prod-modal-bg.open { opacity: 1; pointer-events: all }
.prod-modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; max-width: 520px; width: 100%;
  transform: translateY(24px) scale(.97); transition: transform .3s var(--ease-out);
  overflow: hidden;
}
.prod-modal-bg.open .prod-modal { transform: none }
.prod-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--card-border);
  background: linear-gradient(135deg, rgba(255,215,0,.06), rgba(145,70,255,.04));
}
.prod-modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 1.5px; color: var(--text) }
.prod-modal-close {
  background: none; border: 1px solid var(--card-border); color: var(--text2);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.prod-modal-close:hover { border-color: var(--red); color: var(--red) }
.prod-modal-body { padding: 22px }
.prod-modal-cover {
  width: 100%; height: 200px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, var(--card3), var(--card2));
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; margin-bottom: 18px; position: relative;
}
.prod-modal-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.prod-modal-desc { font-size: 14px; color: var(--text2); line-height: 1.75; margin-bottom: 16px }
.prod-modal-price { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--y); margin-bottom: 4px }
.prod-modal-price-old { font-size: 14px; color: var(--text3); text-decoration: line-through; font-family: var(--font-mono); margin-bottom: 16px }
.prod-modal-tipo { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--text2); margin-bottom: 16px }
.prod-modal-btn {
  display: block; width: 100%; text-align: center;
  background: linear-gradient(135deg, var(--p3), var(--p));
  color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 2.5px;
  padding: 13px; border-radius: 6px; transition: all .22s; cursor: pointer; text-decoration: none;
}
.prod-modal-btn:hover { opacity: .88; box-shadow: 0 6px 24px rgba(145,70,255,.4) }

/* Product details inline button */
.psi-details-btn {
  display: block; width: 100%; text-align: center; margin-top: 8px;
  padding: 8px; border-radius: 5px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text2);
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px;
  transition: all .2s; cursor: pointer;
}
.psi-details-btn:hover { border-color: var(--border); color: var(--y) }

/* Product centered grid (when few items) */
.prods-grid-centered {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 4px 8px 20px;
}
.prods-grid-centered .psi-card { flex: 0 0 235px }


/* ── CALENDÁRIO ──────────────────────────────────────────────────── */
.cal-layout { display: grid; grid-template-columns: 1fr 290px; gap: 24px }
.cal-list { display: flex; flex-direction: column; gap: 10px }
.cal-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 14px 16px; cursor: pointer;
  transition: all .22s var(--ease-out);
  position: relative; overflow: hidden;
}
.cal-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--y);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .25s var(--ease-out);
}
.cal-card:hover::before { transform: scaleY(1) }
.cal-card:hover { border-color: var(--border); transform: translateX(5px); background: var(--card2) }
.cal-date {
  text-align: center; flex-shrink: 0;
  width: 46px;
}
.cal-day { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--y); line-height: 1 }
.cal-mon { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; color: var(--text2); font-weight: 700 }
.cal-info { flex: 1; min-width: 0 }
.cal-type { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; margin-bottom: 3px }
.cal-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cal-time { font-size: 11px; color: var(--text2); margin-top: 3px; letter-spacing: .5px }
.cal-card-link {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--card-border); border-radius: 4px;
  color: var(--text3); font-size: 13px;
  transition: all .2s;
}
.cal-card-link:hover { border-color: var(--y); color: var(--y) }

/* Mini calendário — melhorado com eventos marcados */
.mini-cal {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 18px;
  align-self: start; position: sticky; top: calc(var(--nav-h) + 16px);
}
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px }
.mc-label { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--text) }
.mc-nav {
  background: none; border: 1px solid var(--card-border); color: var(--text2);
  width: 28px; height: 28px; border-radius: 4px; cursor: pointer;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.mc-nav:hover { border-color: var(--border); color: var(--y) }
.mc-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 2px }

/* Day-of-week headers */
.mc-dow-cell {
  font-family: var(--font-display); font-size: 9px; letter-spacing: 1px;
  color: var(--text3); text-align: center; font-weight: 700; padding: 4px 0;
}

/* Calendar day cells */
.mc-day {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  text-align: center; padding: 0; border-radius: 5px; cursor: default;
  color: var(--text2); transition: all .15s;
  position: relative;
  height: 30px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
}
.mc-day.clickable { cursor: pointer }
.mc-day.clickable:hover { background: var(--card2); color: var(--text) }
.mc-day.today {
  background: rgba(255,215,0,.14);
  color: var(--y);
  font-weight: 900;
  border: 1px solid rgba(255,215,0,.25);
}
.mc-day.other-month { opacity: .28 }

/* Event dots row under day number */
.mc-dots {
  display: flex; gap: 2px; justify-content: center;
  min-height: 5px;
}
.mc-dot {
  width: 4px; height: 4px; border-radius: 50%;
  flex-shrink: 0;
}
/* Dot colors per type */
.mc-dot--launch     { background: var(--y) }
.mc-dot--esport     { background: var(--cyan) }
.mc-dot--stream     { background: var(--p2) }
.mc-dot--deal       { background: var(--green) }
.mc-dot--tournament { background: var(--red) }
.mc-dot--update     { background: #ff9800 }
.mc-dot--default    { background: var(--text2) }

/* Legend */
.mc-legend {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
  display: flex; flex-direction: column; gap: 5px;
}
.mc-legend-row {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text3);
  text-transform: uppercase;
}
.mc-legend-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ── RANKING + ENQUETES ──────────────────────────────────────────── */
.ranking-polls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px }
.rank-list { display: flex; flex-direction: column; gap: 8px }
.rank-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 12px 16px;
  transition: all .22s;
}
.rank-card:hover { border-color: var(--border); transform: translateX(4px) }
.rank-pos { font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1; width: 36px; text-align: center; flex-shrink: 0 }
.rank-ava {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.rank-info { flex: 1; min-width: 0 }
.rank-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--text) }
.rank-level { font-size: 11px; color: var(--text2); letter-spacing: 1px; font-weight: 600 }
.rank-xp-bar { height: 3px; background: var(--card3); border-radius: 2px; margin-top: 5px; overflow: hidden }
.rank-xp-fill { height: 100%; background: linear-gradient(90deg, var(--p), var(--y)); border-radius: 2px; transition: width 1s var(--ease-out) }
.rank-pts { text-align: right; flex-shrink: 0 }
.rank-pts-n { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--y) }
.rank-pts-l { font-size: 9px; letter-spacing: 2px; color: var(--text3); font-family: var(--font-display); font-weight: 700 }

.rank-pos-1 .rank-pos { color: var(--y) }
.rank-pos-2 .rank-pos { color: #c0c0c0 }
.rank-pos-3 .rank-pos { color: #cd7f32 }
.rank-pos-n .rank-pos { color: var(--text3) }
.rank-pos-1 .rank-ava { border-color: var(--y); color: var(--y) }
.rank-pos-2 .rank-ava { border-color: #c0c0c0; color: #c0c0c0 }
.rank-pos-3 .rank-ava { border-color: #cd7f32; color: #cd7f32 }
.rank-pos-n .rank-ava { border-color: var(--card-border); color: var(--text2) }
.rank-empty { color: var(--text3); font-family: var(--font-display); font-size: 13px; letter-spacing: 1px }

/* Enquetes */
.poll-box {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 22px;
}
.poll-q { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 1.5px; color: var(--text); margin-bottom: 18px; line-height: 1.3 }
.poll-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px }
.poll-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 6px;
  border: 1px solid var(--card-border);
  cursor: pointer; transition: all .2s; position: relative; overflow: hidden;
}
.poll-opt:hover { border-color: var(--borderp); background: rgba(145,70,255,.05) }
.poll-opt input { accent-color: var(--y); flex-shrink: 0 }
.poll-opt-text { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .5px; color: var(--text); flex: 1 }
.poll-bar { position: absolute; inset: 0; z-index: 0; border-radius: 5px; overflow: hidden }
.poll-bar-fill { height: 100%; background: rgba(255,215,0,.07); transition: width 1s var(--ease-out) }
.poll-pct { font-family: var(--font-mono); font-size: 12px; color: var(--y); position: relative; z-index: 1; flex-shrink: 0 }
.poll-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px }
.poll-total { font-size: 12px; color: var(--text2); font-weight: 600 }
.btn-vote {
  background: var(--y); color: #000;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  padding: 9px 20px; border: none; cursor: pointer; border-radius: 4px; transition: all .22s;
}
.btn-vote:hover { background: #fff; box-shadow: 0 0 24px rgba(255,215,0,.5) }
.poll-voted-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--green) }
.poll-empty { color: var(--text3); font-family: var(--font-display); font-size: 13px; letter-spacing: 1px }

/* ── PRODUTOS ────────────────────────────────────────────────────── */
.prods-scroll-outer { position: relative }
.prods-scroll-outer::before,
.prods-scroll-outer::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.prods-scroll-outer::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent) }
.prods-scroll-outer::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent) }
.sec-alt .prods-scroll-outer::before { background: linear-gradient(90deg, var(--bg2), transparent) }
.sec-alt .prods-scroll-outer::after  { background: linear-gradient(-90deg, var(--bg2), transparent) }
[data-theme="light"] .prods-scroll-outer::before { background: linear-gradient(90deg, var(--bg2), transparent) }
[data-theme="light"] .prods-scroll-outer::after  { background: linear-gradient(-90deg, var(--bg2), transparent) }

.prods-scroll-track {
  display: flex; gap: 16px;
  overflow-x: auto; padding: 4px 8px 20px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.prods-scroll-track::-webkit-scrollbar { height: 3px }
.prods-scroll-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px }

.psi-card {
  flex: 0 0 235px; scroll-snap-align: start;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 10px; overflow: hidden; position: relative;
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
}
.psi-card:hover { transform: translateY(-7px); border-color: var(--border); box-shadow: 0 16px 48px rgba(0,0,0,.5) }
.psi-card.dest { border-color: rgba(255,215,0,.22) }
.psi-card.dest::after {
  content: '⭐ DESTAQUE';
  position: absolute; top: 10px; left: 10px;
  background: var(--y); color: #000;
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 2px;
  padding: 3px 8px; border-radius: 3px; z-index: 2;
}
.psi-cover {
  height: 160px; background: linear-gradient(135deg, var(--card3), var(--card2));
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; overflow: hidden; position: relative;
}
.psi-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out) }
.psi-card:hover .psi-cover img { transform: scale(1.08) }
.psi-cover-emoji { position: relative; z-index: 1; transition: transform .3s }
.psi-card:hover .psi-cover-emoji { transform: scale(1.12) }
.psi-cover-gradient {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%);
}
.psi-promo-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-size: 11px; font-weight: 900; letter-spacing: .5px;
  padding: 4px 9px; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(255,45,85,.4);
}
.psi-card.dest .psi-promo-badge { top: 36px }
.psi-tipo {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  padding: 3px 9px; border-radius: 10px;
}
.psi-tipo.digital { background: rgba(145,70,255,.18); color: var(--p2); border: 1px solid rgba(145,70,255,.28) }
.psi-tipo.fisico  { background: rgba(255,102,0,.12); color: #ff6600; border: 1px solid rgba(255,102,0,.28) }
/* Variante usada pelo markup atual (badge dentro do corpo, não sobre a capa) */
.psi-tipo-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  padding: 3px 9px; border-radius: 10px; margin-bottom: 8px;
}
.psi-tipo-tag.digital { background: rgba(145,70,255,.14); color: var(--p2); border: 1px solid rgba(145,70,255,.26) }
.psi-tipo-tag.fisico  { background: rgba(255,102,0,.1);  color: #ff6600;   border: 1px solid rgba(255,102,0,.26) }
.psi-body { padding: 14px }
.psi-nome { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--text); line-height: 1.2; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.psi-prices { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; flex-wrap: wrap }
.psi-preco { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--y) }
[data-theme="dark"] .psi-preco { text-shadow: 0 0 16px rgba(255,215,0,.4) }
.psi-preco-old { font-size: 13px; color: var(--text3); text-decoration: line-through; font-family: var(--font-mono) }
.psi-preco-consult { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--text2) }
.psi-btn-row { display: flex; gap: 8px }
.psi-btn-info {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--card-border); color: var(--text2);
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  padding: 10px 8px; border-radius: 5px; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.psi-btn-info:hover { border-color: var(--border); color: var(--y); background: rgba(255,215,0,.05) }
.psi-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, var(--p3), var(--p));
  color: #fff; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  padding: 10px 8px; border-radius: 5px; transition: all .22s; cursor: pointer; white-space: nowrap;
}
.psi-btn:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(145,70,255,.4) }
/* Quando não há link de compra, .psi-btn-info ocupa a linha toda */
.psi-btn-row:has(.psi-btn-info:only-child) .psi-btn-info { flex: 1 }

.prods-nav-btns { display: flex; justify-content: flex-end; gap: 6px }
.prods-nav-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text2);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
  flex-shrink: 0; font-size: 18px; line-height: 1;
}
.prods-nav-btn:hover { border-color: var(--y); color: var(--y) }
/* Botões prev/next posicionados nas laterais do carrossel (markup atual:
   ficam soltos dentro de .prods-scroll-outer, não num wrapper .prods-nav-btns) */
.prods-scroll-outer { display: flex; align-items: center; gap: 8px }
.prods-scroll-outer .prods-scroll-track { flex: 1 }
.prods-scroll-outer .prods-nav-btn { position: relative; z-index: 3 }
@media (hover: none) { .prods-scroll-outer .prods-nav-btn { display: none } }

.prods-ver-todos { display: flex; align-items: center; justify-content: center; margin-top: 24px }
.btn-ver-todos {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--border); color: var(--y);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 3px;
  padding: 13px 32px; border-radius: 5px; transition: all .25s; cursor: pointer;
  position: relative; overflow: hidden;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-ver-todos::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,215,0,.08), rgba(145,70,255,.06));
  opacity: 0; transition: opacity .25s;
}
.btn-ver-todos:hover { border-color: var(--y); box-shadow: 0 0 36px rgba(255,215,0,.18); transform: translateY(-2px) }
.btn-ver-todos:hover::before { opacity: 1 }
.btn-ver-todos svg { transition: transform .25s }
.btn-ver-todos:hover svg { transform: translateX(5px) }

/* ── MODAL DE PRODUTO ──────────────────────────────────────────────
   Markup: #psi-modal-bg.prod-modal-overlay > .prod-modal > (.prod-modal-img-wrap,
   .prod-modal-body > .prod-modal-info, .prod-modal-footer). Abre via .open. */
.prod-modal-overlay {
  position: fixed; inset: 0; z-index: 3200;
  background: rgba(0,0,0,.88); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.prod-modal-overlay.open { opacity: 1; pointer-events: all }
.prod-modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; max-width: 460px; width: 100%; max-height: 88vh;
  overflow-y: auto; transform: translateY(24px) scale(.97);
  transition: transform .3s var(--ease-out);
}
.prod-modal-overlay.open .prod-modal { transform: none }
.prod-modal-img-wrap {
  position: relative; height: 220px;
  background: linear-gradient(135deg, var(--card3), var(--card2));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.prod-modal-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.prod-modal-no-img { font-size: 64px; position: relative; z-index: 1; opacity: .7 }
.prod-modal-img-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5) 100%);
}
.prod-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.15); color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all .2s; backdrop-filter: blur(6px);
}
.prod-modal-close:hover { border-color: var(--red); color: var(--red); background: rgba(255,45,85,.15) }
.prod-modal-tipo-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  padding: 4px 10px; border-radius: 10px; backdrop-filter: blur(6px);
}
.prod-modal-tipo-tag.digital { background: rgba(145,70,255,.25); color: #fff; border: 1px solid rgba(145,70,255,.4) }
.prod-modal-tipo-tag.fisico  { background: rgba(255,102,0,.22); color: #fff; border: 1px solid rgba(255,102,0,.4) }
.prod-modal-body { padding: 22px }
.prod-modal-info { display: flex; flex-direction: column; gap: 10px }
.prod-modal-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: .5px; color: var(--text); line-height: 1.25 }
.prod-modal-prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.prod-modal-preco { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--y) }
[data-theme="dark"] .prod-modal-preco { text-shadow: 0 0 18px rgba(255,215,0,.4) }
.prod-modal-preco-old { font-size: 14px; color: var(--text3); text-decoration: line-through; font-family: var(--font-mono) }
.prod-modal-desc { font-size: 14px; color: var(--text2); line-height: 1.75 }
.prod-modal-footer { padding: 0 22px 22px }
.prod-modal-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--p3), var(--p));
  color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 2.5px;
  padding: 14px; border-radius: 6px; transition: all .22s; cursor: pointer; text-decoration: none;
}
.prod-modal-btn:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(145,70,255,.45) }

/* ── PLAYER ──────────────────────────────────────────────────────── */
.musicas-center { display: flex; justify-content: center }
.player-wrap {
  width: 100%; max-width: 680px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden;
}
.player-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--card-border);
}
.player-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 3px; color: var(--y) }
.player-track-count { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; color: var(--text3) }
.player-now { display: flex; align-items: center; gap: 18px; padding: 20px 20px 12px }
.player-disc {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--p3), var(--card3));
  border: 3px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.player-disc.playing { animation: spin 3s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.player-disc-inner { width: 18px; height: 18px; border-radius: 50%; background: var(--bg) }
.player-track-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--text) }
.player-cat { font-size: 11px; letter-spacing: 2px; color: var(--text2); font-family: var(--font-display); font-weight: 700; margin-top: 3px }
.player-time-row {
  display: flex; justify-content: space-between; padding: 0 20px 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
}
.player-progress {
  height: 4px; background: var(--card3); margin: 0 18px 12px; border-radius: 2px; cursor: pointer; overflow: hidden;
}
.player-prog-fill { height: 100%; background: linear-gradient(90deg, var(--p), var(--y)); width: 0; border-radius: 2px; transition: width .5s linear }
.player-controls {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px 18px; flex-wrap: wrap;
}
.pc-btn {
  background: none; border: 1px solid var(--card-border); color: var(--text2);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .22s;
}
.pc-btn:hover { border-color: var(--border); color: var(--y) }
.pc-btn.pc-play {
  width: 52px; height: 52px; border-color: var(--border); color: var(--y);
  box-shadow: 0 0 20px rgba(255,215,0,.2);
}
.pc-btn.pc-play:hover { background: var(--y); color: #000; box-shadow: 0 0 32px rgba(255,215,0,.5) }
.pc-btn.active { color: var(--y); border-color: var(--border) }
.pc-vol { width: 80px; accent-color: var(--y) }
.player-list { border-top: 1px solid var(--card-border); max-height: 240px; overflow-y: auto }
.pl-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--card-border);
  cursor: pointer; transition: all .18s;
}
.pl-item:hover { background: var(--card2) }
.pl-item.act { background: rgba(255,215,0,.06); border-left: 3px solid var(--y) }
.pl-num { font-family: var(--font-mono); font-size: 11px; color: var(--text3); width: 20px; flex-shrink: 0 }
.pl-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-dur { font-family: var(--font-mono); font-size: 11px; color: var(--text3); flex-shrink: 0 }

/* ── FIXED PLAYER (bottom) ───────────────────────────────────────── */
.fp {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--player-h);
  background: var(--nav-bg); backdrop-filter: blur(28px);
  border-top: 1px solid var(--border);
  z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  /* Oculto por padrão — só aparece ao dar play (.show via JS) */
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  box-sizing: border-box; max-width: 100vw;
}
.fp.show { transform: translateY(0) }
.fp-info { display: flex; align-items: center; gap: 12px; min-width: 220px; flex: 1 }
.fp-disc {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--p3), var(--card3));
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255,215,0,0); transition: box-shadow .3s;
}
.fp-disc.playing { animation: spin 3s linear infinite; box-shadow: 0 0 14px rgba(255,215,0,.22) }
.fp-disc-inner { width: 12px; height: 12px; border-radius: 50%; background: var(--bg) }
.fp-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fp-cat { font-size: 10px; color: var(--text2); letter-spacing: 1.5px; font-family: var(--font-display); font-weight: 700 }

.fp-controls { display: flex; align-items: center; gap: 8px; justify-content: center; flex: 0 0 auto }
.fp-btn {
  background: rgba(255,255,255,.03); border: 1px solid var(--card-border); color: var(--text2);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0;
  padding: 0;
}
.fp-btn:hover { border-color: var(--border); color: var(--y); background: rgba(255,215,0,.06); transform: translateY(-1px) }
.fp-btn:active { transform: translateY(0) }
.fp-btn[aria-pressed="true"] { color: var(--y); border-color: var(--border); background: rgba(255,215,0,.08) }
.fp-btn.fp-play {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--y2), var(--y));
  border: none; color: #000;
  box-shadow: 0 3px 16px rgba(255,215,0,.35);
}
.fp-btn.fp-play:hover { box-shadow: 0 5px 24px rgba(255,215,0,.55); transform: translateY(-1px) scale(1.04) }
.fp-btn.fp-play:active { transform: translateY(0) scale(1) }
.fp-btn.fp-play svg { position: relative; left: 1px } /* otica: ícone play levemente deslocado p/ centralizar visualmente */

.fp-progress-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px }
.fp-cur, .fp-dur { font-family: var(--font-mono); font-size: 11px; color: var(--text3); white-space: nowrap; min-width: 32px }
.fp-cur { text-align: right }
.fp-bar {
  flex: 1; height: 3px; background: var(--card3); border-radius: 2px; cursor: pointer;
  overflow: hidden; position: relative; transition: height .15s;
}
.fp-bar:hover { height: 5px }
.fp-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--p), var(--y));
  width: 0; border-radius: 2px; transition: width .5s linear; position: relative;
}
.fp-bar-fill::after {
  content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--y);
  box-shadow: 0 0 8px rgba(255,215,0,.6); opacity: 0; transition: opacity .15s;
}
.fp-bar:hover .fp-bar-fill::after { opacity: 1 }

.fp-vol-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0 }
.fp-vol-icon, .fp-vol-icon-btn {
  font-size: 14px; background: none; border: none; color: var(--text2); cursor: pointer;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: color .2s; flex-shrink: 0;
}
.fp-vol-icon-btn:hover { color: var(--y) }
input[type=range].fp-vol { width: 70px; accent-color: var(--y) }

/* Botão fechar — antes sem nenhum estilo, ficava cru e desalinhado */
.fp-close {
  background: none; border: 1px solid var(--card-border); color: var(--text3);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0; padding: 0; margin-left: 4px;
}
.fp-close:hover { border-color: var(--red); color: var(--red); background: rgba(255,45,85,.08); transform: rotate(90deg) }

/* ── MODAIS — Sorteio ────────────────────────────────────────────── */
.sort-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88); backdrop-filter: blur(12px);
  z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.sort-modal-bg.open { opacity: 1; pointer-events: all }
.sort-modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto;
  transform: translateY(24px) scale(.97); transition: transform .3s var(--ease-out);
}
.sort-modal-bg.open .sort-modal { transform: none }
.sort-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
.sort-modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--text) }
.sort-modal-close {
  background: none; border: 1px solid var(--card-border); color: var(--text2);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.sort-modal-close:hover { border-color: var(--red); color: var(--red) }
.sort-modal-body { padding: 24px }
.sort-section { margin-bottom: 20px }
.sort-section-title {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  color: var(--y); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.sort-section p { font-size: 14px; color: var(--text2); line-height: 1.75 }
.sort-section strong { color: var(--text) }

/* Calendário popup */
.cal-popup-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8); backdrop-filter: blur(8px);
  z-index: 3500; display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cal-popup-bg.open { opacity: 1; pointer-events: all }
.cal-popup {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; max-width: 500px; width: 100%; padding: 24px;
  transform: translateY(20px); transition: transform .25s var(--ease-out);
}
.cal-popup-bg.open .cal-popup { transform: none }
.cal-popup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px }
.cal-popup-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 2px; color: var(--text) }
.cal-popup-close {
  background: none; border: 1px solid var(--card-border); color: var(--text2);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.cal-popup-close:hover { border-color: var(--red); color: var(--red) }
.cal-popup-type { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-bottom: 6px }
.cal-popup-date { font-size: 13px; color: var(--text2); letter-spacing: .5px; margin-bottom: 12px }
.cal-popup-desc { font-size: 14px; color: var(--text2); line-height: 1.75 }
.cal-popup-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--y); color: #000;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  padding: 10px 20px; border-radius: 3px; border: none; cursor: pointer; transition: opacity .2s;
  text-decoration: none;
}
.cal-popup-btn:hover { opacity: .85 }

/* ── FOOTER ──────────────────────────────────────────────────────── */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 52px 0 28px;
  position: relative; z-index: 1;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px }
.footer-logo {
  font-family: var(--font-display); font-size: 28px; font-weight: 900; letter-spacing: 4px;
  color: var(--y); margin-bottom: 12px;
}
[data-theme="dark"] .footer-logo { text-shadow: 0 0 20px rgba(255,215,0,.3) }
.footer-logo span { color: var(--text) }
.footer-desc { font-size: 14px; color: var(--text2); line-height: 1.85; margin-bottom: 16px }
.footer-col-title {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 3px;
  color: var(--y); margin-bottom: 14px; text-transform: uppercase;
}
.footer-link {
  display: block; color: var(--text2); font-size: 14px; margin-bottom: 9px;
  transition: color .2s; letter-spacing: .3px; font-weight: 500;
}
.footer-link:hover { color: var(--y) }
/* External footer links — visually signal new tab */
.footer-link[target="_blank"]::after {
  content: ' ↗';
  font-size: 10px;
  opacity: .5;
}
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 18px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: var(--text3); letter-spacing: 1px; font-weight: 700;
  font-family: var(--font-display);
}
.soc-btn {
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; transition: all .22s; color: var(--text2);
}
.soc-btn:hover { border-color: var(--y); color: var(--y); background: rgba(255,215,0,.06); transform: translateY(-2px) }

/* FAB back-to-top */
:root { --fab-offset: 20px }
.fab-top {
  position: fixed; bottom: var(--fab-offset, 20px); right: 16px;
  z-index: 1999; width: 46px; height: 46px; border-radius: 50%;
  background: var(--y); color: #000; border: none; cursor: pointer;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transition: bottom .35s cubic-bezier(.16,1,.3,1), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  opacity: 0; transform: scale(0) translateY(20px);
}
[data-theme="light"] .fab-top { color: #fff; background: var(--p) }
.fab-top.show { opacity: 1; transform: scale(1) translateY(0) }
.fab-top:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 30px rgba(255,215,0,.4) }

/* ── HEXÁGONOS BG ────────────────────────────────────────────────── */
.hero-hex { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.hex {
  position: absolute;
  border: 1px solid rgba(145,70,255,.06);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation: hexFloat linear infinite;
}
@keyframes hexFloat {
  0%   { transform: translateY(110vh) rotate(0deg); opacity: 0 }
  5%   { opacity: 1 }
  90%  { opacity: .3 }
  100% { transform: translateY(-20vh) rotate(400deg); opacity: 0 }
}

#pg-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .35;
}

/* ── SCROLL REVEAL ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.revealed { opacity: 1; transform: none }
.reveal-delay-1 { transition-delay: .1s }
.reveal-delay-2 { transition-delay: .2s }
.reveal-delay-3 { transition-delay: .3s }
.reveal-delay-4 { transition-delay: .4s }

/* ── JAVASCRIPT HELPERS ──────────────────────────────────────────── */
/* FAB sobe via --fab-offset (definida em app.js: showFP/hideFP) */

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .adaptive-grid-3, .stream-grid, .reviews-grid, .footer-grid,
  .podcast-grid, .videos-grid { grid-template-columns: 1fr 1fr }
  .news-grid, .adaptive-grid-2 { grid-template-columns: 1fr }
  .news-list { grid-template-columns: 1fr 1fr }
  .cal-layout { grid-template-columns: 1fr }
  .mini-cal { display: none }
  .ranking-polls-grid { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
  .nav-left, .nav-right:not(:last-child) { display: none }
  .nav-wrap { grid-template-columns: 1fr auto; gap: 0; padding: 0 10px }
  .nav-center { justify-content: flex-start }
  .nav-burger { display: flex; width: 34px; height: 34px; font-size: 16px }
  .nav-logo-text { font-size: clamp(20px, 6vw, 26px) }
  .nav-logo-img { height: clamp(28px, 5vw, 38px) }
  .nav-actions { gap: 4px; margin-left: 4px }
  .live-dot { display: none }
  .theme-toggle { width: 30px; height: 30px; font-size: 13px }
  .btn-login { padding: 6px 10px; font-size: 10px; letter-spacing: 1.5px }
  .adaptive-grid-3, .stream-grid, .reviews-grid, .news-list,
  .footer-grid, .podcast-grid, .videos-grid { grid-template-columns: 1fr }
  .adaptive-grid-3.has-2, .adaptive-grid-2 { grid-template-columns: 1fr }
  .hero-stats { gap: 18px }

  /* Player fixo: reorganiza em vez de só esconder, mantendo controles usáveis */
  .fp { gap: 6px; padding: 0 8px }
  .fp-info { min-width: 0; flex: 0 0 auto; max-width: 34vw }
  .fp-cat { display: none }
  .fp-progress-wrap, .fp-vol-wrap { display: none }
  .fp-controls { flex: 1; justify-content: center; gap: 8px }
  .fp-disc { width: 34px; height: 34px }
  .fp-btn { width: 30px; height: 30px }
  .fp-btn.fp-play { width: 40px; height: 40px }
  .fp-close { width: 24px; height: 24px; margin-left: 0 }

  .pod-player-info { flex: 0 0 140px }
  .pod-player-vol { display: none }
  .hero { padding: 60px 16px 100px }
  .logo-main { font-size: clamp(52px, 14vw, 95px) }
  .vid-modal-bg { padding: 8px }
  .vid-modal-topbar { padding: 8px 12px }
}
@media (max-width: 380px) {
  .btn-login { padding: 6px 8px; font-size: 9px; letter-spacing: 1px }
  .nav-wrap { gap: 2px }
}
@media (max-width: 480px) {
  .hero-stats { gap: 14px }
  .sec { padding: 40px 0 }
  .hstat-num { font-size: 26px }
  .hstat-lbl { font-size: 9px }
  .sec-title { font-size: 20px }
  .nc-img { height: 270px }
  .news-grid { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr }
  .footer-grid > div:first-child { grid-column: 1/-1 }
  .pod-player-inner { gap: 8px }
  .pod-player-info { flex: 0 0 110px }
  .pod-bar-btn:not(.pod-bar-play) { display: none }
}

/* ── SORT LOGIN LABEL ────────────────────────────────────────────── */
.sort-logged-in {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--green);
  display: flex; align-items: center; gap: 5px;
}
.sort-login-link {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--p2);
  border: 1px solid rgba(145,70,255,.25); padding: 4px 12px; border-radius: 3px;
  transition: all .2s;
}
.sort-login-link:hover { background: rgba(145,70,255,.12); border-color: var(--borderp) }
.sort-encerrado-label {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 3px; color: rgba(255,255,255,.35);
}
.sort-cover--clickable { cursor: pointer }

/* ── CATEGORY COLORS ─────────────────────────────────────────────── */
.nc-cat-fps,.nc-cat-rpg,.nc-cat-moba,.nc-cat-hardware,.nc-cat-esports,.nc-cat-mobile,.nc-cat-geral {
  background: var(--card2);
}
.badge.nc-cat-badge--fps    { background:rgba(255,45,85,.12);  color:var(--red);   border:1px solid rgba(255,45,85,.2) }
.badge.nc-cat-badge--rpg    { background:rgba(145,70,255,.12); color:var(--p2);    border:1px solid rgba(145,70,255,.2) }
.badge.nc-cat-badge--moba   { background:rgba(255,215,0,.10);  color:var(--y);     border:1px solid rgba(255,215,0,.2) }
.badge.nc-cat-badge--hardware { background:rgba(0,212,255,.1); color:var(--cyan);  border:1px solid rgba(0,212,255,.18) }
.badge.nc-cat-badge--esports { background:rgba(0,230,118,.1);  color:var(--green); border:1px solid rgba(0,230,118,.18) }
.badge.nc-cat-badge--mobile  { background:rgba(255,102,0,.1);  color:#ff6600;      border:1px solid rgba(255,102,0,.18) }
.badge.nc-cat-badge--geral   { background:rgba(255,255,255,.05); color:var(--text2); border:1px solid var(--card-border) }

.nc-cat-icon--fps    { background:rgba(255,45,85,.1) }
.nc-cat-icon--rpg    { background:rgba(145,70,255,.1) }
.nc-cat-icon--moba   { background:rgba(255,215,0,.08) }
.nc-cat-icon--hardware { background:rgba(0,212,255,.08) }
.nc-cat-icon--esports  { background:rgba(0,230,118,.08) }
.nc-cat-icon--mobile   { background:rgba(255,102,0,.08) }
.nc-cat-icon--geral    { background:rgba(255,255,255,.04) }

.nl-cat-bar--fps    { background:var(--red) }
.nl-cat-bar--rpg    { background:var(--p2) }
.nl-cat-bar--moba   { background:var(--y) }
.nl-cat-bar--hardware { background:var(--cyan) }
.nl-cat-bar--esports  { background:var(--green) }
.nl-cat-bar--mobile   { background:#ff6600 }
.nl-cat-bar--geral    { background:var(--text3) }

.nl-cat-label { font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:2px; padding:2px 7px; border-radius:2px }
.nl-cat-label--fps    { background:rgba(255,45,85,.1);  color:var(--red) }
.nl-cat-label--rpg    { background:rgba(145,70,255,.1); color:var(--p2) }
.nl-cat-label--moba   { background:rgba(255,215,0,.08); color:var(--y) }
.nl-cat-label--hardware { background:rgba(0,212,255,.08); color:var(--cyan) }
.nl-cat-label--esports  { background:rgba(0,230,118,.08); color:var(--green) }
.nl-cat-label--mobile   { background:rgba(255,102,0,.08); color:#ff6600 }
.nl-cat-label--geral    { background:rgba(255,255,255,.04); color:var(--text2) }

.nl-cover--empty { background: var(--card3) }
.nl-cover-placeholder { font-size: 42px; opacity: .25 }

/* Calendar event type colors */
.cal-event-type--launch     { color: var(--y) }
.cal-event-type--esport     { color: var(--cyan) }
.cal-event-type--stream     { color: var(--p2) }
.cal-event-type--deal       { color: var(--green) }
.cal-event-type--tournament { color: var(--red) }
.cal-event-type--update     { color: #ff9800 }

.cal-event-badge--launch     { background:rgba(255,215,0,.1);   color:var(--y);   border:1px solid rgba(255,215,0,.2) }
.cal-event-badge--esport     { background:rgba(0,212,255,.08);   color:var(--cyan); border:1px solid rgba(0,212,255,.18) }
.cal-event-badge--stream     { background:rgba(145,70,255,.1);   color:var(--p2);  border:1px solid rgba(145,70,255,.2) }
.cal-event-badge--deal       { background:rgba(0,230,118,.08);   color:var(--green); border:1px solid rgba(0,230,118,.18) }
.cal-event-badge--tournament { background:rgba(255,45,85,.08);   color:var(--red); border:1px solid rgba(255,45,85,.18) }
.cal-event-badge--update     { background:rgba(255,152,0,.08);   color:#ff9800;    border:1px solid rgba(255,152,0,.18) }