/* ==========================================================================
   LAMER PATUNA Season II - Esports Tournament Styles
   Mobile Legends: Bang Bang — Premium Black & Gold Theme
   ========================================================================== */

/* ==========================================================================
   CSS Variables & Custom Properties
   ========================================================================== */
:root {
  --gold: #C9971E;
  --gold-dark: #7A5310;
  --gold-light: #F4D160;
  --gold-pale: #FBE9A8;
  --gold-rgb: 201, 151, 30;
  --black: #0C0B09;
  --black-2: #131110;
  --dark: #1A1714;
  --dark-2: #211D18;
  --dark-3: #2E2822;
  --gray: #8C8478;
  --gray-light: #A69E90;
  --gray-dark: #58524A;
  --white: #F2EDE4;
  --white-pure: #FAF7F1;
  /* Oro metálico real: no es un solo tono, es una banda de reflejos —
     sombra bronce oscura, cuerpo dorado, un filo casi blanco (el brillo
     especular), y de vuelta a sombra. Así es como se lee "metal" y no
     "amarillo plano". */
  --gradient-gold: linear-gradient(135deg, #6E4A0C 0%, #C9971E 22%, #F4D160 48%, #FFF6D6 52%, #C9971E 76%, #7A5310 100%);
  --gradient-gold-h: linear-gradient(90deg, #6E4A0C 0%, #C9971E 20%, #FFF6D6 50%, #C9971E 80%, #6E4A0C 100%);
  --gradient-gold-text: linear-gradient(135deg, #FBE9A8 0%, #F4D160 22%, #C9971E 55%, #7A5310 100%);
  --gradient-dark: linear-gradient(180deg, transparent 0%, rgba(12,11,9,0.9) 100%);
  --gradient-dark-full: linear-gradient(180deg, #0C0B09 0%, #1A1714 100%);
  --font-title: 'Fraunces', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-accent: 'Fraunces', serif;
  --shadow-gold: 0 0 14px rgba(201, 151, 30, 0.22);
  --shadow-gold-strong: 0 0 42px rgba(201, 151, 30, 0.6);
  --border-gold: 1px solid rgba(201, 151, 30, 0.22);
  --border-gold-strong: 1px solid rgba(244, 209, 96, 0.75);

  /* Paleta para paneles de datos/estadísticas (Data page):
     usa la misma familia oro/negro del resto del sitio en vez de un
     tema neón verde ajeno. Se conservan tonos distintos y apagados
     (no neón) solo para diferenciar función: victoria, derrota y roles. */
  --accent-win: var(--gold-light);
  --accent-loss: #A6473A;
  --rol-exp: #C97C3D;
  --rol-gold: var(--gold);
  --rol-mid: #8C7AC9;
  --rol-jungla: #6FA05A;
  --rol-roam: #5A8FBF;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background-color: var(--black);
  color: var(--gray-light);
  line-height: 1.6;
  overflow-x: hidden;
}



a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

ul { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-dark), var(--gold));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.row > * {
  padding: 0 15px;
}

.col-lg-2 { width: 100%; }
.col-lg-5 { width: 100%; }
.text-center { text-align: center; }
.align-items-center { align-items: center; }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animación de aparición desactivada a pedido: las secciones se
   muestran de una, sin fade-in ni desplazamiento al hacer scroll. */
.animate-on-scroll {
  opacity: 1;
  transform: none;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Header Title (Section Headers) with Liquid Gold Shimmer
   ========================================================================== */
.header-title,
h1.header-title {
  font-family: var(--font-title);
  font-size: 2.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 2rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
  line-height: 1.2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.9)) drop-shadow(0 0 18px rgba(0,0,0,0.7));
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.header-title::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 151, 30,0.6), transparent);
}

.header-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 70px;
  height: 3px;
  background: var(--gradient-gold);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(201, 151, 30, 0.6);
}

.header-title span {
  background: linear-gradient(110deg, #dfc299 15%, #ffffff 48%, #ffd700 52%, #dfc299 85%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldTextShimmer 6s ease-in-out infinite;
  display: inline-block;
  text-shadow: none;
}

@keyframes goldTextShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Gold ornament dividers */


/* ==========================================================================
   Top Bar
   ========================================================================== */
#top-bar {
  background: var(--black);
  border-bottom: 1px solid rgba(201, 151, 30,0.15);
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 8px 0;
  display: none;
}

#top-bar .row { align-items: center; }

.social-links {
  display: flex;
  gap: 4px;
  align-items: center;
}

.social-links li a {
  color: var(--gray);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.social-links li a:hover {
  color: var(--gold);
  border-color: rgba(201, 151, 30,0.4);
  background: rgba(201, 151, 30,0.08);
}

.topbar-logo {
  height: 74px;
  max-width: 190px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.85)) drop-shadow(0 0 22px rgba(201, 151, 30,0.45));
  transition: transform 0.25s ease;
}

.topbar-logo:hover {
  transform: scale(1.05);
}




.language-dropdown { position: relative; }

.lang-btn {
  color: var(--gray);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--gray-dark);
  border-radius: 4px;
  background: transparent;
  letter-spacing: 0.5px;
}

.lang-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}


.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--dark);
  border: var(--border-gold);
  border-radius: 4px;
  display: none;
  min-width: 100px;
  z-index: 2000;
  margin-top: 4px;
}

.lang-menu.show { display: block; }

.lang-menu li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--gray-light);
  font-size: 0.8rem;
}

.lang-menu li a:hover {
  background: rgba(201, 151, 30,0.1);
  color: var(--gold);
}

/* ==========================================================================
   Header & Submenu Dropdowns
   ========================================================================== */
#header {
  background: var(--black);
  border-bottom: 1px solid rgba(201, 151, 30,0.15);
  position: sticky;
  top: 0;
  z-index: 999999 !important;
  transition: all 0.3s ease;
  overflow: visible !important;
}

#header.header-sticky {
  background: rgba(12, 10, 8, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.9), 0 1px 0 rgba(201, 151, 30,0.35);
  border-bottom-color: rgba(201, 151, 30,0.35);
}

.header-wrap {
  padding: 6px 0;
  transition: padding 0.3s ease;
  overflow: visible !important;
}

#header.header-sticky .header-wrap {
  padding: 3px 0;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible !important;
}

.header-logo { flex-shrink: 0; }

.mobile-logo {
  height: 42px;
  max-width: 125px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(201, 151, 30,0.4));
}

#mobile-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--gold);
  padding: 4px;
}

.primary-menu {
  display: none;
  overflow: visible !important;
}

.menu-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
  overflow: visible !important;
}

.menu-item {
  position: relative;
}

.menu-item.has-submenu {
  position: relative;
}

.menu-link {
  display: block;
  padding: 14px 16px;
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-light);
  white-space: nowrap;
  transition: all 0.25s ease;
  position: relative;
  letter-spacing: 1.5px;
  border-radius: 6px;
}

.menu-link:hover {
  color: #fff6d9;
  background: rgba(201, 151, 30, 0.08);
}

.menu-item.current .menu-link {
  color: var(--gold);
  font-weight: 700;
}

.menu-item.current::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: var(--gradient-gold-h);
}

.menu-item.current::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: var(--gradient-gold-h);
  filter: blur(6px);
}

/* Submenu Dropdown for Temporadas */
.sub-menu {
  display: none;
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  background: rgba(15, 12, 9, 0.96) !important;
  border: 1px solid rgba(201, 151, 30, 0.3) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(201, 151, 30, 0.12) !important;
  border-radius: 14px !important;
  min-width: 210px !important;
  z-index: 9999999 !important;
  padding: 8px !important;
  margin-top: 0 !important;
}

.sub-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: rgba(15, 12, 9, 0.96);
  border-left: 1px solid rgba(201, 151, 30, 0.3);
  border-top: 1px solid rgba(201, 151, 30, 0.3);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

.has-submenu:hover > .sub-menu,
.has-submenu:focus-within > .sub-menu,
.has-submenu.open > .sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.sub-menu li {
  width: 100%;
  display: block;
}

.sub-menu-title {
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8c8478;
  padding: 6px 12px 8px;
  border-bottom: 1px solid rgba(201, 151, 30, 0.15);
  margin-bottom: 6px;
}

.sub-menu-season-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px !important;
  border-radius: 9px;
  text-decoration: none !important;
  background: transparent !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.sub-menu-season-item:hover {
  background: rgba(201, 151, 30, 0.1) !important;
  transform: translateX(-3px);
}

.sub-menu-season-item .sms-name {
  font-family: var(--font-title) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.sub-menu-season-item.season-live .sms-name { color: #fff6d9 !important; }

.sms-tag {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.sms-tag--live {
  color: #1a1400;
  background: linear-gradient(180deg, #ffe066, #c9a876);
}

.sms-tag--done {
  color: #cfc6b5;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sub-menu .divider {
  height: 1px;
  background: linear-gradient(to right, rgba(201, 151, 30,0.2), transparent);
  margin: 4px 16px;
}

/* Mobile menu replaced by modern Bottom Dock & Drawer */

/* ==========================================================================
   Hero Banner / Slider
   ========================================================================== */
#slider {
  width: 100%;
  background: var(--black);
  position: relative;
  overflow: visible;
  z-index: 1 !important;
  box-shadow: 0 35px 60px -20px rgba(0, 0, 0, 0.85);
}

.slider-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
  background: var(--black);
  overflow: hidden;
}

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.hero-embers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ===== Pulso de luz ambiental: respira solo, en loop, sin depender de
   interacción del usuario — vida visible desde el primer frame. ===== */
.hero-pulse-glow {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 70%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 90, 0.32) 0%, rgba(255, 180, 40, 0.12) 45%, rgba(255, 180, 40, 0) 72%);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  animation: heroPulseGlow 4.5s ease-in-out infinite;
}

@keyframes heroPulseGlow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pulse-glow { animation: none; opacity: 0.7; }
}

/* ===== Marco de esquinas: brackets dorados tipo vitrina de museo =====
   Sutil, no compite con el arte — solo le da un borde "curado" a la pieza. */
.hero-frame-corners {
  position: absolute;
  inset: 18px;
  z-index: 4;
  pointer-events: none;
}

.hfc {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(244, 209, 96, 0.75);
  filter: drop-shadow(0 0 6px rgba(201, 151, 30, 0.5));
}

.hfc-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.hfc-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.hfc-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.hfc-br { bottom: 0; right: 0; border-left: none; border-top: none; }

@media (max-width: 767px) {
  .hero-frame-corners { inset: 10px; }
  .hfc { width: 28px; height: 28px; }
}

/* ===== Viñeta: unifica tono entre las 3 imágenes ===== */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(6, 5, 4, 0.55) 100%);
}

/* ===== Etiqueta de slide: sensación de galería curada ===== */
.hero-slide-tag {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(10, 8, 6, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 151, 30, 0.35);
  border-radius: 30px;
  font-family: var(--font-body);
}

.hst-index {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--gold-light);
}

.hst-divider {
  width: 1px;
  height: 12px;
  background: rgba(201, 151, 30, 0.4);
}

.hst-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-light);
}

@media (max-width: 767px) {
  .hero-slide-tag { top: 16px; left: 16px; padding: 6px 12px; gap: 7px; }
  .hst-title { display: none; }
}

/* ===== Haz de luz: replica animada del rayo dorado que ya está
   "horneado" en el arte de cada slide (baja desde arriba-centro) ===== */
.hero-light-beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 60%;
  height: 70%;
  transform: translateX(-50%);
  background: conic-gradient(
    from 180deg at 50% 0%,
    rgba(255, 195, 40, 0) 0deg,
    rgba(255, 195, 40, 0.32) 8deg,
    rgba(255, 180, 20, 0.12) 22deg,
    rgba(255, 195, 40, 0) 40deg,
    rgba(255, 195, 40, 0) 320deg,
    rgba(255, 180, 20, 0.12) 338deg,
    rgba(255, 195, 40, 0.32) 352deg,
    rgba(255, 195, 40, 0) 360deg
  );
  mix-blend-mode: screen;
  z-index: 2;
  pointer-events: none;
  animation: heroBeamPulse 6s ease-in-out infinite;
  transform-origin: 50% 0%;
}

@keyframes heroBeamPulse {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scaleY(1.05); }
}

/* ===== Brillo diagonal: recorre la imagen cada varios segundos,
   como un reflejo real de luz sobre el metal dorado del arte ===== */
.hero-glare-sweep {
  position: absolute;
  inset: -20% -60%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    75deg,
    rgba(255, 200, 60, 0) 42%,
    rgba(255, 200, 60, 0.24) 48%,
    rgba(255, 215, 90, 0.42) 50%,
    rgba(255, 200, 60, 0.24) 52%,
    rgba(255, 200, 60, 0) 58%
  );
  transform: translateX(-60%);
  animation: heroGlareSweep 7s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes heroGlareSweep {
  0%   { transform: translateX(-60%); }
  12%  { transform: translateX(60%); }
  100% { transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light-beam { animation: none; opacity: 0.8; }
  .hero-glare-sweep { display: none; }
}

/* ===== Spotlight: luz localizada con relieve real sobre la foto -- barre
   sola en loop cuando nadie interactúa, y sigue al cursor/dedo cuando sí.
   ===== */
@property --spot-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --spot-y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 35%;
}

.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  background: radial-gradient(
    circle at var(--spot-x, 50%) var(--spot-y, 35%),
    rgba(255, 240, 195, 0.95) 0%,
    rgba(255, 210, 120, 0.4) 20%,
    rgba(255, 210, 120, 0) 45%
  );
}

.hero-spotlight.idle {
  animation: heroSpotlightSweep 10s ease-in-out infinite;
}

@keyframes heroSpotlightSweep {
  0%   { --spot-x: 18%; --spot-y: 28%; }
  25%  { --spot-x: 78%; --spot-y: 22%; }
  50%  { --spot-x: 82%; --spot-y: 72%; }
  75%  { --spot-x: 22%; --spot-y: 76%; }
  100% { --spot-x: 18%; --spot-y: 28%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spotlight { animation: none !important; opacity: 0.45; }
}

/* ===== Grano de textura: rompe el look "foto de stock plana" con una
   micro-textura fotográfica, casi imperceptible pero se nota en el
   conjunto. ===== */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transform-origin: center;
}

/* ===== Barra de CTA: vive debajo del carrusel, nunca sobre el arte =====
   Un solo link visible a la vez (el del slide activo), con crossfade. ===== */
.slider-cta-bar {
  position: relative;
  z-index: 3;
  height: 54px;
  background: linear-gradient(180deg, #0a0806 0%, #000 100%);
  border-bottom: 1px solid rgba(201, 151, 30, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-bar-item {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--gradient-gold, linear-gradient(180deg, #ffe066, #c9a876));
  color: #1a1400;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 30px;
  box-shadow: 0 6px 22px rgba(201, 151, 30, 0.35);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}

.cta-bar-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cta-bar-item:hover {
  transform: translateY(-3px) scale(1.045);
  box-shadow: 0 12px 34px rgba(201, 151, 30, 0.7), 0 0 0 1px rgba(255, 246, 214, 0.5);
}

.cta-bar-item i {
  transition: transform 0.25s ease;
}

.cta-bar-item:hover i {
  transform: translateX(3px);
}

@media (max-width: 575px) {
  .slider-cta-bar { height: 46px; }
  .cta-bar-item { padding: 8px 16px; font-size: 0.68rem; }
}



.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 6, 4, 0.55) 0%, rgba(8, 6, 4, 0.18) 14%, rgba(8, 6, 4, 0) 30%);
  pointer-events: none;
  z-index: 1;
}

.slide-caption {
  position: absolute;
  right: 5%;
  bottom: 8%;
  z-index: 2;
  max-width: 320px;
  color: #fff;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Entrada animada del texto: solo cuando el slide está activo,
   con delay escalonado entre título, subtítulo y botón */
.slide-caption-title,
.slide-caption-sub,
.slide-cta {
  opacity: 0;
  transform: translateY(18px);
}

.slide.active .slide-caption-title {
  animation: captionRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.slide.active .slide-caption-sub {
  animation: captionRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.slide.active .slide-cta {
  animation: captionRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

@keyframes captionRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .slide-caption-title,
  .slide-caption-sub,
  .slide-cta {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.slide-caption-title {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
}

.slide-caption-sub {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 500;
  color: #e6ddc9;
  letter-spacing: 1px;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--gradient-gold, linear-gradient(180deg, #ffe066, #c9a876));
  color: #1a1400;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 30px;
  box-shadow: 0 6px 22px rgba(201, 151, 30, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.slide-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 151, 30, 0.55);
}

.slide-cta i {
  transition: transform 0.25s ease;
}

.slide-cta:hover i {
  transform: translateX(3px);
}






.banner-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: var(--gray-light);
  letter-spacing: 3px;
  text-transform: uppercase;
}





.slider-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.5);
  color: var(--gold);
  border: 1px solid rgba(201, 151, 30,0.3);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s;
}

.slider-nav button:hover {
  background: rgba(201, 151, 30,0.15);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.prev-button { left: 10px; }
.next-button { right: 10px; }

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot {
  width: 30px;
  height: 4px;
  border-radius: 3px;
  background: rgba(201, 151, 30,0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.dot-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 3px;
}

.dot.active .dot-progress {
  animation: dotProgressFill 15s linear forwards;
}

@keyframes dotProgressFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* ==========================================================================
   Main Content Background
   ========================================================================== */
.main-content-bg {
  background-color: transparent;
  position: relative;
}

#ambient-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Fondo de ciudad opaco eliminado: tapaba por completo la escena de
   héroes de .epic-hero-bg-fixed, que ahora es el único fondo del sitio. */

.main-content-bg > section {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Standings Section
   ========================================================================== */
.section-standings {
  padding: 4rem 0;
  position: relative;
}

.section-bracket-showcase {
  padding: 2rem 0 4rem;
  position: relative;
}
.section-bracket-showcase .bracket-controls {
  max-width: 1100px;
  margin: 2rem auto 0;
}
.section-bracket-showcase #bracket-interactive-tree {
  max-width: 1100px;
  margin: 0 auto;
}

.standings-wrapper {
  max-width: 960px;
  margin: 2rem auto 0;
}

.standings-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tab-link {
  padding: 0.6rem 1.8rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--gray);
  border: 1px solid var(--gray-dark);
  border-radius: 0;
  transition: all 0.3s ease;
  background: transparent;
  letter-spacing: 1.5px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.tab-link:hover {
  color: var(--gold);
  border-color: var(--gold-dark);
}

.tab-link.active {
  background: var(--gradient-gold);
  color: var(--black);
  border-color: transparent;
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}

.tab-pane { display: none; }

.tab-pane.show.active {
  display: block;
  animation: fadeInUp 0.4s ease;
}

.table-responsive {
  overflow-x: auto;
  border-radius: 8px;
  border: var(--border-gold);
  background: var(--dark);
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-family: var(--font-body);
}

.standings-table thead th {
  background: linear-gradient(180deg, var(--dark-2), var(--black));
  color: var(--gold);
  padding: 0.85rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 2px solid rgba(201, 151, 30,0.3);
  font-family: var(--font-title);
}

.standings-table tbody td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(201, 151, 30,0.08);
  vertical-align: middle;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-light);
  background: var(--dark);
}

.standings-table tbody tr {
  transition: all 0.2s ease;
}

.standings-table tbody tr:nth-child(even) td {
  background: var(--dark-2);
}

.standings-table tbody tr:hover td {
  background: rgba(201, 151, 30,0.05);
}

.col-rank { font-weight: 800; }


.team-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}


.team-name {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-light);
  letter-spacing: 0.5px;
}





.team-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
}



.team-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-dark);
  border: 1px solid var(--dark-3);
  border-radius: 50%;
  background: var(--dark);
}

.team-name {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
  z-index: 1;
}

/* Lower standings */



/* ==========================================================================
   Playoffs Bracket
   ========================================================================== */

.bracket-round {
  background: var(--dark);
  border-radius: 8px;
  padding: 1.5rem;
  border: var(--border-gold);
}



.bracket-match {
  background: var(--dark-2);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(201, 151, 30,0.1);
}



.bracket-team.winner {
  background: rgba(201, 151, 30,0.06);
}

.bracket-team.winner span {
  font-weight: 700;
  color: var(--gold);
}

.bracket-team.winner strong {
  color: var(--gold);
}




/* ==========================================================================
   Video Section
   ========================================================================== */
.section-videos {
  padding: 4rem 0;
  position: relative;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.video-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
  cursor: pointer;
  background: var(--dark);
  padding-bottom: 4px;
  border: 1px solid rgba(201, 151, 30,0.1);
}

.video-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-gold-h);
  z-index: 2;
}

.video-card .thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.video-card:hover .thumbnail {
  transform: scale(1.05);
}

.video-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: var(--white);
}

.video-card:hover .overlay {
  background: linear-gradient(to top, rgba(10,10,10,0.95), rgba(201, 151, 30,0.05) 70%);
}

.video-icon-badge {
  position: absolute;
  top: 0; left: 0;
  padding: 1rem 1.5rem;
  font-size: 1.3rem;
  color: var(--gold);
  z-index: 3;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 0.9rem;
  z-index: 3;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.play-btn i {
  font-size: 3rem;
  filter: drop-shadow(0 0 15px rgba(201, 151, 30,0.5));
  transition: transform 0.3s;
}

.video-card:hover .play-btn i {
  transform: scale(1.15);
  filter: drop-shadow(0 0 25px rgba(201, 151, 30,0.7));
}

.video-info { position: relative; z-index: 3; }

.vi-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.vi-description {
  font-size: 0.8rem;
  color: var(--gray);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.highlight-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 9/16;
  padding-bottom: 4px;
  background: var(--dark);
  border: 1px solid rgba(201, 151, 30,0.1);
}

.highlight-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 50%, transparent 100%);
  z-index: 2;
}

.highlight-card .thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.highlight-card:hover .thumbnail {
  transform: scale(1.1);
}

.highlight-overlay {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  color: var(--white);
}

.highlight-card .vi-title { font-size: 0.8rem; }
.highlight-card .vi-description { font-size: 0.7rem; }

/* ==========================================================================
   Prediction Section
   ========================================================================== */
.section-prediction {
  padding: 4rem 0;
  position: relative;
}

.prediction-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.prediction-matches {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prediction-empty-state {
  text-align: center;
  padding: 2.6rem 1.5rem;
  background: linear-gradient(180deg, var(--dark) 0%, var(--black-2) 100%);
  border: 1px dashed rgba(201, 151, 30, 0.3);
  border-radius: 14px;
}
.prediction-empty-state i {
  font-size: 1.8rem;
  color: var(--gold-dark);
  margin-bottom: 0.6rem;
  display: block;
}
.prediction-empty-state p {
  font-family: var(--font-title);
  color: var(--gold-light, var(--gold));
  font-size: 1rem;
  margin: 0 0 0.3rem;
}
.prediction-empty-state span {
  font-size: 0.8rem;
  color: var(--gray-light);
}

.prediction-ver-todas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-title);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-light, var(--gold));
  border: 1px solid rgba(201, 151, 30, 0.35);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.prediction-ver-todas:hover {
  background: rgba(201, 151, 30, 0.1);
  border-color: rgba(201, 151, 30, 0.6);
}

.match-day-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.match-day-no {
  position: relative;
  padding-left: 0;
}

.day-label {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 2px;
}


.schedule-item {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 151, 30,0.1);
  transition: all 0.3s ease;
}

.schedule-item::before,
.schedule-item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -3px;
  height: 80%;
  width: 4px;
  background: var(--gradient-gold);
  transform: translateY(-50%);
  border-radius: 100%;
}

.schedule-item::before { filter: blur(2px); }
.schedule-item::after { filter: blur(8px); }

.schedule-item:hover {
  border-color: rgba(201, 151, 30,0.3);
  box-shadow: 0 0 20px rgba(201, 151, 30,0.05);
  transform: translateY(-2px);
}

.match-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
}

.match-team img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(201, 151, 30,0.2));
}

.match-team strong {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
}

.match-team.team-1 strong { color: var(--gold); }
.match-team.team-2 strong { color: var(--gold-dark); }

.match-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.vs-text {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--gold);
}

.match-time-label {
  font-size: 0.65rem;
  color: var(--gray);
  font-weight: 600;
}

/* Vote Section */
.vote-section { text-align: center; }

.vote-btn-wrapper {
  display: flex;
  gap: 0;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(201, 151, 30,0.4);
}

.vote-btn {
  flex: 1;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 1px;
}

.vote-btn.team-1 {
  background: var(--gradient-gold);
  color: var(--black);
}

.vote-btn.team-1:hover {
  filter: brightness(1.15);
}

.vote-btn.team-2 {
  background: var(--dark-2);
  color: var(--gold);
  border-left: 1px solid rgba(201, 151, 30,0.3);
}

.vote-btn.team-2:hover {
  background: rgba(201, 151, 30,0.1);
}

.vote-btn.voted-btn {
  outline: 2px solid var(--gold-light);
  outline-offset: -2px;
  position: relative;
}

.vote-btn.voted-btn::after {
  content: '✓ Tu voto';
  position: absolute;
  top: -1.1rem;
  right: 0;
  font-size: 0.6rem;
  letter-spacing: 0;
  color: var(--gold-light);
  font-family: var(--font-body, inherit);
}

.vote-result { margin-top: 0.5rem; }

.vote-bar {
  width: 100%;
  border-radius: 4px;
  height: 8px;
  display: flex;
  overflow: hidden;
  background: var(--dark-3);
}

.vote-result-team {
  height: 100%;
  transition: width 1s ease-out;
}

.vote-result-team.team-1 {
  background: var(--gradient-gold);
}

.vote-result-team.team-2 {
  background: var(--gray-dark);
  flex-grow: 1;
}

.voted {
  background: rgba(201, 151, 30,0.1);
  border: 1px solid rgba(201, 151, 30,0.2);
  padding: 0.3rem 1rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--gold);
  margin-top: 0.5rem;
  font-family: var(--font-title);
  letter-spacing: 1px;
}

/* Leaderboard */
.prediction-leaderboard {
  background: var(--dark);
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
  border: var(--border-gold);
}

.prediction-leaderboard::before,
.prediction-leaderboard::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--gradient-gold-h);
  border-radius: 100%;
}

.prediction-leaderboard::before { top: -1px; }
.prediction-leaderboard::after { bottom: -1px; }

.leaderboard-title {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.leaderboard-wrapper {
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.leaderboard-wrapper::-webkit-scrollbar { width: 3px; }
.leaderboard-wrapper::-webkit-scrollbar-thumb { background: var(--gold-dark); }

.leaderboard-item {
  padding: 0.5rem 1rem 0.5rem 1.2rem;
  background: rgba(201, 151, 30,0.03);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--gray-light);
  position: relative;
  border: 1px solid rgba(201, 151, 30,0.05);
  transition: all 0.2s;
}

.leaderboard-item:hover {
  background: rgba(201, 151, 30,0.06);
  border-color: rgba(201, 151, 30,0.15);
}

.leaderboard-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.leaderboard-item strong { color: var(--gold); }

.lb-score {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   News Section
   ========================================================================== */
/* ==========================================================================
   News & Blog Section — Lamer Patuna (Season II)
   ========================================================================== */
.section-news,
.section-blog {
  padding: 4.5rem 0;
  position: relative;
  z-index: 10;
}

.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.2rem;
  justify-content: flex-start;
}

.blog-filter-pill {
  background: rgba(20, 16, 12, 0.85);
  border: 1px solid rgba(201, 151, 30, 0.25);
  color: var(--gray-light);
  padding: 8px 18px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.4px;
}

.blog-filter-pill:hover,
.blog-filter-pill.active {
  background: linear-gradient(135deg, rgba(201, 151, 30, 0.35) 0%, rgba(244, 209, 96, 0.15) 100%);
  border-color: var(--gold);
  color: var(--white);
  box-shadow: 0 0 14px rgba(201, 151, 30, 0.3);
  transform: translateY(-2px);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.8rem;
  margin-top: 1.5rem;
}

.blog-card {
  background: linear-gradient(180deg, rgba(22, 17, 14, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%);
  border: 1px solid rgba(201, 151, 30, 0.2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 209, 96, 0.6);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(201, 151, 30, 0.25);
}

.blog-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-card:hover .blog-card-thumb img {
  transform: scale(1.06);
}

.blog-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.9) 0%, transparent 60%);
}

.blog-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(12, 10, 8, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.blog-card-body {
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.8rem;
  font-size: 0.72rem;
  color: var(--gray);
}

.blog-meta-row i {
  color: var(--gold);
  margin-right: 4px;
}

.blog-card-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}

.blog-card:hover .blog-card-title {
  color: var(--gold-light);
}

.blog-excerpt {
  color: var(--gray-light);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 151, 30, 0.15);
  margin-top: auto;
}

.open-blog-modal-btn {
  background: transparent;
  border: 1px solid rgba(201, 151, 30, 0.4);
  color: var(--gold-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.open-blog-modal-btn:hover {
  background: var(--gradient-gold);
  color: #0c0b0a;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(201, 151, 30, 0.4);
  transform: translateX(3px);
}

.blog-author {
  font-size: 0.72rem;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Featured / Hero Blog Post on Noticias.html */
.featured-news-card {
  background: linear-gradient(135deg, rgba(28, 20, 14, 0.95) 0%, rgba(14, 11, 8, 0.98) 100%);
  border: 1px solid rgba(201, 151, 30, 0.35);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  margin-bottom: 3rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(201, 151, 30, 0.2);
}

@media (max-width: 991px) {
  .featured-news-card {
    grid-template-columns: 1fr;
  }
}

.featured-news-thumb {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

.featured-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-news-content {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201, 151, 30, 0.2);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 1rem;
  width: fit-content;
}

.featured-news-title {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 1rem;
}

.featured-news-excerpt {
  color: var(--gray-light);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Modal Lector de Artículos */
.galeria-modal {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-modal-open #header,
.gallery-modal-open .mobile-bottom-nav,
.gallery-modal-open .mobile-more-sheet { visibility: hidden !important; }

.galeria-modal.active {
  display: flex;
  opacity: 1;
}

.galeria-modal-container {
  background: #110e0c;
  border: 1px solid rgba(201, 151, 30, 0.4);
  border-radius: 14px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(201, 151, 30, 0.25);
  display: flex;
  flex-direction: column;
}

.galeria-modal-header {
  padding: 1.8rem 2rem 1.2rem;
  border-bottom: 1px solid rgba(201, 151, 30, 0.2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  background: #110e0c;
  z-index: 10;
}

.galeria-modal-body {
  padding: 1.8rem 2rem 2.2rem;
}

.blog-reader-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-reader-modal.active {
  display: flex;
  opacity: 1;
}

.blog-modal-container {
  background: #110e0c;
  border: 1px solid rgba(201, 151, 30, 0.4);
  border-radius: 14px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(201, 151, 30, 0.25);
  display: flex;
  flex-direction: column;
}

.blog-modal-header {
  padding: 1.8rem 2rem 1.2rem;
  border-bottom: 1px solid rgba(201, 151, 30, 0.2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  background: #110e0c;
  z-index: 10;
}

.blog-modal-header-info {
  flex: 1;
}

.blog-modal-tag {
  display: inline-block;
  background: rgba(201, 151, 30, 0.2);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

.blog-modal-title {
  font-family: var(--font-title);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.blog-modal-date {
  font-size: 0.75rem;
  color: var(--gray);
}

.blog-modal-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 151, 30, 0.3);
  color: var(--gray-light);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.25s ease;
}

.blog-modal-close:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.blog-modal-banner {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.blog-modal-body {
  padding: 2rem;
  color: #e0d8cc;
  font-size: 0.96rem;
  line-height: 1.8;
  font-family: var(--font-body);
}

.blog-modal-body h2,
.blog-modal-body h3,
.blog-modal-body h4 {
  font-family: var(--font-title);
  color: var(--gold-light);
  margin: 1.8rem 0 0.8rem;
}

.blog-modal-body p {
  margin-bottom: 1.2rem;
}

.blog-modal-body ul,
.blog-modal-body ol {
  margin: 0 0 1.4rem 1.4rem;
  padding: 0;
}

.blog-modal-body li {
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.blog-modal-body blockquote {
  border-left: 3px solid var(--gold);
  background: rgba(201, 151, 30, 0.08);
  padding: 1rem 1.4rem;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  margin: 1.5rem 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
#footer {
  background: var(--black);
  padding: 3rem 0 0;
  border-top: 1px solid rgba(201, 151, 30,0.15);
}

.sponsors-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(201, 151, 30,0.1);
  margin-bottom: 1.5rem;
}

.sponsor-group { text-align: center; }

.sponsor-title {
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
}

.sponsor-logos img {
  max-width: 120px;
  height: 36px;
  object-fit: contain;
  opacity: 0.4;
  filter: grayscale(100%) brightness(1.5);
  transition: all 0.3s ease;
  margin: 0 auto;
}

.sponsor-logos img:hover {
  opacity: 0.8;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.1);
}

/* ==========================================================================
   Muro de Donadores (Footer)
   ========================================================================== */
.donor-wall-section {
  text-align: center;
  padding: 0 0 2rem;
  border-bottom: 1px solid rgba(201, 151, 30,0.1);
  margin-bottom: 1.5rem;
}

.donor-wall-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.1rem;
}

.donor-wall-title i { color: var(--gold); }

.donor-wall-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem;
}

.donor-wall-pill {
  padding: 6px 18px;
  border: 1px solid rgba(201, 151, 30,0.25);
  border-radius: 30px;
  background: rgba(201, 151, 30,0.05);
  color: var(--gold-pale);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.donor-wall-pill:hover {
  color: var(--gold-light);
  border-color: var(--gold);
  background: rgba(201, 151, 30,0.12);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.5rem 0;
}

.footer-social a {
  color: var(--gray);
  font-size: 1.2rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 151, 30,0.2);
  transition: all 0.3s;
}

.footer-social a:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201, 151, 30,0.08);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.copyright {
  background: var(--dark);
  border-top: 1px solid rgba(201, 151, 30,0.1);
  color: var(--gray);
  text-align: center;
  padding: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.copyright p { margin: 0; }

.dev-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 18px;
  border-radius: 30px;
  border: 1px solid rgba(201, 151, 30, 0.3);
  color: var(--gray-light);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.dev-credit span {
  color: var(--gold-light);
  font-family: var(--font-title);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.5px;
}

.dev-credit:hover {
  border-color: rgba(244, 209, 96, 0.7);
  color: var(--white);
  box-shadow: 0 0 16px rgba(201, 151, 30, 0.35);
  transform: translateY(-1px);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
  .header-title { font-size: 2.2rem; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
  #top-bar { display: block; }
  #mobile-menu-trigger { display: none; }
  .header-logo.d-lg-none { display: none; }
  .primary-menu { display: block !important; flex: 1; }
  .menu-container { flex-direction: row; justify-content: center; }
  .menu-link { font-size: 0.65rem; padding: 14px 7px; }
  .col-lg-2 { width: 16.666667%; }
  .col-lg-5 { width: 41.666667%; }
  .video-grid { grid-template-columns: 2fr 1fr; }
  .video-highlights { grid-template-columns: 1fr; gap: 0.75rem; }
  .highlight-card { aspect-ratio: 16/9; }
  .prediction-content { grid-template-columns: 1fr 320px; }
  .match-team img { width: 50px; height: 50px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
  .menu-link { font-size: 0.7rem; padding: 14px 10px; }
  .header-title { font-size: 2.2rem; }
}

@media (min-width: 1440px) {
  .container { max-width: 1320px; }
}

@media (max-width: 991px) {
  .slider-container { aspect-ratio: 1672 / 941; min-height: auto; width: 100%; }
  .banner-subtitle { font-size: 0.85rem; }
  .prediction-content { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .video-highlights { grid-template-columns: repeat(2, 1fr); }
  .match-teams { gap: 0.5rem; }
  .match-team img { width: 32px; height: 32px; }
  .blog-grid { grid-template-columns: 1fr; }
}


/* ===== Paginas del torneo (Equipos, Partidos, Reglas, etc.) ===== */
.section-generic-page {
    padding: 100px 0 80px;
    min-height: 60vh;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 10;
}
.section-generic-page .placeholder-box {
    border: 1px dashed rgba(201, 151, 30,0.35);
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: rgba(18, 14, 11, 0.6);
}

.prizes-coming-soon-wrap {
    position: relative;
    min-height: 320px;
    border: 1px dashed rgba(201, 151, 30, 0.35);
    border-radius: 8px;
    background: rgba(18, 14, 11, 0.6);
    overflow: hidden;
}

/* ===== Countdown Hero: cuenta regresiva al inicio de temporada =====
   Barra propia debajo del slider (no se superpone a ninguna slide) ===== */
.hero-countdown {
    position: relative;
    z-index: 20;
    text-align: center;
    padding: 26px 12px 22px;
    background:
        radial-gradient(ellipse 60% 140% at 50% 0%, rgba(201, 151, 30,0.14), transparent 70%),
        linear-gradient(180deg, #000 0%, #0a0806 100%);
    border-bottom: 1px solid rgba(201, 151, 30,0.25);
    overflow: hidden;
}

.hero-countdown::before,
.hero-countdown::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(201, 151, 30,0.5) 50%, transparent);
    height: 1px;
    top: 0;
}

.hc-label {
    position: relative;
    z-index: 2;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(201, 151, 30,0.5);
}

.hc-label::before,
.hc-label::after {
    content: '◆';
    font-size: 0.5rem;
    color: rgba(201, 151, 30,0.6);
    margin: 0 10px;
    vertical-align: middle;
}

.hc-blocks {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.hc-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, rgba(30,24,10,0.9) 0%, rgba(0,0,0,0.85) 100%);
    border: 1px solid rgba(201, 151, 30,0.55);
    border-radius: 6px;
    padding: 12px 18px;
    min-width: 72px;
    box-shadow:
        0 0 0 1px rgba(201, 151, 30,0.08),
        0 8px 20px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,225,150,0.12),
        inset 0 0 18px rgba(201, 151, 30,0.06);
}

.hc-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.8;
}

.hc-num {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #fff2c4 0%, var(--gold) 45%, #a97a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hcPulse 1s ease-in-out infinite;
}

@keyframes hcPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(201, 151, 30,0.55)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(201, 151, 30,0.9)); }
}

.hc-unit {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
}

.hc-sep {
    color: var(--gold);
    font-size: 1.6rem;
    font-weight: 700;
    opacity: 0.7;
    transform: translateY(-8px);
    animation: hcSepGlow 1s ease-in-out infinite;
}

@keyframes hcSepGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(201, 151, 30,0.6); }
    50%      { text-shadow: 0 0 16px rgba(244, 209, 96,0.9); }
}

/* Mayor presencia para el calendario semanal y su estado en vivo. */
.hero-countdown { padding: 31px 14px 27px; border-top: 1px solid rgba(201,151,30,.28); background: radial-gradient(ellipse 55% 150% at 50% 50%, rgba(201,151,30,.2), transparent 70%), linear-gradient(180deg, #050403 0%, #0e0a06 100%); }
.hc-label { font-size: .9rem; font-weight: 800; letter-spacing: 3.7px; margin-bottom: .45rem; }
.hc-schedule { position: relative; z-index: 2; margin: 0 0 1.2rem; color: rgba(255,242,204,.76); font-size: .78rem; font-weight: 600; }
.hc-blocks { gap: 18px; }
.hc-block { min-width: 98px; padding: 14px 20px 12px; border-radius: 9px; border-color: rgba(229,178,43,.76); }
.hc-num { font-size: 2.45rem; }
.hc-unit { margin-top: 7px; font-size: .66rem; letter-spacing: 1.8px; }
.hc-sep { font-size: 1.85rem; }
.hero-countdown.is-live { background: radial-gradient(ellipse 55% 160% at 50% 50%, rgba(223,78,52,.3), transparent 70%), linear-gradient(180deg, #150605, #090505); border-color: rgba(241,101,69,.72); }
.hero-countdown.is-live .hc-label { color: #ffb19c; animation: hcLivePulse 1.2s ease-in-out infinite; }
.hero-countdown.is-live .hc-schedule { color: #ffd1c5; }
.hero-countdown.is-live .hc-block { border-color: rgba(248,103,69,.78); background: linear-gradient(180deg, rgba(69,14,10,.92), rgba(17,4,4,.92)); }
.hero-countdown.is-live .hc-num { background: none; color: #ff9d80; -webkit-text-fill-color: #ff9d80; }
.hero-countdown.is-live .hc-sep { color: #ff7257; }
@keyframes hcLivePulse { 0%,100% { text-shadow: 0 0 10px rgba(255,102,72,.5); } 50% { text-shadow: 0 0 22px rgba(255,115,80,1); } }
@media (max-width: 767px) { .hero-countdown { padding: 21px 8px 19px; } .hc-label { font-size: .65rem; letter-spacing: 1.8px; } .hc-schedule { font-size: .65rem; line-height: 1.45; padding-inline: 12px; } .hc-blocks { gap: 6px; } .hc-block { min-width: 62px; padding: 9px 7px; } .hc-num { font-size: 1.5rem; } .hc-sep { font-size: 1.05rem; } }
/* ===== Chispas ascendiendo + barrido de brillo dentro de la barra =====
   100% CSS (sin canvas ni JS extra): 8 partículas con delay/duración
   escalonados para que no suban "todas juntas", más un haz de luz
   diagonal que cruza la barra cada pocos segundos. .hero-countdown ya
   tiene overflow:hidden y position:relative, así que estas capas quedan
   perfectamente recortadas dentro de la barra. ===== */
.hc-embers {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hc-embers span {
    position: absolute;
    bottom: -6px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 6px 1px rgba(201, 151, 30, 0.9), 0 0 14px 3px rgba(201, 151, 30, 0.35);
    opacity: 0;
    animation: hcEmberFloat 5s ease-in infinite;
}

.hc-embers span:nth-child(1) { left: 6%;  animation-delay: 0s;    animation-duration: 4.2s; }
.hc-embers span:nth-child(2) { left: 18%; animation-delay: 0.6s;  animation-duration: 5.1s; }
.hc-embers span:nth-child(3) { left: 31%; animation-delay: 1.3s;  animation-duration: 4.6s; }
.hc-embers span:nth-child(4) { left: 44%; animation-delay: 0.2s;  animation-duration: 5.4s; }
.hc-embers span:nth-child(5) { left: 57%; animation-delay: 1.8s;  animation-duration: 4.4s; }
.hc-embers span:nth-child(6) { left: 69%; animation-delay: 0.9s;  animation-duration: 5.6s; }
.hc-embers span:nth-child(7) { left: 82%; animation-delay: 2.2s;  animation-duration: 4.8s; }
.hc-embers span:nth-child(8) { left: 93%; animation-delay: 1.4s;  animation-duration: 5.2s; }

@keyframes hcEmberFloat {
    0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    10%  { opacity: 0.9; }
    50%  { transform: translateY(-26px) translateX(4px) scale(1); opacity: 0.7; }
    90%  { opacity: 0; }
    100% { transform: translateY(-50px) translateX(-3px) scale(0.4); opacity: 0; }
}

.hc-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
    animation: hcShineSweep 6s ease-in-out infinite;
}

@keyframes hcShineSweep {
    0%, 55% { left: -30%; }
    100%    { left: 130%; }
}

/* Aura pulsante alrededor de cada bloque numérico. Se resuelve con un
   ::after (en vez de tocar el box-shadow del propio .hc-block) porque
   más abajo hay una regla con !important sobre .hc-block que pisaría
   cualquier animación de box-shadow puesta directamente ahí. */
.hc-block::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 8px;
    pointer-events: none;
    animation: hcBlockAura 3s ease-in-out infinite;
}

@keyframes hcBlockAura {
    0%, 100% { box-shadow: 0 0 0 rgba(201, 151, 30, 0); }
    50%      { box-shadow: 0 0 22px 4px rgba(201, 151, 30, 0.35); }
}

@media (max-width: 767px) {
    .hero-countdown { padding: 12px 8px; }
    .hc-block { min-width: 42px; padding: 6px 8px; }
    .hc-num { font-size: 1rem; }
    .hc-sep { font-size: 0.9rem; }
}

/* ===== Lluvia de oro: canvas de fondo sutil ===== */
#gold-rain-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.main-content-bg,
#header,
#slider,
#footer {
    position: relative;
    z-index: 1;
}

/* ===== Equipos reales: grid con logos placeholder ===== */
.page-intro {
    max-width: 700px;
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: -1rem 0 2.5rem;
    opacity: 0.82;
}
.teams-grid-real {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
}
.team-card-real {
    border: 1px solid var(--dark-3);
    background: var(--dark);
    border-radius: 4px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.team-card-real:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
}
.team-logo-placeholder {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.9rem;
    border: 1px dashed var(--dark-3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--gray-dark);
}
.team-logo-placeholder i { font-size: 1.4rem; }
.team-logo-placeholder span {
    font-size: 0.42rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--gray-dark);
}
.team-name-real {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.3px;
}

/* ===== Bloques de reglas ===== */
.rules-block {
    max-width: 780px;
    margin-bottom: 2.5rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid var(--dark-3);
}
.rules-block:last-child { border-bottom: none; }
.rules-block h3 {
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: var(--gold-light);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.rules-block h3 i { color: var(--gold); font-size: 1.1rem; }
.rules-block p {
    color: var(--gray-light);
    line-height: 1.75;
    margin-bottom: 0.9rem;
}
.rules-block strong { color: var(--white); font-weight: 600; }
.rules-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
}
.rules-list li {
    padding: 0.6rem 0 0.6rem 1.2rem;
    border-left: 2px solid var(--dark-3);
    margin-bottom: 0.5rem;
    color: var(--gray-light);
    line-height: 1.6;
}
.tag-clasificado, .tag-eliminado {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
}
.tag-clasificado { background: rgba(107, 115, 83, 0.2); color: #A3AD87; }
.tag-eliminado { background: rgba(176, 87, 87, 0.2); color: #C98D8D; }
.rules-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.88rem;
}
.rules-table th, .rules-table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--dark-3);
}
.rules-table th {
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
}
.rules-table td { color: var(--gray-light); }
.rules-note {
    font-size: 0.82rem;
    color: var(--gray-dark);
    font-style: italic;
}

/* ===== Fechas de Clasificatorias — cuadros ===== */
.fechas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 0 0 1.2rem;
}
.fecha-card {
    background: var(--dark);
    border: 1px solid var(--dark-3);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.25s, transform 0.25s;
}
.fecha-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}
.fecha-card-week {
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
}
.fecha-card-dates {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
}
@media (max-width: 480px) {
    .fechas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Section: Estructura de Premios de Torneo (Season II Gold Luxury)
   ========================================================================== */
.section-premios-showcase {
    padding: 30px 0 20px;
    position: relative;
    z-index: 10;
}

.prizes-showcase-box {
    background: radial-gradient(circle at 50% 20%, rgba(201, 168, 118, 0.14) 0%, rgba(20, 17, 14, 0.95) 55%, #0d0b09 100%);
    border: 1px solid rgba(201, 168, 118, 0.35);
    border-radius: 20px;
    padding: 42px 28px 36px;
    margin: 0 auto;
    max-width: 1050px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.85), 0 0 40px rgba(201, 168, 118, 0.12);
    position: relative;
    overflow: hidden;
}

.prizes-showcase-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(201, 168, 118, 0.8), transparent);
}

.prizes-showcase-header {
    text-align: center;
    margin-bottom: 34px;
}

.prizes-main-title {
    font-family: var(--font-title);
    font-size: 1.95rem;
    font-weight: 800;
    color: #fff6d9;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 0 24px rgba(201, 151, 30, 0.6);
}

.prizes-main-title .gem-accent {
    color: var(--gold);
    font-size: 0.95rem;
    filter: drop-shadow(0 0 8px rgba(201, 151, 30, 0.8));
    animation: pulseGem 2.5s ease-in-out infinite;
}

@keyframes pulseGem {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 215, 0, 1)); }
}

.prizes-game-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 3D Podium Grid */
.prizes-podium-grid {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 22px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.prize-card {
    background: linear-gradient(180deg, rgba(30, 26, 22, 0.95) 0%, rgba(14, 12, 10, 0.98) 100%);
    border: 1px solid rgba(201, 168, 118, 0.25);
    border-radius: 16px;
    padding: 28px 18px 24px;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 310px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.prize-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.04) 50%, transparent 60%);
    transform: rotate(25deg);
    pointer-events: none;
    transition: all 0.6s ease;
}

.prize-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
}

.prize-card:hover::after {
    left: 100%;
    top: 100%;
}

/* 1er Lugar (Center, Tallest, Radiant Aura) */
.prize-card-first {
    background: radial-gradient(circle at 50% 20%, rgba(255, 215, 0, 0.18) 0%, rgba(28, 22, 15, 0.98) 60%, #120e09 100%);
    border: 1px solid rgba(255, 215, 0, 0.75);
    padding: 38px 22px 30px;
    order: 2;
    max-width: 350px;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.9), 0 0 35px rgba(201, 151, 30, 0.3), inset 0 0 25px rgba(201, 151, 30, 0.1);
    animation: goldCardBreathe 4s ease-in-out infinite alternate;
}

@keyframes goldCardBreathe {
    0% { border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 12px 45px rgba(0,0,0,0.9), 0 0 25px rgba(201, 151, 30,0.25); }
    100% { border-color: rgba(255, 225, 70, 0.95); box-shadow: 0 14px 50px rgba(0,0,0,0.95), 0 0 40px rgba(255,215,0,0.45); }
}

.prize-card-second {
    order: 1;
    border-color: rgba(180, 195, 210, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 22px rgba(180, 195, 210, 0.18);
}

.prize-card-second:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(200, 220, 240, 0.3);
}

.prize-card-third {
    order: 3;
    border-color: rgba(205, 140, 95, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 22px rgba(205, 140, 95, 0.18);
}

.prize-card-third:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(205, 140, 95, 0.32);
}

/* Podium Steps (base escalonada) */




/* Champion Ribbon */


/* Light Rays behind trophy */

.prize-card-first > *:not(.prize-light-rays):not(.champion-ribbon) {
    position: relative;
    z-index: 1;
}

/* Badges & Icons */


@keyframes floatTrophy {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-5px) scale(1.04); }
}

/* Medallas: emoji real dentro de un halo circular con brillo, en vez del
   icono plano + número que se veía chico y desalineado */
.prize-medal-badge {
    width: 100%;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    position: relative;
    animation: medalFloat 3.2s ease-in-out infinite alternate;
}

@keyframes medalFloat {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

.prize-medal-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 0;
}

.medal-second::before {
    background: radial-gradient(circle, rgba(200, 220, 240, 0.32) 0%, rgba(200, 220, 240, 0.08) 55%, transparent 75%);
}

.medal-third::before {
    background: radial-gradient(circle, rgba(205, 140, 95, 0.32) 0%, rgba(205, 140, 95, 0.08) 55%, transparent 75%);
}

.medal-real-img {
    position: relative;
    z-index: 1;
    height: 128px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}

.prize-trophy-badge {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    position: relative;
    animation: medalFloat 3.2s ease-in-out infinite alternate;
}

.prize-trophy-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 215, 0, 0.1) 55%, transparent 75%);
    border-radius: 50%;
    z-index: 0;
}

.trophy-real-img {
    position: relative;
    z-index: 1;
    height: 150px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(201, 151, 30, 0.6)) brightness(1.05);
}

/* Place Labels */
.prize-place-label {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 900;
    font-style: italic;
    color: #ffffff;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.prize-place-label .ord {
    font-size: 0.95rem;
    font-weight: 700;
    vertical-align: super;
}

.prize-card-first .prize-place-label {
    color: #ffea88;
    font-size: 2.3rem;
    text-shadow: 0 0 20px rgba(255, 220, 70, 0.7);
}

.prize-place-sub {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #8c8478;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.prize-card-first .prize-place-sub {
    color: #dfc299;
}

/* Rewards Row */
.prize-rewards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cash-reward {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.5);
    padding: 8px 18px;
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(201, 151, 30, 0.25);
}

.reward-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe066 0%, #cca000 100%);
    color: #1a1400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 900;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
}

.reward-info-val {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 900;
    font-style: italic;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.reward-info-unit {
    font-size: 0.8rem;
    font-weight: 800;
    color: #dfc299;
    text-transform: uppercase;
    margin-left: 2px;
}

/* Variante en diamantes (2do y 3er lugar) — mismo estilo que el premio en
   USD del 1er lugar, pero en tono celeste/diamante para diferenciarlo. */
.cash-reward.diamond-reward {
    background: rgba(97, 218, 251, 0.12);
    border: 1px solid rgba(97, 218, 251, 0.5);
    box-shadow: 0 0 20px rgba(97, 178, 221, 0.25);
}
.diamond-reward .reward-icon-circle {
    background: linear-gradient(135deg, #b3ecff 0%, #3aa0d1 100%);
    color: #062733;
    font-size: 1rem;
    box-shadow: 0 0 12px rgba(97, 218, 251, 0.7);
}
.diamond-reward .reward-info-val {
    text-shadow: 0 0 10px rgba(97, 218, 251, 0.5);
}
.diamond-reward .reward-info-unit {
    color: #bfe9fa;
}

/* Upcoming Badge */
.upcoming-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(201, 168, 118, 0.4);
    color: var(--gray);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 10px 18px;
    border-radius: 30px;
    text-transform: uppercase;
}

.icon-hourglass, .icon-trophy {
    width: 0.95em;
    height: 0.95em;
    display: inline-block;
    vertical-align: -0.12em;
    color: var(--gold);
}

/* MVP Bottom Card */
.prize-mvp-card {
    background: linear-gradient(90deg, rgba(38, 18, 28, 0.95) 0%, rgba(22, 14, 20, 0.98) 100%);
    border: 1px solid rgba(244, 209, 96, 0.4);
    border-radius: 14px;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(201, 151, 30, 0.25);
    position: relative;
    overflow: hidden;
}

.prize-mvp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f4d160, #ffb400, transparent);
}

.mvp-left-side {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mvp-crown-icon {
    width: 42px;
    height: 42px;
    color: #ffd76a;
    filter: drop-shadow(0 0 12px rgba(255, 190, 0, 0.9));
    animation: floatTrophy 2.5s ease-in-out infinite alternate;
}

.mvp-crown-icon svg { width: 100%; height: 100%; }

.mvp-title-wrap h4 {
    font-family: var(--font-title);
    font-size: 1.45rem;
    font-style: italic;
    font-weight: 900;
    color: #ffe8a3;
    margin: 0;
    letter-spacing: 1.5px;
    text-shadow: 0 0 15px rgba(244, 209, 96, 0.6);
}

.mvp-title-wrap p {
    font-size: 0.72rem;
    font-weight: 700;
    color: #e8d199;
    margin: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mvp-right-side {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: rgba(201, 151, 30, 0.12);
    border: 1px solid rgba(244, 209, 96, 0.4);
    padding: 8px 20px;
    border-radius: 40px;
    box-shadow: 0 0 15px rgba(201, 151, 30, 0.25);
}

.mvp-dollar {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffe066;
}

.mvp-amount {
    font-family: var(--font-title);
    font-size: 1.9rem;
    font-weight: 900;
    font-style: italic;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(201, 151, 30, 0.6);
}

.mvp-unit {
    font-size: 0.8rem;
    font-weight: 800;
    color: #e8d199;
}

/* Extra Visual Effects: Shimmer Text & Glow */
.hero-countdown {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(201, 168, 118, 0.15) !important;
}

.hc-block {
    box-shadow: inset 0 0 15px rgba(201, 151, 30, 0.12), 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.hc-block:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.25), 0 6px 20px rgba(201, 151, 30, 0.3) !important;
}

@media (max-width: 768px) {
    .prizes-podium-grid {
        flex-direction: column;
        align-items: center;
    }
    .prize-card-first {
        order: 1;
        width: 100%;
        max-width: 100%;
    }
    .prize-card-second {
        order: 2;
        width: 100%;
        max-width: 100%;
    }
    .prize-card-third {
        order: 3;
        width: 100%;
        max-width: 100%;
    }
    .prize-mvp-card {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 20px 16px;
    }
    .mvp-left-side {
        flex-direction: column;
        gap: 8px;
    }
}
/* ===== Eventos y Concursos ===== */
.eventos-page {
    position: relative;
    isolation: isolate;
}
.eventos-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 28%, rgba(201,151,30,.13), transparent 28rem),
        radial-gradient(circle at 88% 58%, rgba(117,57,156,.12), transparent 30rem);
}
.eventos-page .page-intro { max-width: 760px; margin-inline: auto; }
.eventos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2.5rem auto 0;
    max-width: 980px;
}
.evento-card {
    --evento-accent: #d3a630;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 288px;
    padding: 1.45rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--evento-accent) 48%, transparent);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(31,27,25,.97), rgba(11,10,12,.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.38);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.evento-card:nth-child(2) { --evento-accent: #c76679; }
.evento-card:nth-child(3) { --evento-accent: #a36de0; }
.evento-card:nth-child(4) { --evento-accent: #38b9c9; }
.evento-card::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    top: -120px;
    right: -90px;
    border-radius: 50%;
    background: var(--evento-accent);
    opacity: .12;
    filter: blur(16px);
}
.evento-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.09), transparent 32%);
    opacity: .7;
}
.evento-card:hover {
    transform: translateY(-6px);
    border-color: var(--evento-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 20px 42px rgba(0,0,0,.58), 0 0 28px color-mix(in srgb, var(--evento-accent) 22%, transparent);
}
.evento-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: .95rem;
    border: 1px solid color-mix(in srgb, var(--evento-accent) 70%, white);
    border-radius: 15px;
    color: var(--evento-accent);
    font-size: 1.55rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--evento-accent) 24%, #161319), rgba(7,7,9,.78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(0,0,0,.35);
}
.evento-info { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; }
.evento-info::before {
    content: 'CONCURSO DE LA COMUNIDAD';
    margin-bottom: .45rem;
    color: var(--evento-accent);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1.25px;
}
.evento-card:nth-child(4) .evento-info::before { content: 'RECONOCIMIENTO ESPECIAL'; }
.evento-info h3 {
    margin: 0 0 .55rem;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 1.35rem;
    line-height: 1.1;
}
.evento-info p {
    margin: 0 0 1.15rem;
    color: var(--gray-light);
    font-size: .9rem;
    line-height: 1.6;
}
.evento-premios { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; }
.premio-chip {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: .35rem;
    min-height: 42px;
    padding: .36rem .6rem;
    border: 1px solid color-mix(in srgb, var(--evento-accent) 46%, transparent);
    border-radius: 9px;
    color: var(--gold-pale);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    background: rgba(0,0,0,.27);
}
.premio-chip i { grid-row: 1 / span 2; color: var(--evento-accent); font-size: 1rem; }
.premio-chip small { color: var(--gray-light); font-size: .61rem; font-weight: 600; letter-spacing: .2px; }
.premio-chip-1 { --evento-accent: #e4bb42; }
.premio-chip-2 { --evento-accent: #b9c5d6; }
.premio-chip-3 { --evento-accent: #d69065; }
.premio-chip-mvp { --evento-accent: #58c9d6; display: inline-flex; max-width: 100%; line-height: 1.35; }
.eventos-gallery-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: 1px solid var(--gold-light);
    border-radius: 10px;
    color: var(--black);
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg, #c7941e, #f6dc73 52%, #bd8719);
    box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 20px rgba(201,151,30,.22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.eventos-gallery-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.48), 0 0 26px rgba(244,209,96,.35); }
.eventos-gallery-cta i { font-size: 1.15rem; }
.eventos-gallery-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 3rem 0 3.5rem; }
.eventos-gallery-cta--secondary { color: #ffe4a0; background: linear-gradient(135deg, #38270c, #6f4a10); }
.galeria-modal.gallery-only .gallery-form { display: none !important; }
.galeria-modal.gallery-only .gallery-grid { margin-top: 0; }

@media (max-width: 820px) {
    .eventos-grid { grid-template-columns: 1fr; max-width: 560px; }
    .evento-card { min-height: 0; }
}
@media (max-width: 480px) {
    .eventos-grid { gap: .9rem; margin-top: 1.8rem; }
    .evento-card { padding: 1.2rem; }
    .eventos-gallery-cta { width: 100%; justify-content: center; padding-inline: 1rem; }
}
/* ===== Merch: 3D Mystery T-Shirt Card ===== */
.merch-showcase {
    max-width: 440px;
    margin: 2.5rem auto 0;
    text-align: center;
    padding: 3rem 2.2rem 2.5rem;
    background: radial-gradient(circle at 50% 30%, rgba(201, 168, 118, 0.12) 0%, rgba(18, 15, 12, 0.95) 60%, #0d0a08 100%);
    border: 1px solid rgba(201, 168, 118, 0.35);
    border-radius: 16px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(201, 168, 118, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
}

.merch-showcase:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.95), 0 0 40px rgba(201, 151, 30, 0.25);
    border-color: rgba(255, 215, 0, 0.6);
}

.merch-image-wrap {
    width: 200px;
    height: 220px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.merch-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 18px rgba(201, 168, 118, 0.3));
    animation: floatTrophy 3.5s ease-in-out infinite alternate;
    transition: transform 0.3s ease;
}

.merch-showcase:hover .merch-preview-img {
    transform: scale(1.05);
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.5));
}

.merch-proximamente {
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px rgba(201, 151, 30, 0.5);
}

.merch-caption {
    font-size: 0.85rem;
    color: var(--gray-light);
    letter-spacing: 0.5px;
}

/* ===== Boton de inscripcion via Kick ===== */
.btn-inscribirse-kick {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.25s ease, color 0.25s ease;
    margin-top: 0.5rem;
}
.btn-inscribirse-kick:hover {
    background: var(--gold);
    color: var(--black);
}

/* ===== Sponsors placeholder (sin logos reales aun) ===== */
.sponsor-placeholder {
    border: 1px dashed var(--dark-3);
    border-radius: 3px;
    padding: 0.6rem 1.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--gray-dark);
}

/* ===== Contenido de muestra difuminado (videos/noticias sin contenido real aun) ===== */
.coming-soon-blur {
    filter: blur(6px) brightness(0.6);
    pointer-events: none;
    user-select: none;
}

/* ===== Divisor de seccion dentro de Reglas ===== */
.rules-divider {
    max-width: 780px;
    margin: 3rem 0 2.5rem;
    text-align: center;
    position: relative;
}
.rules-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--dark-3);
}
.rules-divider span {
    position: relative;
    background: var(--black);
    padding: 0 1.2rem;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.5px;
}

/* ===== Galeria: login, tabs, formularios, tarjetas de votacion ===== */
.gallery-auth-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--dark-3);
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--gray-light);
}
.btn-gallery-logout {
    background: transparent;
    border: 1px solid var(--dark-3);
    color: var(--gray);
    font-size: 0.78rem;
    padding: 0.4rem 0.9rem;
    border-radius: 3px;
    cursor: pointer;
}
.btn-gallery-logout:hover { border-color: var(--gold); color: var(--gold); }

.gallery-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--dark-3);
}
.gallery-tab {
    background: transparent;
    border: none;
    color: var(--gray);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.8rem 0.3rem;
    margin-right: 1.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.gallery-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.gallery-form {
    max-width: 480px;
    border: 1px solid var(--dark-3);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}
.gallery-form h3 {
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--white);
    margin-bottom: 1rem;
}
/* Utility & Gallery Hidden States */
.hidden,
.gallery-form.hidden,
.gallery-grid.hidden {
    display: none !important;
}

.gallery-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 20px;
    border-bottom: 1px solid var(--dark-3);
    padding-bottom: 8px;
}

.gallery-tab {
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--gray-light);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.gallery-tab:hover {
    color: var(--gold-light);
    border-color: var(--gold);
    background: rgba(201, 168, 118, 0.08);
}

.gallery-tab.active {
    background: linear-gradient(135deg, #b08d57 0%, #c9a876 100%);
    color: #0c0b0a !important;
    border-color: #dfc299;
    box-shadow: 0 0 12px rgba(201, 168, 118, 0.4);
}

.gallery-form label {
    display: block;
    font-size: 0.78rem;
    color: var(--gray);
    margin: 0.9rem 0 0.35rem;
}
.gallery-form input {
    width: 100%;
    background: var(--dark);
    border: 1px solid var(--dark-3);
    color: var(--white);
    padding: 0.6rem 0.8rem;
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 0.85rem;
}
.gallery-form select {
    width: 100%;
    background: var(--dark);
    border: 1px solid var(--dark-3);
    color: var(--white);
    padding: 0.6rem 0.8rem;
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
}
.gallery-form button { margin-top: 1.1rem; cursor: pointer; border: 1px solid var(--gold); background: transparent; }
.gallery-msg { margin-top: 0.7rem; font-size: 0.8rem; }
.gallery-msg.ok { color: #A3AD87; }
.gallery-msg.err { color: #C98D8D; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.3rem;
}
.gallery-card {
    border: 1px solid var(--dark-3);
    border-radius: 4px;
    overflow: hidden;
    background: var(--dark);
}
.gallery-card-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.gallery-card-clip { position: relative; display: block; }
.gallery-card-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2rem; color: rgba(255,255,255,0.85);
}
.gallery-card-body { padding: 0.9rem; }
.gallery-card-categoria {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 10px;
  padding: 2px 8px;
  margin-bottom: 0.35rem;
}
.gallery-card-title { font-size: 0.88rem; color: var(--white); font-weight: 600; margin-bottom: 0.2rem; }
.gallery-card-author { font-size: 0.72rem; color: var(--gray-dark); margin-bottom: 0.7rem; }
.gallery-vote-btn {
    display: flex; align-items: center; gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--dark-3);
    color: var(--gray-light);
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}
.gallery-vote-btn:hover { border-color: var(--gold); }
.gallery-vote-btn.voted { border-color: var(--gold); color: var(--gold); background: rgba(176,141,87,0.1); }
.gallery-loading, .gallery-empty { color: var(--gray-dark); font-size: 0.85rem; grid-column: 1/-1; }

/* ===== Galería de concursos — experiencia visual ===== */
.galeria-modal {
    background: rgba(3,3,5,.84);
    backdrop-filter: blur(16px);
    padding: 24px;
}
.galeria-modal-container {
    max-width: 880px;
    border: 1px solid rgba(225,181,50,.48);
    border-radius: 18px;
    background: linear-gradient(145deg, #18120e, #0c0b0d 55%, #100d11);
    box-shadow: 0 28px 75px rgba(0,0,0,.88), 0 0 36px rgba(201,151,30,.16);
    scrollbar-color: var(--gold) rgba(0,0,0,.28);
}
.galeria-modal-header {
    align-items: center;
    padding: 1.35rem 1.6rem;
    border-bottom: 1px solid rgba(244,209,96,.18);
    background: linear-gradient(100deg, rgba(43,31,16,.96), rgba(17,14,15,.96));
}
.galeria-modal-heading { min-width: 0; }
.galeria-kicker {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .38rem;
    color: var(--gold-light);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.galeria-modal-heading h2 {
    margin: 0;
    color: #fff6d1;
    font-family: var(--font-title);
    font-size: clamp(1.45rem, 3.2vw, 2.15rem);
    line-height: 1;
    letter-spacing: .6px;
}
.galeria-modal-heading p {
    max-width: 610px;
    margin: .55rem 0 0;
    color: var(--gray-light);
    font-size: .82rem;
    line-height: 1.55;
}
.galeria-modal-header .blog-modal-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(244,209,96,.38);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.22);
    transition: transform .2s ease, background .2s ease;
}
.galeria-modal-header .blog-modal-close:hover { transform: rotate(90deg); background: rgba(201,151,30,.18); }
.galeria-modal-body { padding: 1.25rem 1.6rem 2rem; }
.gallery-auth-box {
    justify-content: space-between;
    min-height: 52px;
    margin-bottom: 1.1rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(201,151,30,.22);
    border-radius: 10px;
    color: var(--gray-light);
    background: rgba(0,0,0,.2);
}
.gallery-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}
.gallery-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 47px;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid rgba(201,151,30,.24);
    border-radius: 9px;
    color: var(--gray-light);
    font-family: var(--font-body);
    font-size: .74rem;
    letter-spacing: .35px;
    background: rgba(0,0,0,.22);
}
.gallery-tab:hover { border-color: rgba(244,209,96,.7); color: var(--gold-light); background: rgba(201,151,30,.1); }
.gallery-tab.active { color: #1b1205 !important; border-color: #ffe290; background: linear-gradient(135deg, #b47912, #f6dc83 52%, #bf861b); box-shadow: 0 5px 15px rgba(0,0,0,.3); }
.gallery-form {
    max-width: none;
    margin: 0 0 1.75rem;
    padding: 1.35rem;
    border: 1px solid rgba(201,151,30,.3);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(35,28,22,.75), rgba(13,12,14,.78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.gallery-form h3 { margin: 0 0 .55rem; color: var(--gold-pale); font-size: 1.15rem; }
.gallery-form label { margin-top: .95rem; color: var(--gold-pale); font-size: .72rem; font-weight: 700; letter-spacing: .3px; }
.gallery-form input, .gallery-form select {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    background: rgba(5,5,6,.6);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.gallery-form input:focus, .gallery-form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,151,30,.13); }
.gallery-form button { min-height: 42px; margin-top: 1.2rem; padding: 0 1rem; border-radius: 7px; color: #161005; font-weight: 800; background: linear-gradient(135deg, #bd871b, #f5d871); }
.gallery-grid { gap: 1rem; }
.gallery-card { border-color: rgba(201,151,30,.25); border-radius: 10px; background: rgba(12,11,13,.9); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.gallery-card-body { padding: 1rem; }
.gallery-vote-btn { border-color: rgba(201,151,30,.34); border-radius: 7px; }
.gallery-vote-btn:hover { background: rgba(201,151,30,.1); }

@media (max-width: 600px) {
    .galeria-modal { align-items: flex-end; padding: 0; }
    .galeria-modal-container { max-height: 94vh; border-radius: 18px 18px 0 0; }
    .galeria-modal-header { padding: 1.1rem; gap: .75rem; }
    .galeria-modal-heading h2 { font-size: 1.45rem; }
    .galeria-modal-heading p { font-size: .74rem; }
    .galeria-modal-body { padding: 1rem; }
    .gallery-tabs { grid-template-columns: 1fr; gap: .4rem; }
    .gallery-tab { min-height: 40px; }
    .gallery-form { padding: 1rem; }
}
/* ===== Coming Soon Overlay, Band & Blur (Gestionable desde Admin) ===== */
.coming-soon-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
    background: rgba(10, 8, 6, 0.35);
}

.coming-soon-band {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(170%, 900px);
    transform: translate(-50%, -50%) rotate(-6deg);
    background: linear-gradient(90deg, #A87209, #D4A017, #F0BC2E, #D4A017, #A87209);
    color: #100E0B;
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    padding: 16px 0;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.85), 0 0 25px rgba(201, 151, 30, 0.55);
    border-top: 2px solid rgba(255,255,255,0.5);
    border-bottom: 2px solid rgba(0,0,0,0.4);
    text-shadow: 0 1px 2px rgba(255,255,255,0.35);
}

@media (max-width: 767px) {
    .coming-soon-band {
        width: min(170%, 340px);
        font-size: 0.7rem;
        letter-spacing: 1.5px;
        padding: 10px 0;
    }
}

.coming-soon-blur {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.4s ease;
}

.coming-soon-blur.coming-soon-blur--off,
.coming-soon-blur--off {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
}

/* ==========================================================================
   Top Announcement Bar (Site Config)
   ========================================================================== */
.top-announcement-bar {
    background: linear-gradient(90deg, #A87209, #D4A017, #F0BC2E, #D4A017, #A87209);
    color: #100E0B;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    display: none;
}
.top-announcement-bar.active { display: block; }
.top-announcement-bar .ann-link { color: #100E0B; text-decoration: underline; margin-left: 8px; }

/* ==========================================================================
   Live Registration & Cupos Widget
   ========================================================================== */
#live-registration-widget {
    margin: 20px 0;
    display: none;
}
.live-reg-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(26,23,20,0.95), rgba(33,29,24,0.95));
    border: 1px solid var(--border-gold-strong);
    border-radius: 12px;
    padding: 32px 24px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(176,141,87,0.15);
}
.live-reg-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(176,141,87,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.live-reg-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
}
.live-reg-left { flex: 1 1 420px; }
.live-reg-right { flex: 1 1 360px; }
.live-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(166, 71, 58, 0.14);
    border: 1px solid rgba(166, 71, 58, 0.45);
    color: #E06B5A;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.pulse-dot {
    width: 8px;
    height: 8px;
    background: #E06B5A;
    border-radius: 50%;
    box-shadow: 0 0 8px #E06B5A;
    animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}
.live-reg-title {
    font-family: var(--font-title);
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: 6px;
}
.live-reg-subtitle {
    font-size: 0.95rem;
    color: var(--gray-light);
    margin-bottom: 14px;
}
.gold-text { color: var(--gold-light); }
.live-reg-format-box {
    background: var(--black-2);
    border: 1px dashed var(--dark-3);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.82rem;
}
.live-reg-format-box .format-label {
    display: block;
    color: var(--gold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.live-reg-format-box code {
    color: var(--white-pure);
    font-family: monospace;
    font-size: 0.85rem;
}
.btn-kick-canjear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #53fc18;
    color: #031a03;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(83,252,24,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-kick-canjear:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(83,252,24,0.5);
    color: #000;
}
.cupos-counter-card {
    background: var(--black);
    border: 1px solid var(--border-gold);
    border-radius: 10px;
    padding: 20px;
}
.cupos-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.cupos-label { font-size: 0.85rem; color: var(--gray); text-transform: uppercase; }
.cupos-count { font-size: 1.3rem; color: var(--white); }
.cupos-count strong { color: var(--gold-light); font-size: 1.6rem; }
.cupos-progress-track {
    width: 100%;
    height: 12px;
    background: var(--dark-3);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.cupos-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #A87209, #53fc18);
    border-radius: 6px;
    transition: width 0.5s ease-out;
}
.cupos-percentage-label {
    text-align: right;
    font-size: 0.75rem;
    color: var(--gray);
    margin-bottom: 12px;
}
.recent-inscritos-list {
    border-top: 1px solid var(--dark-2);
    padding-top: 12px;
}
.recent-title {
    display: block;
    font-size: 0.75rem;
    color: var(--gray);
    margin-bottom: 8px;
}
.recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.player-chip {
    background: var(--dark-2);
    border: 1px solid var(--dark-3);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.player-chip .role-mini {
    background: var(--gold-dark);
    color: var(--white);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ==========================================================================
   Section: Donors & Duck Tier Cards (Muro de Honor)
   ========================================================================== */
.section-donors {
    padding: 60px 0;
    position: relative;
}
.donors-subheading {
    text-align: center;
    color: var(--gray-light);
    font-size: 0.95rem;
    margin-top: -10px;
    margin-bottom: 36px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.8);
}
.donors-top-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto 40px;
}
.donor-card-item {
    background: linear-gradient(180deg, var(--dark) 0%, var(--black-2) 100%);
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.donor-card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(176,141,87,0.25);
    border-color: var(--gold-light);
}
.donor-card-item.tier-rank-1 {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}
.donor-rank-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-gold);
    color: var(--black);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    letter-spacing: 0.05em;
}
.donor-card-image-wrap {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 3/4;
    margin: 12px auto 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}
.donor-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.donor-name {
    font-family: var(--font-title);
    font-size: 1.25rem;
    color: var(--white-pure);
    margin-bottom: 4px;
}
.donor-tier-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 4px;
}
.donor-amount {
    font-size: 0.85rem;
    color: var(--gray);
    font-weight: 600;
}
.donor-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-light);
    grid-column: 1/-1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.8);
}
.donor-empty-state .empty-icon {
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9));
}
.donors-view-all-tiers-btn-wrap {
    text-align: center;
    margin-top: 10px;
}
.btn-view-tiers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(8,6,4,0.72);
    border: 1px solid var(--gold);
    color: var(--gold-light);
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
}
.btn-view-tiers:hover {
    background: var(--gold);
    color: var(--black);
}

/* Tiers Showcase Grid */
.all-tiers-showcase {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}
.tier-showcase-card {
    background: var(--dark-2);
    border: 1px solid var(--dark-3);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.tier-showcase-card:hover {
    border-color: var(--gold);
}
.tier-img-box {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
}
.tier-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tier-card-body {
    padding: 14px;
}
.tier-badge {
    display: inline-block;
    background: rgba(176,141,87,0.15);
    color: var(--gold-light);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 4px;
}
.tier-title {
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 4px;
}
.tier-price {
    font-size: 0.9rem;
    color: var(--gold);
    font-weight: 800;
    margin-bottom: 10px;
}
.tier-price-pen {
    font-size: 0.75rem;
    color: var(--gray);
    font-weight: 400;
}
.tier-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-light);
}
.tier-perks li {
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.tier-perks li i {
    color: var(--gold);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Section: Interactive Tournament Brackets
   ========================================================================== */
.bracket-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.bracket-controls label {
    font-size: 0.85rem;
    color: var(--gray);
}
.bracket-select {
    background: var(--dark);
    border: 1px solid var(--border-gold);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.bracket-rounds-wrapper {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding: 20px 10px 30px;
    scrollbar-width: thin;
    position: relative;
}
.bracket-round-col {
    min-width: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bracket-col-title {
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--gold-light);
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--dark-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bracket-col-matches {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    gap: 20px;
}
.bracket-match-node {
    background: var(--dark);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: border-color 0.3s;
}
.bracket-match-node.match-live {
    border-color: #E06B5A;
    box-shadow: 0 0 15px rgba(166,71,58,0.3);
}
.bracket-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: var(--gray);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--dark-2);
    padding-bottom: 4px;
}
.match-code {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}
.match-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.match-status-badge.pendiente { color: var(--gray); }
.match-status-badge.bye { color: var(--gray); font-style: italic; }
.match-status-badge.finalizado { color: var(--gold); background: rgba(176,141,87,0.14); }
.match-status-badge.en_vivo { color: #E06B5A; font-weight: 800; background: rgba(224,107,90,0.14); }
.node-team-name.is-bye-slot { opacity: 0.5; font-style: italic; }
.bracket-node-team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    border-radius: 4px;
}
.bracket-node-team.team-winner {
    background: rgba(176,141,87,0.12);
    color: var(--white-pure);
    font-weight: 700;
}
.bracket-node-team.team-winner .node-team-score {
    color: var(--gold-light);
    font-weight: 800;
}
.bracket-node-team.team-loser {
    opacity: 0.55;
}
.node-team-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.node-team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 3px;
}
.node-team-icon {
    font-size: 1.1rem;
    color: var(--gold);
}
.node-team-name {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.node-team-score {
    font-size: 0.95rem;
    color: var(--white);
    padding-left: 8px;
}
.bracket-vs-sep {
    text-align: center;
    font-size: 0.62rem;
    color: var(--gray);
    letter-spacing: 0.1em;
    border-top: 1px solid var(--dark-2);
    border-bottom: 1px solid var(--dark-2);
    padding: 1px 0;
}
.bracket-match-node { position: relative; z-index: 1; }
.bracket-empty {
    text-align: center;
    color: var(--gray);
    padding: 40px;
    font-size: 0.9rem;
}
.bracket-empty i {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 8px;
    color: var(--gold-dark);
}

/* ==========================================================================
   Roster Modal (Equipos)
   ========================================================================== */
.team-card-interactive {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}
.team-card-interactive:hover {
    transform: translateY(-4px);
    border-color: var(--gold-light);
}
.team-card-score-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(176,141,87,0.2);
    border: 1px solid var(--border-gold);
    color: var(--gold-light);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.team-real-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 6px;
}
.team-roster-preview-btn {
    font-size: 0.72rem;
    color: var(--gold);
    margin-top: 6px;
}
.roster-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.roster-modal-overlay.active { display: flex; }
.roster-modal-dialog {
    background: var(--dark);
    border: 1px solid var(--border-gold-strong);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.roster-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 1.8rem;
    color: var(--gray);
    cursor: pointer;
    background: none;
    border: none;
}
.roster-modal-close:hover { color: var(--white); }
.roster-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--dark-3);
    padding-bottom: 16px;
    margin-bottom: 20px;
}
.roster-modal-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
}
.roster-modal-shield {
    font-size: 2.5rem;
    color: var(--gold);
}
.roster-modal-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--white);
    margin: 0;
}
.roster-modal-score {
    font-size: 0.85rem;
    color: var(--gray-light);
}
.roster-section-heading {
    font-size: 0.85rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.roster-players-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.roster-player-card {
    background: var(--black-2);
    border: 1px solid var(--dark-3);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.player-role-badge {
    background: var(--gold-dark);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 65px;
    text-align: center;
}
.player-role-badge.adc { background: #e06c75; }
.player-role-badge.exp { background: #98c379; }
.player-role-badge.jg { background: #d19a66; }
.player-role-badge.mid { background: #61afef; }
.player-role-badge.roamer { background: #c678dd; }
.player-main-info {
    flex: 1;
    margin: 0 14px;
}
.player-nick {
    display: block;
    color: var(--white);
    font-size: 0.9rem;
}
.player-rank, .player-mlbb-id {
    font-size: 0.72rem;
    color: var(--gray);
    margin-right: 8px;
}
.player-score-tag {
    font-size: 0.85rem;
    color: var(--gold-light);
    font-weight: 700;
}
.roster-socials {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--dark-3);
}
.roster-socials a {
    color: var(--gray);
    font-size: 1.2rem;
    transition: color 0.2s;
}
.roster-socials a:hover { color: var(--gold); }

/* ==========================================================================
   Kick Auth Header & Mobile Navigation Styles
   ========================================================================== */
.top-auth-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.kick-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #53fc18;
    color: #0c0b0a !important;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    box-shadow: 0 0 14px rgba(83, 252, 24, 0.35);
    border: 1px solid #53fc18;
    cursor: pointer;
}

.kick-auth-btn:hover {
    background: #44dd11;
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(83, 252, 24, 0.6);
    color: #000 !important;
}

.kick-auth-btn svg, .kick-auth-btn i {
    font-size: 0.95rem;
}

.kick-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 18, 15, 0.95);
    border: 1px solid rgba(201, 168, 118, 0.45);
    padding: 4px 10px 4px 6px;
    border-radius: 24px;
    color: var(--gold-light);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.kick-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--gold);
}

.kick-user-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

.kick-user-logout {
    background: transparent;
    border: none;
    color: #8c8478;
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    transition: color 0.2s;
    margin-left: 2px;
}

.kick-user-logout:hover {
    color: #e74c3c;
}

/* Mobile Bottom Dock (MPL-PH Style) */
.mobile-bottom-nav {
    display: none;
}

.mobile-more-sheet {
    display: none;
}

@media (max-width: 991px) {
    body {
        padding-bottom: 68px !important;
    }

    #top-bar {
        display: block !important;
        padding: 6px 0;
        background: #080706;
    }

    #top-bar .social-links, #top-bar .topbar-logo {
        display: none !important;
    }

    #top-bar .top-auth-container {
        justify-content: center !important;
    }

    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: rgba(14, 12, 10, 0.98) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(201, 168, 118, 0.35) !important;
        box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.85) !important;
        z-index: 999999 !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 4px 0 !important;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-width: 0;
        height: 100%;
        color: #8C8478;
        font-family: var(--font-body);
        font-size: 0.53rem;
        font-weight: 700;
        letter-spacing: 0.1px;
        text-transform: uppercase;
        transition: color 0.2s, transform 0.15s;
        text-decoration: none;
        padding: 2px 0;
    }

    .mobile-nav-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .mobile-nav-item i {
        font-size: 1.2rem;
        margin-bottom: 2px;
        transition: transform 0.2s;
    }

    .mobile-nav-item:active, .mobile-nav-item.active {
        color: var(--gold-light);
    }

    .mobile-nav-item.active i {
        transform: scale(1.12);
        filter: drop-shadow(0 0 6px rgba(201, 168, 118, 0.6));
    }

    /* Bottom Sheet Drawer for "MÁS" */
    .mobile-more-sheet.active {
        display: block;
    }

    .sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(6px);
        z-index: 1000000;
    }

    .sheet-content {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        background: #141210;
        border-top: 1px solid var(--border-gold-strong);
        border-radius: 20px 20px 0 0;
        padding: 20px 20px 28px;
        z-index: 1000001;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
        animation: slideUp 0.25s ease-out;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .sheet-handle {
        width: 44px;
        height: 5px;
        background: var(--dark-3);
        border-radius: 3px;
        margin: 0 auto 16px;
    }

    .sheet-title {
        font-family: var(--font-title);
        font-size: 1.1rem;
        color: var(--gold-light);
        margin-bottom: 16px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .sheet-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .sheet-link {
        background: #1a1714;
        border: 1px solid var(--dark-3);
        border-radius: 10px;
        padding: 14px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: var(--white);
        font-size: 0.75rem;
        font-weight: 600;
        gap: 8px;
        transition: border-color 0.2s, background 0.2s;
    }

    .sheet-link i {
        font-size: 1.4rem;
        color: var(--gold);
    }

    .sheet-link:active {
        border-color: var(--gold);
        background: rgba(176, 141, 87, 0.15);
    }
}

/* ==========================================================================
   Touch Feedback (dispositivos sin cursor/hover: celulares y tablets)
   Como no hay :hover en touch, se agrega un efecto de "toque" (encoger +
   brillo) al presionar, para que se sienta interactivo igual que en desktop.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

    .menu-link:active {
        color: #fff6d9;
        background: rgba(201, 151, 30, 0.15);
        transform: scale(0.97);
    }

    .sub-menu-season-item:active {
        background: rgba(201, 151, 30, 0.18) !important;
        transform: scale(0.97);
    }

    .slide-cta:active {
        transform: scale(0.95);
        box-shadow: 0 4px 16px rgba(201, 151, 30, 0.65);
    }

    .dot:active {
        transform: scale(1.15);
    }

    .slider-nav button:active {
        background: rgba(201, 151, 30, 0.25);
        border-color: var(--gold);
        transform: translateY(-50%) scale(0.9);
    }



    .prize-card:active {
        transform: scale(0.98);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 20px rgba(201, 151, 30, 0.25);
    }

    .prize-card-first:active {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 30px rgba(201, 151, 30, 0.4);
    }

    .mobile-nav-item:active {
        background: rgba(201, 151, 30, 0.08);
        transform: scale(0.94);
    }

    .mobile-nav-item:active i {
        transform: scale(1.15);
    }

    .sheet-link:active {
        transform: scale(0.95);
        box-shadow: 0 0 16px rgba(176, 141, 87, 0.3);
    }

    .vote-btn:active,
    .kick-auth-btn:active,
    .cta-button:active,
    .btn-primary:active,
    .btn-gold:active {
        transform: scale(0.95);
        filter: brightness(1.1);
    }

    .sponsor-logos > *:active,
    .social-links a:active,
    #footer .social-links a:active {
        transform: scale(0.9);
        filter: brightness(1.3);
    }
}\n\n/* Extracted shared styles */\n#page-tabla .pk-wrap { min-height: unset; height: auto; overflow: visible; }

.hidden { display: none !important; }

.pk-wrap {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    padding: 28px 32px; gap: 20px;
    width: 100%; box-sizing: border-box;
  }

.pk-header { flex-shrink: 0; }

.pk-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 42px; font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(var(--gold-rgb),0.35);
    line-height: 1;
    letter-spacing: 1px;
  }

.pk-sub {
    font-size: 13px; color: var(--gray);
    margin-top: 4px; font-weight: 600;
  }

.pk-filters {
    display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
  }

.pk-filter {
    padding: 6px 20px; border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb),0.3);
    color: rgba(var(--gold-rgb),0.75);
    font-family: 'Exo 2', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 1px; cursor: pointer;
    transition: all .2s;
  }

.pk-filter:hover { border-color: var(--gold); color: var(--gold-light); }

.pk-filter.active {
    background: var(--gradient-gold); color: var(--black);
    border-color: var(--gold);
  }






.pk-hero { text-align: center; flex: 1; min-width: 0; }








.pk-stat-label { font-size: 13px; color: rgba(var(--gold-rgb),0.75); font-weight: 600; }




.hs-wrap {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(var(--gold-rgb),0.16);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }

.hs-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 26px; font-weight: 900;
    color: var(--white);
    letter-spacing: 3px;
    text-align: center;
    padding: 18px 0 14px;
    border-bottom: 2px solid rgba(var(--gold-rgb),0.18);
    background: rgba(var(--gold-rgb),0.05);
    text-shadow: 0 0 20px rgba(var(--gold-rgb),0.25);
  }

.hs-wrap .pk-table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    overflow: visible;
  }

.hs-table th { text-align: center; padding: 11px 14px; }

.hs-th-hero { text-align: left; padding-left: 20px; min-width: 160px; }

.hs-table td { text-align: center; padding: 9px 14px; font-size: 13px; }

.hs-td-hero {
    text-align: left;
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; color: var(--white);
    padding-left: 20px;
    white-space: nowrap;
  }







.hs-hero-img {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; object-position: center 15%;
    flex-shrink: 0; vertical-align: middle;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,0.15);
  }

.hs-hero-img--exp { border-color: var(--rol-exp); box-shadow: 0 0 6px rgba(201,124,61,0.5); }

.hs-hero-img--gold { border-color: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb),0.5); }

.hs-hero-img--jungla { border-color: var(--rol-jungla); box-shadow: 0 0 6px rgba(111,160,90,0.5); }

.hs-hero-img--mid { border-color: var(--rol-mid); box-shadow: 0 0 6px rgba(140,122,201,0.5); }

.hs-hero-img--roam { border-color: var(--rol-roam); box-shadow: 0 0 6px rgba(90,143,191,0.5); }

.top-hero-circle {
    width: 82px; height: 82px; border-radius: 50%;
    object-fit: cover; object-position: center 15%;
    border: 3px solid rgba(242,237,228,0.6);
    box-shadow: 0 0 20px rgba(242,237,228,0.3);
    transition: transform .2s, box-shadow .2s;
  }

.top-hero-circle:hover {
    transform: scale(1.07);
    box-shadow: 0 0 32px rgba(242,237,228,0.5);
  }

.top-hero-circle--pick {
    border-color: rgba(var(--gold-rgb),0.75);
    box-shadow: 0 0 20px rgba(var(--gold-rgb),0.4);
  }

.top-hero-circle--pick:hover {
    box-shadow: 0 0 32px rgba(var(--gold-rgb),0.6);
  }

.top-hero-circle--ban {
    border-color: rgba(166,71,58,0.7);
    box-shadow: 0 0 20px rgba(166,71,58,0.4);
  }

.top-hero-circle--ban:hover {
    box-shadow: 0 0 32px rgba(166,71,58,0.65);
  }

.top-hero-circle--winrate {
    border-color: rgba(var(--gold-rgb),0.75);
    box-shadow: 0 0 20px rgba(var(--gold-rgb),0.4);
  }

.top-hero-circle--winrate:hover {
    box-shadow: 0 0 32px rgba(var(--gold-rgb),0.6);
  }

.pk-esports-circle--img {
    overflow: hidden; padding: 0; background: none !important;
  }

.pk-hero-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 15%;
    border-radius: 50%;
  }

.pk-hero-img--gold { filter: sepia(0.2) saturate(1.2); }

.pk-esports-panel {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px 32px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(var(--gold-rgb),0.16);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    flex-shrink: 0;
  }

.pk-esports-row { display: flex; flex-direction: column; gap: 18px; }

.pk-esports-label {
    display: flex; align-items: center; gap: 14px;
    justify-content: center;
  }

.pk-label-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px; font-weight: 900;
    color: var(--white);
    letter-spacing: 2px;
    white-space: nowrap;
    text-transform: uppercase;
  }

.pk-label-text--gold { color: var(--gold); }

.pk-label-line {
    flex: 1; height: 2px;
    background: linear-gradient(to right, transparent, rgba(var(--white-rgb, 242,237,228),0.5));
  }

.pk-label-line--right {
    background: linear-gradient(to left, transparent, rgba(var(--white-rgb, 242,237,228),0.5));
  }

.pk-label-line--gold {
    background: linear-gradient(to left, transparent, rgba(255,215,0,0.5));
  }

.pk-label-line--left.pk-label-line--gold {
    background: linear-gradient(to right, transparent, rgba(255,215,0,0.5));
  }

.pk-esports-heroes {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
  }

.pk-esports-hero {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    min-width: 80px;
  }

.pk-esports-circle {
    width: 82px; height: 82px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #F2EDE4 40%, #8C8478 100%);
    border: 3px solid rgba(242,237,228,0.6);
    box-shadow: 0 0 20px rgba(242,237,228,0.3), inset 0 2px 6px rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    cursor: default;
  }

.pk-esports-circle:hover {
    transform: scale(1.07);
    box-shadow: 0 0 32px rgba(242,237,228,0.5), inset 0 2px 6px rgba(255,255,255,0.2);
  }

.pk-esports-circle--gold {
    background: radial-gradient(circle at 35% 35%, #FFF6D6 0%, #F4D160 40%, #7A5310 100%);
    border-color: rgba(var(--gold-rgb),0.75);
    box-shadow: 0 0 20px rgba(var(--gold-rgb),0.4), inset 0 2px 6px rgba(255,255,255,0.15);
  }

.pk-esports-circle--gold:hover {
    box-shadow: 0 0 32px rgba(var(--gold-rgb),0.6), inset 0 2px 6px rgba(255,255,255,0.2);
  }

.pk-esports-circle--red {
    background: radial-gradient(circle at 35% 35%, #E08A7D 0%, #A6473A 40%, #4A1F19 100%);
    border-color: rgba(166,71,58,0.7);
    box-shadow: 0 0 20px rgba(166,71,58,0.4), inset 0 2px 6px rgba(255,255,255,0.15);
  }

.pk-esports-circle--red:hover {
    box-shadow: 0 0 32px rgba(166,71,58,0.65), inset 0 2px 6px rgba(255,255,255,0.2);
  }

.pk-hero-img--red { filter: sepia(0.15) saturate(1.1); }

.pk-label-text--red { color: var(--accent-loss); }

.pk-label-line--red {
    background: linear-gradient(90deg, transparent, var(--accent-loss));
  }

.pk-label-line--left.pk-label-line--red {
    background: linear-gradient(270deg, transparent, var(--accent-loss));
  }



.pk-esports-hname {
    font-family: 'Exo 2', sans-serif;
    font-size: 12px; font-weight: 700;
    color: var(--white);
    text-align: center;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }








.pk-table-wrap {
    background: rgba(0,0,0,0.52);
    border: 1px solid rgba(var(--gold-rgb),0.16);
    border-radius: 16px; overflow: hidden;
    backdrop-filter: blur(10px);
    flex: 1; min-height: 0;
  }

.pk-table {
    width: 100%; border-collapse: collapse;
  }

.pk-table thead {
    background: rgba(var(--gold-rgb),0.07);
    position: sticky; top: 0; z-index: 2;
  }

.pk-table th {
    padding: 13px 18px; text-align: left;
    color: var(--gold); font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; cursor: pointer;
    user-select: none; white-space: nowrap;
    border-bottom: 1px solid rgba(var(--gold-rgb),0.12);
  }

.pk-table th:hover { color: var(--white); }

.pk-sort { opacity: 0.5; font-size: 10px; }

.pk-table td {
    padding: 11px 18px; color: var(--gray-light);
    font-size: 13px; font-weight: 600;
    border-top: 1px solid rgba(255,255,255,0.04);
  }

.pk-table tbody tr:hover td { background: rgba(var(--gold-rgb),0.04); }

.pk-table tr.row-hidden { display: none; }

.rb {
    padding: 3px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
    display: inline-block;
  }

.rb-exp { background: rgba(201,124,61,.16); color: var(--rol-exp); border: 1px solid rgba(201,124,61,.35); }

.rb-gold { background: rgba(var(--gold-rgb),.14); color: var(--gold-light); border: 1px solid rgba(var(--gold-rgb),.32); }

.rb-mid { background: rgba(140,122,201,.16); color: var(--rol-mid); border: 1px solid rgba(140,122,201,.35); }

.rb-jungla { background: rgba(111,160,90,.16); color: var(--rol-jungla); border: 1px solid rgba(111,160,90,.32); }

.rb-roam { background: rgba(90,143,191,.16); color: var(--rol-roam); border: 1px solid rgba(90,143,191,.32); }

.vic { color: var(--accent-win); font-weight: 700; }

.der { color: var(--accent-loss); font-weight: 700; }

@media (max-width: 768px) {
  .pk-wrap {
    padding: 16px 14px;
    gap: 16px;
    width: 100%;
  }
  .pk-title { font-size: 28px; }
  .pk-sub { font-size: 12px; }
  .pk-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .pk-filter {
    padding: 6px 14px;
    font-size: 11px;
  }
  .pk-esports-panel {
    padding: 16px 12px;
    gap: 20px;
  }
  .pk-esports-heroes {
    gap: 16px;
  }
  .pk-esports-circle {
    width: 64px;
    height: 64px;
  }
  .pk-esports-hname { font-size: 11px; }
  .pk-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pk-table {
    min-width: 480px;
  }
  .pk-table th, .pk-table td {
    padding: 9px 12px;
    font-size: 11px;
  }
  .hs-hero-img {
    width: 28px;
    height: 28px;
    margin-right: 5px;
  }
  .hs-wrap { overflow-x: auto; }
  .hs-wrap .pk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hs-title { font-size: 14px; }
}

@media (max-width: 420px) {
  .pk-esports-circle {
    width: 52px;
    height: 52px;
  }
  .pk-esports-heroes { gap: 10px; }
}

.wr-high { color: var(--gold-light); font-weight: 700; }

.wr-low { color: var(--accent-loss); }\n\n
/* ══════════════════════════════════════════════════
   DATA PAGE — Draft Modal & Match History
   ══════════════════════════════════════════════════ */

.pk-global-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 2rem;
}
.pk-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
}
.pk-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-light);
}
.pk-stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-top: 4px;
}
.pk-esports-hero-placeholder {
  text-align: center;
  opacity: 0.5;
  padding: 1rem;
}

/* Match History */
#match-history .team-logo {
  object-fit: contain;
  border-radius: 6px;
  width: 48px;
  height: 48px;
}
#match-history .match-team { min-width: 0; text-align: center; }
#match-history .match-team span { overflow-wrap: anywhere; }
.match-team {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.match-team img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.match-score {
  font-size: 1.3rem;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
  color: var(--gold-light);
}
.match-vs {
  opacity: 0.4;
  font-size: 0.8rem;
}

/* Draft Modal */
.draft-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.draft-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
}
.draft-modal-content {
  position: relative;
  background: #0f0f23;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 2rem;
  max-width: 900px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}
.draft-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.draft-modal-close:hover {
  opacity: 1;
}
.draft-player-info {
  flex: 1;
}
.draft-player-name {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Admin draft styles */
.draft-hero-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.draft-hero-input {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #1a1a2e;
  color: #fff;
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
  .pk-global-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   EPIC HERO BG — Escena de héroes como FONDO FIJO de toda la página
   (no es un banner encajonado: es una capa fija detrás de todo el sitio,
   visible en general mientras se hace scroll, con viñeta para legibilidad).
   Assets: season2/img/hero/*.webp
   ========================================================================== */
.epic-hero-bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Fuerza su propia capa de composición (GPU) para que el navegador no
     tenga que repintar toda esta escena en cada frame de scroll. */
  transform: translateZ(0);
  will-change: transform;
  contain: layout paint style;
}

/* Capa 1 — Fondo base (ciudad + rayos de energía convergentes) */
.epic-hero-bg-fixed .epic-hero-bg {
  position: absolute;
  inset: 0;
  background: #060407 var(--lmp-img-ededa18433e9, url("../img/optimized/hero-fondo-1280-72a323893771.webp")) center 30% / cover no-repeat;
}

/* Capa 4 — Impacto central (destello de choque de energía), animado */
.epic-hero-bg-fixed .epic-hero-impact {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(60vw, 680px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: var(--lmp-img-ee223bba6579, url("../img/optimized/hero-impacto-1280-c938d1844e58.webp")) center / contain no-repeat;
  mix-blend-mode: screen;
  animation: epicHeroPulse 3.2s ease-in-out infinite;
}
@keyframes epicHeroPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.75; }
  50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* Capa 2 y 3 — Personajes enfrentados, a tamaño de viewport completo */
.epic-hero-bg-fixed .epic-hero-char {
  position: absolute;
  bottom: 0;
  height: 88vh;
  width: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}
.epic-hero-bg-fixed .epic-hero-char-left {
  left: -2%;
  animation: epicHeroFloatLeft 5s ease-in-out infinite;
}
.epic-hero-bg-fixed .epic-hero-char-right {
  right: -2%;
  animation: epicHeroFloatRight 5.6s ease-in-out infinite;
}
@keyframes epicHeroFloatLeft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-0.6deg); }
}
@keyframes epicHeroFloatRight {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(0.6deg); }
}

/* Capa 5 — Partículas y rayos delanteros */
.epic-hero-bg-fixed .epic-hero-particles {
  position: absolute;
  inset: -6% -4%;
  background: var(--lmp-img-14649e0179d3, url("../img/optimized/hero-efectos-1280-a9bbe7cb62e6.webp")) center / cover no-repeat;
  opacity: 0.85;
  animation: epicHeroDrift 14s ease-in-out infinite;
  will-change: transform;
}
@keyframes epicHeroDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); }
  50%      { transform: translate3d(-1.2%, -0.8%, 0) scale(1.05); }
}

/* Viñeta: mantiene el texto de toda la página legible sobre el fondo */
.epic-hero-bg-fixed .epic-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,4,7,0.35) 0%, rgba(6,4,7,0.18) 22%, rgba(6,4,7,0.6) 55%, rgba(6,4,7,0.94) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(6,4,7,0.08) 0%, rgba(6,4,7,0.6) 68%);
}

@media (max-width: 720px) {
  .epic-hero-bg-fixed .epic-hero-char { height: 52vh; }
  .epic-hero-bg-fixed .epic-hero-char-left { left: -10%; }
  .epic-hero-bg-fixed .epic-hero-char-right { right: -10%; }
  .epic-hero-bg-fixed .epic-hero-impact { width: min(80vw, 420px); top: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  .epic-hero-bg-fixed .epic-hero-impact,
  .epic-hero-bg-fixed .epic-hero-char-left,
  .epic-hero-bg-fixed .epic-hero-char-right,
  .epic-hero-bg-fixed .epic-hero-particles {
    animation: none;
  }
}

/* Mientras se hace scroll, se pausan estas animaciones (pulso con
   mix-blend-mode, flotado con filter, drift) — son las más caras de
   recomponer en cada frame y son las que causaban el lag al scrollear.
   Se reanudan solas ~120ms después de que el scroll se detiene. */
body.is-scrolling .epic-hero-bg-fixed .epic-hero-impact,
body.is-scrolling .epic-hero-bg-fixed .epic-hero-char-left,
body.is-scrolling .epic-hero-bg-fixed .epic-hero-char-right,
body.is-scrolling .epic-hero-bg-fixed .epic-hero-particles {
  animation-play-state: paused;
}

/* Texto de temporada: ya NO va dentro de un banner encajonado, va en el
   flujo normal de la página, flotando directamente sobre el fondo fijo. */
.epic-hero-heading {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 24px 60px;
  text-align: center;
}
.epic-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  margin-bottom: 6px;
}
.epic-hero-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(26px, 5vw, 52px);
  line-height: 1.08;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
  margin: 0 0 10px;
}
.epic-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--white);
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.epic-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gradient-gold-h);
  border-radius: 999px;
  padding: 13px 28px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(201,151,30,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.epic-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(201,151,30,0.5);
}

/* ===== Equipos — Fondo decorativo de toda la página (no es una tarjeta) ===== */
.equipos-page { position: relative; overflow: hidden; }
.equipos-page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.equipos-page > .container {
    position: relative;
    z-index: 1;
}
.teams-reveal-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--lmp-img-cf1b7658d461, url("../img/optimized/fondo-batalla-1280-8ddf251c9e71.webp"));
    background-size: cover;
    background-position: center 30%;
    animation: revealBgDrift 16s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes revealBgDrift {
    0%   { transform: scale(1.04) translate(0, 0); }
    100% { transform: scale(1.09) translate(-1.2%, -0.8%); }
}
.teams-reveal-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,4,7,0.55) 0%, rgba(6,4,7,0.35) 30%, rgba(6,4,7,0.75) 70%, rgba(6,4,7,0.96) 100%);
    z-index: 2;
}

.teams-reveal-char {
    position: absolute;
    top: 6%;
    height: 46%;
    z-index: 1;
    opacity: 0.85;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
}
.teams-reveal-char-left { left: 2%; animation: revealFloatLeft 5s ease-in-out infinite; }
.teams-reveal-char-right { right: 2%; animation: revealFloatRight 5.6s ease-in-out infinite; }
@keyframes revealFloatLeft {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(-0.5deg); }
}
@keyframes revealFloatRight {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(0.5deg); }
}

.teams-reveal-lockup {
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 42%;
    max-width: 320px;
    opacity: 0.9;
}
.reveal-logo { width: 65%; max-width: 220px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.8)); }
.reveal-text1 { width: 85%; max-width: 300px; margin-top: 0.4rem; }

@media (max-width: 900px) {
    .teams-reveal-char { height: 34%; opacity: 0.6; }
    .teams-reveal-lockup { width: 56%; }
    .reveal-logo { max-width: 150px; }
    .reveal-text1 { max-width: 220px; }
}

@media (max-width: 640px) {
    .teams-reveal-char { display: none; }
    .teams-reveal-lockup { width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
    .teams-reveal-bg,
    .teams-reveal-char-left,
    .teams-reveal-char-right {
        animation: none;
    }
}

/* ===== Equipos — Header ===== */
.teams-header {
    text-align: center;
    padding: 4px 0 10px;
}
.teams-header-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gold-light);
    letter-spacing: 1px;
    text-shadow: 0 0 18px rgba(244,209,96,0.25);
}
.teams-header-sub {
    font-size: 0.82rem;
    color: var(--gray);
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-top: 6px;
}

/* ===== Equipos — Grupos de fecha (número + 2 cuadros de incógnita) ===== */
.dates-groups-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2.6rem 3.2rem;
    max-width: 900px;
    margin: 1.8rem auto 1rem;
}
.date-group {
    text-align: center;
}
.date-group-label {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 10px;
}
.date-num {
    font-family: var(--font-title);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--gold-light);
    text-shadow: 0 0 16px rgba(244,209,96,0.3);
}
.date-unit {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gray);
    text-transform: uppercase;
}
.date-group-boxes {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.date-slot {
    width: 100px;
    height: 100px;
    border: 2px dashed rgba(201,151,30,0.4);
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 34px;
    font-weight: 800;
    color: rgba(244,209,96,0.55);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.date-slot:hover {
    border-color: rgba(244,209,96,0.7);
    transform: translateY(-2px);
}

/* Cupo ya clasificado (con equipo real) — antes solo existía el estado
   vacío con el "?"; esto reemplaza el "?" cuando ya se sabe qué equipo
   avanzó, con medalla de 1°/2° puesto e integrantes al pasar el mouse. */
.date-slot-filled {
    width: 132px;
    min-height: 174px;
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 11px 8px 10px;
    text-align: center;
    cursor: help;
    transition: transform .15s ease, border-color .15s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.25);
}
.date-slot-filled.puesto-1 { border: 2px solid rgba(244,209,96,0.75); }
.date-slot-filled.puesto-2 { border: 2px solid rgba(180,180,190,0.6); }
.date-slot-filled:hover { transform: translateY(-2px); border-color: var(--gold-light); }
.date-slot-medal {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: 19px 12px;
    align-items: center;
    width: 96px;
    min-height: 37px;
    padding: 3px 7px 4px 5px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
    font-family: var(--font-title);
    line-height: 1;
    text-align: left;
    text-shadow: 0 1px 1px rgba(0,0,0,0.55);
    box-shadow: 0 3px 9px rgba(0,0,0,0.42);
}
.date-slot-medal i { grid-row: 1 / span 2; font-size: 20px; text-align: center; }
.date-slot-medal strong { font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.date-slot-medal small { font-family: var(--font-body); font-size: 8px; font-weight: 800; letter-spacing: 1.1px; }
.rank-1 { color: #4d2b00; border-top: 1px solid #fff1a8; background: linear-gradient(135deg, #8e5105, #f4c53c 35%, #fff0a6 52%, #c07708 76%, #6e3f03); }
.rank-2 { color: #202632; border-top: 1px solid #f4f7ff; background: linear-gradient(135deg, #566176, #cbd4e4 35%, #f3f5fa 52%, #8792a5 76%, #4c566a); }
.date-slot-logo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,151,30,0.55);
    flex-shrink: 0;
    padding: 3px;
}
.date-slot-team-name {
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    min-height: 2.4em;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 900px) {
    .date-slot { width: 92px; height: 92px; font-size: 30px; }
    .date-slot-filled { width: 122px; min-height: 160px; }
    .date-slot-logo { width: 78px; height: 78px; }
}

@media (max-width: 640px) {
    .dates-groups-wrap { gap: 1.8rem 1.6rem; }
    .date-slot { width: 78px; height: 78px; font-size: 27px; }
    .date-slot-filled { width: 100px; min-height: 140px; padding: 7px 5px; gap: 5px; }
    .date-slot-logo { width: 62px; height: 62px; }
    .date-slot-medal { width: 76px; min-height: 31px; grid-template-columns: 19px 1fr; grid-template-rows: 16px 10px; padding: 2px 5px 3px 3px; }
    .date-slot-medal i { font-size: 16px; }
    .date-slot-medal strong { font-size: 11px; }
    .date-slot-medal small { font-size: 6px; }
    .date-slot-team-name { font-size: 9px; }
    .date-num { font-size: 1.6rem; }
    .teams-header-title { font-size: 1.2rem; }
}

/* ===== Donadores — Salón de los Grandes Patrones ===== */
.grandes-patrones-wrap {
    margin: 2rem 0 3.5rem;
    padding: 2.5rem 1.5rem 3rem;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,151,30,0.10) 0%, rgba(0,0,0,0) 60%), var(--dark);
    border: 1px solid rgba(201,151,30,0.2);
    position: relative;
    overflow: hidden;
}
.grandes-patrones-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(244,209,96,0.03) 0px, rgba(244,209,96,0.03) 1px, transparent 1px, transparent 60px);
    pointer-events: none;
}
.gp-section-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--gold-light);
    letter-spacing: 1px;
    margin-bottom: 2.4rem;
    text-shadow: 0 0 20px rgba(244,209,96,0.35);
}
.gp-section-label i { color: var(--gold); font-size: 1.1rem; }

.gp-cards-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.8rem;
    max-width: 1300px;
    margin: 0 auto;
}
.gp-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #05040a;
    box-shadow: 0 18px 46px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,151,30,0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
    aspect-ratio: 3 / 4;
}
.gp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 40px rgba(244,209,96,0);
    transition: box-shadow 0.35s ease;
    pointer-events: none;
}
.gp-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 26px 64px rgba(0,0,0,0.7), 0 0 34px rgba(244,209,96,0.45), 0 0 0 1px rgba(244,209,96,0.6);
}
.gp-card:hover::after {
    box-shadow: inset 0 0 40px rgba(244,209,96,0.15);
}
.gp-card-img.gp-card-img--complete { object-fit: contain; }
.gp-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1080px) {
    .gp-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; gap: 1.6rem; }
}

@media (max-width: 900px) {
    .gp-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; gap: 1.6rem; }
}

@media (max-width: 640px) {
    .grandes-patrones-wrap { padding: 2rem 1rem 2.2rem; }
    .gp-section-label { font-size: 1.05rem; margin-bottom: 1.8rem; }
    .gp-cards-grid { gap: 1.4rem; grid-template-columns: 1fr; max-width: 360px; }
}


/* ==========================================================================
   Apuestas — página dedicada (apuestas.html)
   ========================================================================== */
.apuestas-hero {
  padding: 3rem 0 1rem;
  min-height: 0;
  text-align: center;
}
.apuestas-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.95rem;
  color: var(--gray-light);
  line-height: 1.6;
}
.apuestas-saldo-bar {
  max-width: 640px;
  margin: 1.6rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(201,151,30,0.10), rgba(201,151,30,0.03));
  border: var(--border-gold);
  border-radius: 12px;
  padding: 0.9rem 1.4rem;
}
.apuestas-saldo-bar .as-label {
  font-family: var(--font-title);
  letter-spacing: 1px;
  color: var(--gray-light);
  font-size: 0.8rem;
  text-transform: uppercase;
}
.apuestas-saldo-bar .as-valor {
  font-family: var(--font-title);
  font-size: 1.4rem;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.apuestas-saldo-bar .kick-auth-btn { font-size: 0.75rem; }

.apuestas-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.2rem;
  align-items: start;
  padding: 2.5rem 0 4rem;
}
@media (max-width: 960px) {
  .apuestas-layout { grid-template-columns: 1fr; }
}

.apuesta-card {
  position: relative;
  background: linear-gradient(180deg, var(--dark) 0%, var(--black-2) 100%);
  border: var(--border-gold);
  border-radius: 14px;
  padding: 1.6rem 1.7rem;
  margin-bottom: 1.6rem;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.apuesta-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-gold-h);
  opacity: 0.7;
}
.apuesta-card:hover {
  border-color: rgba(244,209,96,0.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.apuesta-card.is-resuelta { opacity: 0.82; }
.apuesta-card.is-cerrada { opacity: 0.92; }

.apuesta-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.apuesta-titulo {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--white-pure);
  line-height: 1.35;
}
.apuesta-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}
.apuesta-pozo {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--gold-light);
}
.apuesta-estado-pill {
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  font-weight: 700;
}
.apuesta-estado-pill.abierta { background: rgba(40,167,69,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
.apuesta-estado-pill.cerrada { background: rgba(255,193,7,0.13); color: #ffc107; border: 1px solid rgba(255,193,7,0.35); }
.apuesta-estado-pill.resuelta { background: rgba(244,209,96,0.13); color: var(--gold-light); border: 1px solid rgba(244,209,96,0.35); }

.apuesta-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,151,30,0.18);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.85rem;
}
.apuesta-match-teams { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.apuesta-match-teams strong { color: var(--white); font-weight: 600; }
.apuesta-match-score {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--gold-light);
  white-space: nowrap;
}
.apuesta-match-badge {
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.apuesta-opciones { display: flex; flex-direction: column; gap: 0.65rem; }

.apuesta-opcion {
  position: relative;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(201,151,30,0.22);
  background: var(--dark-2);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--white);
  transition: border-color .25s ease, transform .15s ease;
}
.apuesta-opcion:disabled { cursor: default; }
.apuesta-opcion:not(:disabled):hover { border-color: rgba(244,209,96,0.55); }
.apuesta-opcion:not(:disabled):active { transform: scale(0.995); }

.apuesta-opcion-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(201,151,30,0.28), rgba(244,209,96,0.14));
  transition: width 0.8s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.apuesta-opcion.es-elegida { border-color: var(--gold-light); box-shadow: 0 0 0 1px rgba(244,209,96,0.4) inset; }
.apuesta-opcion.es-mia { border-color: rgba(244,209,96,0.7); }
.apuesta-opcion.es-ganadora { border-color: #4ade80; }
.apuesta-opcion.es-ganadora .apuesta-opcion-fill { background: linear-gradient(90deg, rgba(74,222,128,0.28), rgba(74,222,128,0.12)); }

.apuesta-opcion-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
}
.apuesta-opcion-texto {
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.apuesta-opcion-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.72rem;
  color: var(--gray-light);
  line-height: 1.3;
}
.apuesta-opcion-pct {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--gold-light);
}
.apuesta-opcion-mia-tag {
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  color: var(--gold-light);
  margin-top: 0.15rem;
}

.apuesta-jugada-form {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.apuesta-jugada-inputwrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(201,151,30,0.25);
  border-radius: 8px;
  overflow: hidden;
  background: var(--dark-3);
}
.apuesta-jugada-inputwrap:focus-within { border-color: var(--gold-light); }
.apuesta-jugada-inputwrap input[type="number"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.65rem 0.9rem;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.apuesta-jugada-inputwrap input[type="number"]:focus { outline: none; }
.apuesta-jugada-max {
  border: none;
  border-left: 1px solid rgba(201,151,30,0.2);
  background: rgba(201,151,30,0.1);
  color: var(--gold-light);
  font-family: var(--font-title);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  padding: 0 0.9rem;
  cursor: pointer;
  transition: background .2s ease;
}
.apuesta-jugada-max:hover { background: rgba(201,151,30,0.2); }
.apuesta-jugada-saldo {
  font-size: 0.72rem;
  color: var(--gray-light);
  margin-top: 0.5rem;
}
.apuesta-jugada-saldo strong { color: var(--gold-light); }
.apuesta-jugada-btn {
  font-family: var(--font-title);
  letter-spacing: 1px;
  font-size: 0.78rem;
  padding: 0.65rem 1.4rem;
  border-radius: 8px;
  border: none;
  background: var(--gradient-gold);
  color: var(--black);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s ease;
}
.apuesta-jugada-btn:hover { filter: brightness(1.15); }
.apuesta-jugada-btn:disabled { opacity: 0.5; cursor: default; }

.apuesta-login-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(201,151,30,0.2);
}
.apuesta-login-cta span { font-size: 0.8rem; color: var(--gray-light); }

.apuestas-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed rgba(201,151,30,0.25);
  border-radius: 14px;
  color: var(--gray-light);
  font-size: 0.9rem;
}
.apuestas-empty i { font-size: 1.8rem; color: var(--gold-dark); display: block; margin-bottom: 0.8rem; }

.apuestas-sidebar-sticky { position: sticky; top: 100px; }

.apuestas-leaderboard {
  background: var(--dark);
  border: var(--border-gold);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.apuestas-leaderboard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-gold-h);
}
.apuestas-leaderboard-title {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--gold);
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.al-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  margin-bottom: 0.35rem;
  background: rgba(201,151,30,0.03);
}
.al-item.top-1 { background: linear-gradient(90deg, rgba(244,209,96,0.16), rgba(244,209,96,0.02)); }
.al-item.top-2 { background: linear-gradient(90deg, rgba(201,151,30,0.11), rgba(201,151,30,0.02)); }
.al-item.top-3 { background: linear-gradient(90deg, rgba(122,83,16,0.16), rgba(122,83,16,0.02)); }
.al-rank {
  font-family: var(--font-title);
  font-size: 0.85rem;
  width: 22px;
  text-align: center;
  color: var(--gray-light);
}
.al-item.top-1 .al-rank, .al-item.top-1 .al-name { color: var(--gold-light); }
.al-name { flex: 1; font-size: 0.82rem; color: var(--white); }
.al-balance { font-family: var(--font-title); font-size: 0.82rem; color: var(--gold-light); }

.apuestas-how {
  margin-top: 1.6rem;
  background: var(--dark);
  border: var(--border-gold);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
}
.apuestas-how h4 {
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: var(--gold);
  margin-bottom: 0.7rem;
  letter-spacing: 1px;
}
.apuestas-how ol {
  margin: 0; padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--gray-light);
  line-height: 1.7;
}

/* ── Cuota estilo casa de apuestas (x1.8) ── */
.apuesta-opcion-cuota {
  font-family: var(--font-title);
  font-size: 0.78rem;
  color: var(--white-pure);
  background: rgba(201,151,30,0.18);
  border: 1px solid rgba(244,209,96,0.3);
  border-radius: 5px;
  padding: 0.05rem 0.4rem;
  margin-top: 0.15rem;
}
.apuesta-opcion.es-ganadora .apuesta-opcion-cuota { background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.4); color: #4ade80; }

/* ── Racha en el leaderboard ── */
.al-streak {
  font-size: 0.7rem;
  color: #ffb020;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
}

/* ── Ver más apuestas (tope de tarjetas mostradas) ── */
.apuestas-ver-mas-wrap { text-align: center; margin-top: 0.5rem; }
.apuestas-ver-mas-btn {
  font-family: var(--font-title);
  letter-spacing: 1px;
  font-size: 0.75rem;
  padding: 0.7rem 1.6rem;
  border-radius: 8px;
  border: 1px dashed rgba(201,151,30,0.4);
  background: rgba(201,151,30,0.05);
  color: var(--gold-light);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.apuestas-ver-mas-btn:hover { background: rgba(201,151,30,0.13); border-color: rgba(244,209,96,0.55); }

/* ── Botón "Ver historial" / recompensa diaria en la barra de saldo ── */
.as-historial-btn,
.as-daily-btn {
  font-family: var(--font-title);
  letter-spacing: 0.5px;
  font-size: 0.72rem;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  border: 1px solid rgba(201,151,30,0.35);
  background: rgba(201,151,30,0.08);
  color: var(--gold-light);
  cursor: pointer;
  transition: background .2s ease;
  white-space: nowrap;
}
.as-historial-btn:hover { background: rgba(201,151,30,0.18); }
.as-daily-btn { border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.1); color: #4ade80; }
.as-daily-btn:hover { background: rgba(74,222,128,0.2); }
.as-daily-btn:disabled { opacity: 0.55; cursor: default; color: var(--gray-light); border-color: rgba(201,151,30,0.2); background: transparent; }

/* ── Modal: Mis Apuestas (historial) ── */
.mis-apuestas-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mis-apuestas-modal-overlay.active { display: flex; }
.mis-apuestas-modal-dialog {
  background: var(--dark);
  border: 1px solid var(--border-gold-strong);
  border-radius: 12px;
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.mis-apuestas-modal-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--gold);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mis-apuestas-modal-body { display: flex; flex-direction: column; gap: 0.7rem; }
.ma-item {
  border: 1px solid rgba(201,151,30,0.2);
  background: var(--dark-2);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.ma-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.7rem; }
.ma-item-titulo { font-size: 0.88rem; color: var(--white-pure); font-weight: 600; line-height: 1.35; }
.ma-item-opcion { font-size: 0.76rem; color: var(--gray-light); margin-top: 0.3rem; }
.ma-item-badge {
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.ma-item-badge.pendiente { background: rgba(255,193,7,0.13); color: #ffc107; border: 1px solid rgba(255,193,7,0.35); }
.ma-item-badge.ganada { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
.ma-item-badge.perdida { background: rgba(220,53,69,0.13); color: #f87171; border: 1px solid rgba(248,113,113,0.35); }
.ma-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; font-size: 0.76rem; color: var(--gray-light); }
.ma-item-neto { font-family: var(--font-title); font-size: 0.85rem; }
.ma-item-neto.pos { color: #4ade80; }
.ma-item-neto.neg { color: #f87171; }
.mis-apuestas-empty { text-align: center; padding: 2rem 1rem; color: var(--gray-light); font-size: 0.85rem; }

/* ── Toasts: notificación de apuesta resuelta ── */
.apuestas-toast-wrap {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 340px;
}
@media (max-width: 640px) {
  .apuestas-toast-wrap { right: 12px; left: 12px; max-width: none; bottom: 80px; }
}
.apuestas-toast {
  background: var(--dark);
  border: 1px solid var(--border-gold-strong);
  border-left: 4px solid var(--gold-light);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  animation: toastIn .35s cubic-bezier(.2,.8,.2,1);
}
.apuestas-toast.is-ganada { border-left-color: #4ade80; }
.apuestas-toast.is-perdida { border-left-color: #f87171; }
.apuestas-toast-icon { font-size: 1.3rem; line-height: 1; }
.apuestas-toast-text { font-size: 0.8rem; color: var(--white); line-height: 1.4; }
.apuestas-toast-text strong { color: var(--gold-light); }
.apuestas-toast-close { margin-left: auto; background: none; border: none; color: var(--gray-light); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.apuestas-toast.is-leaving { animation: toastOut .3s ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* ── MVP de la Semana (reemplaza la vieja tabla de "Posiciones", que
   quedaba vacía con un cartel de "PRÓXIMAMENTE" porque este torneo es por
   bracket, no por tabla de posiciones — nunca iba a tener datos que mostrar
   ahí). Muestra el video destacado del MVP de cada fecha, igual que se
   hacía en la Season 1. ── */
.mvp-semanal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}
.mvp-semanal-card {
  background: var(--dark-2);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  transition: border-color .2s ease, transform .2s ease;
}
.mvp-semanal-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.mvp-semanal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title, inherit);
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--gold-light);
  background: rgba(var(--gold-rgb), 0.1);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 30px;
  padding: 8px 20px;
  margin-bottom: 20px;
}
.mvp-semanal-links { display: flex; flex-direction: column; gap: 10px; }
.mvp-semanal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.mvp-semanal-link:hover { background: rgba(var(--gold-rgb), 0.12); border-color: var(--gold); color: var(--gold-light); }
.mvp-semanal-link .bi-tiktok { color: #ff0050; }
.mvp-semanal-link .bi-youtube { color: #ff0000; }

/* ── Premios de las Predicciones (pases semanales por posición) ──
   Antes esta sección de predicciones no mostraba en ningún lado qué se
   ganaba por quedar en el ranking — el pedido de "mejorar el apartado de
   predicciones" empieza por ahí: mostrar los premios reales antes de la
   tabla, con los primeros 3 puestos destacados en dorado/plata/bronce
   igual que el resto del sitio hace con podios. */
.prediction-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.pp-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-light);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 4px 10px;
}
.pp-item i { font-size: .8rem; }
.pp-top1 { color: #1a1a1a; background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-color: var(--gold); font-weight: 700; }
.pp-top2 { color: #1a1a1a; background: linear-gradient(135deg, #e2e2e2, #b8b8b8); border-color: #c8c8c8; font-weight: 700; }
.pp-top3 { color: #1a1a1a; background: linear-gradient(135deg, #d8a06a, #b4753f); border-color: #b4753f; font-weight: 700; }

/* Rediseño de la próxima jornada: calendario + contador de arena. */
.hero-countdown {
    display: grid;
    justify-items: center;
    padding: 24px 16px 28px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.78), transparent 28%, transparent 72%, rgba(0,0,0,.78)),
        radial-gradient(ellipse 55% 120% at 50% 100%, rgba(181,122,19,.23), transparent 68%),
        #080706;
}
.hero-countdown::before, .hero-countdown::after { display: none; }
.hc-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .8rem;
    border: 1px solid rgba(235,188,54,.38);
    border-radius: 99px;
    color: #f6d979;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: 1.45px;
    text-transform: uppercase;
    background: rgba(75,52,12,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.hc-kicker i { color: #ffe492; font-size: .78rem; }
.hc-label {
    max-width: 620px;
    margin: .7rem 0 .25rem;
    color: #fff5d1;
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.1;
    text-transform: none;
    text-shadow: 0 2px 16px rgba(0,0,0,.9);
}
.hc-label::before, .hc-label::after { display: none; }
.hc-schedule {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin: 0 0 1.15rem;
    color: rgba(255,240,195,.72);
    font-size: .75rem;
    font-weight: 600;
}
.hc-schedule i { color: var(--gold); }
.hc-blocks {
    display: grid;
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    gap: 8px;
    width: min(100%, 500px);
    padding: 8px;
    border: 1px solid rgba(201,151,30,.26);
    border-radius: 14px;
    background: rgba(0,0,0,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 26px rgba(0,0,0,.28);
}
.hc-sep { display: none; }
.hc-block {
    min-width: 0;
    min-height: 92px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(231,183,47,.38);
    border-radius: 9px;
    background: linear-gradient(155deg, rgba(73,53,17,.65), rgba(13,11,10,.96) 62%);
    box-shadow: inset 0 1px 0 rgba(255,235,171,.14), inset 0 -12px 20px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.28) !important;
}
.hc-block::before { height: 3px; opacity: .95; }
.hc-block::after { inset: 0; border-radius: 9px; animation: none; background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 32%); }
.hc-num { font-size: 2.25rem; letter-spacing: -1px; animation: none; }
.hc-unit { margin-top: 7px; color: rgba(255,241,204,.58); font-size: .6rem; font-weight: 800; letter-spacing: 1.45px; }
.hero-countdown.is-live { background: radial-gradient(ellipse 55% 120% at 50% 100%, rgba(213,58,35,.36), transparent 68%), #100504; }
.hero-countdown.is-live .hc-kicker { color: #ffd1c4; border-color: rgba(255,117,88,.48); background: rgba(112,25,15,.32); }
.hero-countdown.is-live .hc-kicker i { color: #ff9f84; }
.hero-countdown.is-live .hc-label { color: #ffd1c4; }
.hero-countdown.is-live .hc-schedule, .hero-countdown.is-live .hc-schedule i { color: #ffad98; }
.hero-countdown.is-live .hc-block { border-color: rgba(255,105,76,.5); background: linear-gradient(155deg, rgba(91,20,13,.7), rgba(19,5,5,.96) 62%); }
@media (max-width: 560px) {
    .hero-countdown { padding: 19px 9px 20px; }
    .hc-kicker { font-size: .56rem; }
    .hc-label { font-size: 1.1rem; }
    .hc-schedule { margin-bottom: .85rem; font-size: .64rem; }
    .hc-blocks { gap: 5px; padding: 5px; border-radius: 10px; }
    .hc-block { min-height: 70px; padding: 8px 3px 6px; border-radius: 6px; }
    .hc-num { font-size: 1.45rem; }
    .hc-unit { margin-top: 4px; font-size: .48rem; letter-spacing: .8px; }
}
/* Panel competitivo de próxima jornada: reemplaza el contador plano. */
.hero-countdown {
    display: block;
    padding: 22px max(18px, calc((100% - 1120px) / 2));
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0,0,0,.96), rgba(15,10,4,.68) 50%, rgba(0,0,0,.96)),
        radial-gradient(circle at 15% 50%, rgba(196,130,21,.22), transparent 28%),
        #070605;
    border-top: 1px solid rgba(234,187,48,.24);
    border-bottom: 1px solid rgba(234,187,48,.24);
}
.hero-countdown::before, .hero-countdown::after { display: none; }
.hc-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(270px, .9fr) minmax(530px, 1.35fr);
    align-items: stretch;
    max-width: 1120px;
    margin: auto;
    border: 1px solid rgba(224,176,42,.42);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(7,6,6,.72);
    box-shadow: 0 16px 44px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,246,196,.1);
}
.hc-event-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px 28px;
    background: linear-gradient(145deg, rgba(79,51,8,.76), rgba(19,13,6,.92) 58%, rgba(8,7,7,.94));
}
.hc-event-panel::after { content: ''; position: absolute; top: 12%; right: 0; width: 1px; height: 76%; background: linear-gradient(transparent, rgba(248,207,90,.75), transparent); }
.hc-kicker { align-self: flex-start; padding: 0; border: 0; border-radius: 0; color: #f6cf57; background: none; box-shadow: none; font-size: .65rem; letter-spacing: 1.8px; }
.hc-kicker i { font-size: .9rem; }
.hc-label { margin: .65rem 0 .38rem; max-width: 330px; color: #fff5d1; font-size: clamp(1.35rem, 2vw, 1.85rem); font-family: var(--font-title); font-weight: 700; line-height: 1.05; text-align: left; }
.hc-label::before, .hc-label::after { display: none; }
.hc-schedule { margin: 0 0 1.25rem; color: rgba(255,237,181,.72); font-size: .75rem; }
.hc-weekend-days { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hc-day-card { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; align-items: center; padding: 8px; border: 1px solid rgba(243,207,99,.26); border-radius: 8px; color: rgba(255,239,190,.65); background: rgba(0,0,0,.24); }
.hc-day-card i { grid-row: 1 / span 2; color: #e8b52e; font-size: .85rem; }
.hc-day-card span { font-size: .55rem; font-weight: 800; letter-spacing: 1px; }
.hc-day-card strong { color: #fff1bc; font-family: var(--font-title); font-size: .72rem; letter-spacing: .5px; }
.hc-timer-panel { display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; background: linear-gradient(145deg, rgba(24,20,15,.95), rgba(5,5,6,.98)); }
.hc-timer-caption { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: 13px; color: rgba(244,211,113,.78); font-size: .63rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.hc-timer-caption i { color: #f6cc4e; font-size: .9rem; }
.hc-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hc-sep { display: none; }
.hc-block { min-width: 0; min-height: 102px; justify-content: center; padding: 13px 6px 11px; border: 1px solid rgba(226,176,39,.42); border-radius: 10px; background: linear-gradient(155deg, rgba(92,65,14,.42), rgba(9,8,8,.96) 56%); box-shadow: inset 0 1px 0 rgba(255,243,174,.16), inset 0 -18px 25px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.35) !important; }
.hc-block::before { height: 3px; background: linear-gradient(90deg, transparent, #ffe28a, transparent); }
.hc-block::after { inset: 0; border-radius: 10px; background: linear-gradient(125deg, rgba(255,255,255,.11), transparent 32%); animation: none; }
.hc-num { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -1px; animation: none; }
.hc-unit { margin-top: 7px; color: rgba(255,237,181,.62); font-size: .57rem; font-weight: 800; letter-spacing: 1.35px; }
.hero-countdown.is-live { background: radial-gradient(circle at 18% 50%, rgba(217,51,31,.32), transparent 32%), #0b0303; }
.hero-countdown.is-live .hc-event-panel { background: linear-gradient(145deg, rgba(93,20,12,.82), rgba(22,6,5,.95)); }
.hero-countdown.is-live .hc-layout { border-color: rgba(255,106,74,.55); }
.hero-countdown.is-live .hc-kicker, .hero-countdown.is-live .hc-timer-caption, .hero-countdown.is-live .hc-day-card i { color: #ffad91; }
.hero-countdown.is-live .hc-label { color: #ffd2c7; animation: hcLivePulse 1.2s ease-in-out infinite; }
.hero-countdown.is-live .hc-block { border-color: rgba(255,98,68,.52); background: linear-gradient(155deg, rgba(96,22,13,.58), rgba(12,4,4,.96) 56%); }
.hero-countdown.is-live .hc-num { background: none; color: #ff997d; -webkit-text-fill-color: #ff997d; }
@media (max-width: 800px) { .hero-countdown { padding: 13px 10px; } .hc-layout { grid-template-columns: 1fr; } .hc-event-panel { padding: 19px 20px; } .hc-event-panel::after { top: auto; bottom: 0; left: 10%; width: 80%; height: 1px; } .hc-label { max-width: none; } .hc-timer-panel { padding: 18px 12px; } }
@media (max-width: 480px) { .hc-event-panel { padding: 17px 15px; } .hc-label { font-size: 1.28rem; } .hc-weekend-days { gap: 5px; } .hc-blocks { gap: 5px; } .hc-block { min-height: 77px; padding: 8px 2px; border-radius: 6px; } .hc-num { font-size: 1.48rem; } .hc-unit { margin-top: 4px; font-size: .43rem; letter-spacing: .65px; } }
/* Podio competitivo de premios: lectura inmediata de rangos y bolsa total. */
.section-premios-showcase { padding: 54px 0 34px; }
.prizes-showcase-box { max-width: 1120px; padding: 34px 30px 30px; border-radius: 18px; background: linear-gradient(135deg, rgba(16,13,12,.98), rgba(35,24,12,.96) 50%, rgba(10,9,10,.98)); }
.prizes-showcase-box::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.05), transparent 24%, transparent 75%, rgba(201,151,30,.07)); }
.prizes-showcase-header { position: relative; z-index: 1; display: grid; justify-items: center; margin-bottom: 24px; }
.prizes-main-title { margin: 0; font-size: clamp(1.35rem, 2.6vw, 2.05rem); }
.prizes-game-subtitle { margin-top: 9px; font-size: .67rem; }
.prize-pool-summary { display: inline-flex; gap: 1px; margin-top: 17px; overflow: hidden; border: 1px solid rgba(236,193,62,.42); border-radius: 9px; background: rgba(0,0,0,.34); }
.prize-pool-summary span { display: inline-flex; align-items: center; gap: .42rem; padding: .52rem .85rem; color: #fff0ba; font-size: .7rem; font-weight: 800; letter-spacing: .45px; }
.prize-pool-summary span + span { border-left: 1px solid rgba(236,193,62,.28); }
.prize-pool-summary i { color: #f4c63f; font-size: .84rem; }
.prizes-podium-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 13px; margin: 0 0 16px; }
.prize-card { min-width: 0; max-width: none; min-height: 260px; padding: 42px 17px 17px; border-radius: 12px 12px 8px 8px; background: linear-gradient(160deg, rgba(33,31,30,.98), rgba(10,10,11,.98)); }
.prize-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: var(--rank-color, #bfcad6); opacity: .85; }
.prize-card-second { --rank-color: #b7c6d6; margin-bottom: 16px; }
.prize-card-third { --rank-color: #d58b51; margin-bottom: 16px; }
.prize-card-first { --rank-color: #f4c63f; min-height: 315px; margin-bottom: 0; padding-top: 48px; border-color: rgba(255,215,0,.85); }
.prize-rank-tag { position: absolute; top: 13px; left: 50%; z-index: 2; transform: translateX(-50%); min-width: 122px; padding: .33rem .55rem; border: 1px solid color-mix(in srgb, var(--rank-color, #bfcad6) 75%, white); border-radius: 99px; color: var(--rank-color, #bfcad6); font-size: .58rem; font-weight: 900; letter-spacing: 1.15px; white-space: nowrap; background: rgba(0,0,0,.36); }
.prize-card-first .prize-rank-tag { color: #201302; background: linear-gradient(135deg, #b57a10, #f6dd7b); border-color: #ffe799; box-shadow: 0 3px 14px rgba(247,198,48,.35); }
.prize-trophy-badge { margin-top: 2px; }
.prize-card-first .trophy-real-img { width: 108px; height: 108px; }
.prize-medal-badge { margin-top: 5px; }
.prize-medal-badge .medal-real-img { width: 88px; height: 88px; }
.prize-place-label { margin-top: 9px; }
.prize-rewards-row { width: 100%; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.1); }
.prize-mvp-card { position: relative; z-index: 1; border-radius: 11px; background: linear-gradient(100deg, rgba(80,45,11,.72), rgba(24,14,16,.96) 48%, rgba(10,10,11,.98)); }
@media (max-width: 760px) { .prizes-showcase-box { padding: 25px 14px 18px; } .prizes-podium-grid { grid-template-columns: 1fr; } .prize-card, .prize-card-first, .prize-card-second, .prize-card-third { order: initial; min-height: 0; margin-bottom: 0; } .prize-card-first { order: -1; } .prize-pool-summary { flex-direction: column; width: min(100%, 240px); } .prize-pool-summary span + span { border-top: 1px solid rgba(236,193,62,.28); border-left: 0; } }
/* MVP semanal: tarjetas de jugada con héroe destacado. */
.section-mvp-semanal { position: relative; overflow: hidden; }
.mvp-semanal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; gap: 18px; }
.mvp-semanal-card { position: relative; min-height: 248px; padding: 0; overflow: hidden; border: 1px solid rgba(219,176,46,.38); border-radius: 14px; text-align: left; background: linear-gradient(110deg, #1e1914, #0c0b0b); box-shadow: 0 14px 30px rgba(0,0,0,.38); }
.mvp-semanal-card::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(12,10,9,.98) 0%, rgba(18,14,10,.9) 42%, rgba(12,10,9,.2) 78%, rgba(12,10,9,.08)); }
.mvp-semanal-card::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #9c6713, #f2cc4f, transparent); }
.mvp-semanal-card:nth-child(2) { border-color: rgba(148,96,206,.48); }
.mvp-semanal-card:nth-child(2)::after { background: linear-gradient(90deg, #7847b8, #be92f3, transparent); }
.mvp-semanal-hero { position: absolute; inset: 0 0 0 auto; width: 65%; height: 100%; object-fit: cover; object-position: center; opacity: .88; filter: saturate(1.08) contrast(1.04); transform: scale(1.04); transition: transform .4s ease, filter .4s ease; }
.mvp-semanal-card:hover { transform: translateY(-6px); border-color: #f2cc4f; }
.mvp-semanal-card:hover .mvp-semanal-hero { transform: scale(1.11); filter: saturate(1.2) contrast(1.1); }
.mvp-semanal-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: 64%; min-height: 248px; padding: 25px 22px; }
.mvp-semanal-badge { align-self: flex-start; margin: 0; padding: 7px 11px; color: #ffdf79; font-size: .82rem; background: rgba(92,61,7,.35); border-color: rgba(240,196,62,.5); }
.mvp-semanal-kicker { margin: .65rem 0 1rem; color: rgba(255,239,187,.65); font-size: .63rem; font-weight: 800; letter-spacing: 1.45px; text-transform: uppercase; }
.mvp-semanal-links { gap: 7px; }
.mvp-semanal-link { justify-content: flex-start; padding: 9px 11px; border-color: rgba(255,255,255,.13); background: rgba(0,0,0,.3); font-size: .76rem; }
.mvp-semanal-link:hover { background: rgba(201,151,30,.2); }
@media (max-width: 680px) { .mvp-semanal-grid { grid-template-columns: 1fr; max-width: 460px; } .mvp-semanal-card, .mvp-semanal-content { min-height: 220px; } }
@media (max-width: 420px) { .mvp-semanal-content { width: 74%; padding: 19px 16px; } .mvp-semanal-hero { width: 70%; opacity: .72; } }

/* Eventos con portadas y participaciones moderadas. */
.eventos-grid { max-width: 1120px; gap: 24px; align-items: start; }
.evento-card { padding: 0 24px 24px; }
.evento-cover { width: calc(100% + 48px); max-width: none; margin: 0 -24px 22px; height: 220px; object-fit: cover; object-position: center 25%; border-bottom: 2px solid var(--evento-accent); }
/* Afiches del cliente: conservar el formato completo, incluidos textos y premios. */
.eventos-grid .evento-cover.evento-cover--poster { display: block; height: auto; aspect-ratio: 2 / 3; object-fit: contain; object-position: center; flex-shrink: 0; }
.evento-card--poster::before, .evento-card--poster::after { display: none; }
.evento-icon { display: none; }
.evento-info h3 { font-size: clamp(22px, 2.5vw, 30px); }
.evento-card:hover { transform: none; }
.evento-gallery-link { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; margin-top: 20px; border: 1px solid #b99642; border-radius: 6px; background: #242019; color: #ffe6a4; font: 700 13px var(--font-body); cursor: pointer; }
.evento-gallery-link:hover { background: #493922; }
.community-showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin: 32px auto; padding: 24px; border-top: 1px solid #8e7136; border-bottom: 1px solid #4b3a22; background: linear-gradient(90deg, rgba(9,8,10,.8), rgba(20,15,12,.42), rgba(9,8,10,.8)); }
.community-category { position: relative; display: grid; grid-template-columns: 1fr 44px; grid-template-rows: auto auto 1fr; gap: 0 12px; min-width: 0; padding: 18px; border: 1px solid rgba(196,157,58,.42); border-radius: 4px 14px 4px 4px; background: rgba(10,9,11,.76); overflow: hidden; }
.community-category::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,224,134,.1), transparent 32%); }
.community-category--dibujo { grid-column: span 3; min-height: 320px; }
.community-category--clip { grid-column: span 5; min-height: 320px; }
.community-category--cospobre { grid-column: span 4; min-height: 320px; }
.community-index { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; color: rgba(255,231,153,.32); font: 800 2rem/1 var(--font-title); }
.community-category > h3 { position: relative; grid-column: 1; margin: 0 0 5px; font: 700 clamp(17px, 2vw, 25px) var(--font-title); color: #fff0c3; line-height: 1.05; }
.community-caption { position: relative; grid-column: 1; display: block; color: #c9baa0; font-size: 11px; line-height: 1.5; margin: 0 0 15px; }
.community-grid { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; min-width: 0; }
.community-category--clip .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.community-category--cospobre .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.community-entry { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #645035; border-radius: 3px; background: #141215; min-width: 0; }
.community-entry img { display: block; width: 100%; height: 156px; object-fit: cover; background: #09090c; }
.community-media { display: block; position: relative; }
.community-media img { object-fit: cover; }
.community-play { position: absolute; bottom: 16px; left: 16px; padding: 10px 16px; border-radius: 5px; color: #fff; background: #151019eb; font-weight: 700; }
.community-entry-body { padding: 11px; }
.community-entry-body h4 { margin: 0 0 5px; font-size: 14px; color: #fff0d3; overflow-wrap: anywhere; }
.community-entry-body p { margin: 0; color: #bfb4c9; font-size: 11px; overflow-wrap: anywhere; }
.community-reactions { position: absolute; right: 7px; top: 7px; display: flex; flex-direction: column; gap: 4px; }
.community-reaction { display: grid; place-items: center; width: 30px; min-height: 30px; padding: 2px; border: 1px solid rgba(255,236,178,.58); border-radius: 2px; background: rgba(10,9,11,.88); color: #f7ebd5; cursor: pointer; font-size: 10px; line-height: 1; }
.community-reaction i { display: block; color: #f0c548; font-size: 16px; line-height: 10px; }
.community-reaction--dislike i { color: #bd8491; }
.community-reaction[aria-pressed="true"] { color: #171010; background: #f3cb6b; }
.community-category .evento-gallery-link { position: relative; grid-column: 1 / -1; justify-self: end; align-self: end; margin-top: 14px; min-height: 32px; padding: 6px 9px; font-size: 10px; }
.community-empty { grid-column: 1 / -1; padding: 25px; border: 1px dashed #756244; border-radius: 10px; background: #121014d9; color: #d6c9b1; line-height: 1.7; }
.community-showcase button:focus-visible, .evento-gallery-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 900px) { .community-category--dibujo { grid-column: span 4; } .community-category--clip { grid-column: span 8; } .community-category--cospobre { grid-column: 3 / span 8; } }
@media (max-width: 620px) { .community-showcase { grid-template-columns: 1fr; padding: 12px; } .community-category--dibujo, .community-category--clip, .community-category--cospobre { grid-column: auto; min-height: 0; } .community-grid, .community-category--clip .community-grid, .community-category--cospobre .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .community-entry img { height: 140px; } .evento-cover { height: 195px; } }

/* Inicio: mural simétrico de publicaciones, siguiendo la cuadrícula editorial. */
.community-showcase--home { display: block; max-width: 1120px; padding: 22px 0 0; border: 0; background: transparent; }
.community-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 218px 218px 256px auto; gap: 18px; }
.community-showcase--home .community-entry { min-width: 0; min-height: 0; border: 1px solid rgba(209,173,72,.65); border-radius: 2px; background: #111014; box-shadow: 0 14px 24px rgba(0,0,0,.34); }
.community-showcase--home .community-entry::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,4,7,.08) 28%, rgba(5,4,7,.88) 100%); }
.community-showcase--home .community-entry img { width: 100%; height: 100%; object-fit: cover; }
.community-showcase--home .community-media { height: 100%; }
.community-showcase--home .community-media img { height: 100%; }
.community-showcase--home .community-entry-body { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 18px; color: #fff; }
.community-showcase--home .community-entry-body h4 { font: 700 18px/1.1 var(--font-title); text-shadow: 0 2px 8px #000; }
.community-showcase--home .community-entry-body p { color: #e4d6bc; }
.community-type { position: absolute; z-index: 3; top: 13px; left: 13px; padding: 6px 9px; border: 1px solid rgba(249,207,90,.72); border-radius: 2px; background: rgba(12,10,12,.82); color: #f9d66d; font: 800 9px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; }
.community-showcase--home .community-reactions { z-index: 4; top: auto; right: 13px; bottom: 14px; flex-direction: row; }
.community-showcase--home .community-entry[data-position="one"] { grid-column: 1 / span 4; grid-row: 1; }
.community-showcase--home .community-entry[data-position="two"] { grid-column: 5 / span 4; grid-row: 1; }
.community-showcase--home .community-entry[data-position="three"] { grid-column: 9 / -1; grid-row: 1; }
.community-showcase--home .community-entry[data-position="four"] { grid-column: 3 / span 4; grid-row: 2; }
.community-showcase--home .community-entry[data-position="four"] { grid-column: 1 / span 4; grid-row: 2; }
.community-showcase--home .community-entry[data-position="five"] { grid-column: 5 / span 4; grid-row: 2; }
.community-showcase--home .community-entry[data-position="six"] { grid-column: 9 / -1; grid-row: 2; }
.community-showcase--home .community-entry[data-position="seven"] { grid-column: 1 / span 4; grid-row: 3; }
.community-showcase--home .community-entry[data-position="eight"] { grid-column: 5 / span 4; grid-row: 3; }
.community-showcase--home .community-entry[data-position="nine"] { grid-column: 9 / -1; grid-row: 3; }
.community-showcase--home .community-entry--waiting img { opacity: .33; filter: saturate(.65); }
.community-showcase--home .community-entry--waiting .community-entry-body { bottom: 12px; }
.community-gallery-cta { display: block; width: fit-content; margin: 20px auto 0; min-height: 42px; padding: 9px 18px; border: 1px solid #e9bf4d; border-radius: 3px; color: #1b1004; background: linear-gradient(135deg, #bc8317, #ffe08a, #b97b14); font: 800 12px var(--font-body); cursor: pointer; }
.community-gallery-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.community-invitations .sponsor-group { min-width: 170px; }
.community-invitations .sponsor-logos span { display: block; color: #bfae91; font-size: .72rem; line-height: 1.4; }
.community-mosaic-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border-top: 1px solid rgba(201,159,54,.45); color: #d6c9b1; font-size: 12px; }
.community-mosaic-status .evento-gallery-link { margin: 0; min-height: 30px; padding: 5px 11px; font-size: 10px; }
@media (max-width: 900px) { .community-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 230px) auto; } .community-showcase--home .community-entry[data-position] { grid-column: auto; grid-row: auto; } .community-showcase--home .community-entry[data-position="six"], .community-showcase--home .community-entry[data-position="seven"] { grid-column: span 1; } }
@media (max-width: 620px) { .community-showcase--home { padding-top: 8px; } .community-mosaic { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; } .community-showcase--home .community-entry[data-position], .community-showcase--home .community-entry[data-position="six"], .community-showcase--home .community-entry[data-position="seven"] { grid-column: auto; grid-row: auto; min-height: 230px; } .community-mosaic-status { align-items: flex-start; flex-direction: column; } }
.eventos-grid .evento-cover { height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: center; }
/* Portadas MVP: arte a sangre, jerarquía editorial y acción principal. */
.section-mvp-semanal { padding: 42px 0; }
.mvp-semanal-grid { max-width: 1120px; gap: 24px; }
.mvp-semanal-card { --mvp-accent: #f4cb62; min-height: 410px; border-radius: 4px 28px 4px 4px; border-color: #776035; background: #0c0d13; }
.mvp-semanal-card:nth-child(2) { --mvp-accent: #d1b0ff; border-color: #67527e; }
.mvp-semanal-hero { width: 100%; height: 100%; object-position: center 25%; opacity: 1; filter: none; transform: none; transition: none; }
.mvp-semanal-hero--emblem { object-fit: contain; padding: 45px 70px 125px; box-sizing: border-box; }
.mvp-semanal-card:hover .mvp-semanal-hero { transform: none; filter: none; }
.mvp-semanal-card:hover { transform: none; border-color: var(--mvp-accent); }
.mvp-semanal-card::before { background: linear-gradient(0deg, #08090f 0%, rgba(8,9,15,.95) 14%, rgba(8,9,15,.62) 44%, transparent 76%), linear-gradient(90deg, rgba(8,9,15,.5), transparent 65%); }
.mvp-semanal-card::after { height: 4px; background: var(--mvp-accent); }
.mvp-semanal-content { box-sizing: border-box; width: 100%; min-height: 410px; padding: 26px; justify-content: flex-end; }
.mvp-semanal-badge { position: absolute; top: 22px; left: 24px; margin: 0; background: #101018; border: 1px solid var(--mvp-accent); border-radius: 3px; color: var(--mvp-accent); padding: 9px 12px; font: 800 11px var(--font-body); letter-spacing: 1px; }
.mvp-edition { position: absolute; right: 24px; top: 12px; font: 900 76px/1 var(--font-body); color: rgba(255,255,255,.18); letter-spacing: -5px; pointer-events: none; }
.mvp-semanal-kicker { margin: 0 0 8px; color: var(--mvp-accent); font-size: 10px; letter-spacing: 2.5px; }
.mvp-feature-title { margin: 0 0 10px; color: #fff; font: 800 clamp(25px, 3vw, 38px)/1.04 var(--font-title); letter-spacing: -.4px; text-shadow: 0 2px 12px #000; }
.mvp-feature-note { margin: 0 0 20px; max-width: 300px; color: #d0ccd5; font-size: 12px; line-height: 1.6; }
.mvp-semanal-links { flex-direction: row; align-items: stretch; gap: 8px; }
.mvp-semanal-link { flex: 1; justify-content: center; min-height: 45px; padding: 10px 12px; border-radius: 4px; font-size: 12px; background: #161620; }
.mvp-semanal-link:last-child { background: var(--mvp-accent); border-color: var(--mvp-accent); color: #12101a; font-weight: 800; }
.mvp-semanal-link:last-child .bi-youtube { color: #12101a; }
.mvp-semanal-link:hover { background: #2b2634; color: #fff; }
.mvp-semanal-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .mvp-semanal-grid { grid-template-columns: 1fr; max-width: 540px; }
  .mvp-semanal-content, .mvp-semanal-card { min-height: 390px; }
}
@media (max-width: 420px) {
  .mvp-semanal-content { width: 100%; padding: 20px; }
  .mvp-semanal-hero { width: 100%; opacity: 1; }
  .mvp-feature-title { font-size: 28px; }
  .mvp-semanal-link { font-size: 11px; padding-inline: 7px; }
}

/* MVP semanal: capas de energía originales y microanimaciones compuestas en GPU. */
.section-mvp-semanal::before,
.section-mvp-semanal::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .4;
}
.section-mvp-semanal::before {
  width: 440px;
  height: 440px;
  top: 8%;
  left: -180px;
  background: radial-gradient(circle, rgba(237,182,52,.18), transparent 68%);
}
.section-mvp-semanal::after {
  width: 500px;
  height: 500px;
  right: -230px;
  bottom: 0;
  background: radial-gradient(circle, rgba(135,74,219,.18), transparent 70%);
}
.section-mvp-semanal .container { position: relative; z-index: 1; }
.mvp-semanal-card {
  isolation: isolate;
  contain: paint;
  box-shadow: 0 18px 45px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.1);
}
.mvp-semanal-card::before {
  z-index: 1;
  background: linear-gradient(90deg, rgba(5,7,13,.96) 0%, rgba(7,9,15,.9) 39%, rgba(7,9,15,.38) 68%, rgba(7,9,15,.08)), linear-gradient(0deg, rgba(4,5,10,.94) 0%, transparent 47%);
}
.mvp-semanal-card::after { z-index: 5; height: 5px; box-shadow: 0 -3px 14px color-mix(in srgb, var(--mvp-accent) 62%, transparent); }
.mvp-semanal-aura,
.mvp-semanal-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mvp-semanal-aura {
  inset: -4%;
  background: url("../img/optimized/mvp-gold-overlay-960-55383aaa2694.webp") center / cover no-repeat;
  opacity: .68;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: mvp-aura-drift 11s ease-in-out infinite alternate;
}
.mvp-semanal-card:nth-child(2) .mvp-semanal-aura {
  background-image: url("../img/optimized/mvp-violet-overlay-960-1c27abf031c4.webp");
  opacity: .72;
  animation-delay: -4.5s;
}
.mvp-semanal-sheen {
  inset: -30% auto -30% -42%;
  width: 34%;
  background: linear-gradient(105deg, transparent 18%, rgba(255,245,193,.02) 34%, rgba(255,245,193,.34) 50%, rgba(255,245,193,.03) 66%, transparent 82%);
  transform: skewX(-19deg) translate3d(-250%, 0, 0);
  will-change: transform;
  animation: mvp-sheen-pass 8.5s 2.4s ease-in-out infinite;
}
.mvp-semanal-content { z-index: 4; }
.mvp-semanal-badge { box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.26); }
.mvp-edition { color: color-mix(in srgb, var(--mvp-accent) 42%, transparent); text-shadow: 0 0 26px color-mix(in srgb, var(--mvp-accent) 20%, transparent); }
.mvp-semanal-card:hover .mvp-semanal-aura { opacity: .9; animation-duration: 7s; }
@keyframes mvp-aura-drift { from { transform: translate3d(-1.2%, -1%, 0) scale(1.01); } to { transform: translate3d(1.8%, 1.2%, 0) scale(1.06); } }
@keyframes mvp-sheen-pass { 0%, 22% { transform: skewX(-19deg) translate3d(-250%, 0, 0); } 55%, 100% { transform: skewX(-19deg) translate3d(640%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .mvp-semanal-aura, .mvp-semanal-sheen { animation: none; }
}

/* Smaller background downloads on phones; original artwork is unchanged. */
@media (max-width: 640px) { :root {
  --lmp-img-ededa18433e9: url("../img/optimized/hero-fondo-800-f26799f1ce9c.webp");
  --lmp-img-ee223bba6579: url("../img/optimized/hero-impacto-800-8d0f11acf5e5.webp");
  --lmp-img-14649e0179d3: url("../img/optimized/hero-efectos-800-93d18443e5c1.webp");
  --lmp-img-cf1b7658d461: url("../img/optimized/fondo-batalla-800-b1d1cd610101.webp");
} }