/* === INLINED TOKENS & BASE (ZERO-WATERFALL ARCHITECTURE) === */
/* ==========================================================================
   THEMOROTEX DESIGN SYSTEM — CANONICAL DESIGN TOKENS (variables.css)
   Versión: 2.1.0 | Autoridad: TheMorotex & Gentle Shell
   ========================================================================== */

:root {
  /* ===== 1. PALETA CROMÁTICA OFICIAL OLED & ACENTOS NEÓN ===== */
  /* Fondos y Superficies OLED */
  --bg-base: #0B0E14;
  --bg-surface: #111622;
  --bg-surface-elevated: #181F30;
  --bg-overlay: rgba(11, 14, 20, 0.85);
  --bg-card: rgba(17, 22, 34, 0.78);

  /* Acentos de Marca Oficiales */
  --brand-purple: #7C3AED;
  --brand-purple-light: #8B5CF6;
  --brand-purple-glow: rgba(124, 58, 237, 0.35);

  --brand-cyan: #00F0FF;
  --brand-cyan-light: #38BDF8;
  --brand-cyan-glow: rgba(0, 240, 255, 0.35);

  --brand-emerald: #10B981;
  --brand-emerald-neon: #00FF88;
  --brand-emerald-glow: rgba(0, 255, 136, 0.35);

  --brand-gold: #FFD700;
  --brand-gold-glow: rgba(255, 215, 0, 0.35);

  --brand-alert-red: #FF2A4B;
  --brand-alert-glow: rgba(255, 42, 75, 0.35);

  /* Tipografía y Textos */
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-contrast: #FFFFFF;

  /* Bordes y Líneas de Contorno */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(0, 240, 255, 0.40);
  --border-glow: rgba(124, 58, 237, 0.35);

  /* Retrocompatibilidad de variables previas */
  --fondo: var(--bg-base);
  --fondo-2: var(--bg-surface);
  --tarjeta: var(--bg-surface);
  --borde: var(--border-subtle);
  --texto: var(--text-primary);
  --texto-2: var(--text-secondary);
  --morado: var(--brand-purple);
  --morado-brillo: var(--brand-purple-light);
  --dorado: var(--brand-gold);
  --amarillo-neon: var(--brand-gold);
  --amarillo-brillo: #FFE84D;
  --amarillo-glow: var(--brand-gold-glow);
  --rojo: var(--brand-alert-red);
  --rojo-bg: rgba(255, 42, 75, 0.14);

  /* ===== 2. JERARQUÍA TIPOGRÁFICA CANÓNICA ===== */
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --fuente-titulo: 'Rajdhani', sans-serif;
  --fuente-gaming: 'Rajdhani', sans-serif;
  --fuente-base: var(--fuente);
  --fuente-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ===== 3. ESCALA DE BORDES REDONDEADOS (border-radius) ===== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ===== 4. ESCALA DE ESPACIADO DE 8 PUNTOS (8pt grid) ===== */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ===== 5. SOMBRAS Y ELEVACIÓN GLASSMORPHISM ===== */
  --shadow-bento: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-purple: 0 0 20px rgba(124, 58, 237, 0.45);
  --shadow-glow-cyan: 0 0 16px rgba(0, 240, 255, 0.35);
  --shadow-glow-gold: 0 0 16px rgba(255, 215, 0, 0.35);
  --shadow-glow-emerald: 0 0 16px rgba(0, 255, 136, 0.35);

  /* ===== 6. TRANSICIONES GAMER LIGERAS ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ==========================================================================
   THEMOROTEX DESIGN SYSTEM — BASE & LAYOUT HIERARCHY (base.css)
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip !important;
  max-width: 100vw !important;
  color-scheme: dark;
}

html {
  font-family: var(--fuente);
  scroll-behavior: smooth;
  overflow-x: clip !important;
  max-width: 100vw !important;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.site-body, body {
  font-family: var(--fuente);
  background-color: var(--bg-base) !important;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: clip !important;
  max-width: 100vw !important;
  display: flex !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p, ul, ol, li, input, textarea, select { font-family: var(--fuente); }

/* Zero-overflow en envoltura maestra */
.site-main-wrapper {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip !important;
  position: relative;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

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

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

/* Titulares con tipografía Rajdhani */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Scrollbars estilizadas Gamer Dark */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-purple);
}


.home-section-head p {
  font-family: var(--fuente) !important;
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 6px;
  font-weight: 400;
  line-height: 1.5;
}


/* ==========================================================================
   THEMOROTEX DESIGN SYSTEM — CANONICAL COMPONENTS (components.css)
   ========================================================================== */

/* ===== 1. BOTONES CANÓNICOS GAMER ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--fuente-titulo);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-height: 44px; /* Ergonomía táctil mínima */
  box-sizing: border-box;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primario {
  background: linear-gradient(135deg, var(--brand-purple) 0%, #6D28D9 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

.btn-primario:hover {
  background: linear-gradient(135deg, var(--brand-purple-light) 0%, var(--brand-purple) 100%);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.6);
  transform: translateY(-2px);
}

.btn-secundario {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: none;
}

.btn-secundario:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-peligro {
  background: rgba(255, 42, 75, 0.15);
  color: var(--brand-alert-red);
  border: 1px solid var(--brand-alert-red);
}

.btn-peligro:hover {
  background: rgba(255, 42, 75, 0.25);
  box-shadow: 0 0 14px var(--brand-alert-glow);
}

/* ===== 2. TARJETAS BENTO CON GLASSMORPHISM ===== */
.bento-card {
  background: var(--bg-card);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-bento);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  overflow: hidden;
  position: relative;
}

.bento-card:hover {
  border-color: var(--border-glow);
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.2);
  transform: translateY(-3px);
}

/* ===== 3. PÍLDORAS FLOTANTES & BADGES (PILLS) ===== */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--fuente-titulo);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}

.badge-stock-in {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--brand-emerald);
}

.badge-clean {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--brand-cyan);
}

.badge-duped {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--brand-gold);
}

.badge-premio-ranking {
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid var(--brand-purple);
  color: #C084FC;
}

.badge-agotado {
  background: rgba(255, 42, 75, 0.12);
  border: 1px solid rgba(255, 42, 75, 0.35);
  color: var(--brand-alert-red);
}

/* ===== 4. MODALES GAMER CON BLUR Y ANIMACIÓN ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  z-index: 20000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.modal-overlay.activo,
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-window {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.activo .modal-window,
.modal-overlay.open .modal-window {
  transform: scale(1);
}


/* ==========================================================================
   THEMOROTEX DESIGN SYSTEM — CANONICAL RESPONSIVE SYSTEM (responsive.css)
   Los 4 Breakpoints Oficiales: 480px | 768px | 1024px | 1025px+
   ========================================================================== */

/* ==========================================================================
   1. MÓVIL COMPACTO (Smartphones pequeños / medianos: max-width 480px)
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
  }

  .site-main-wrapper {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Asegurar touch target de 44px en móviles */
  .btn,
  .cat-chip-btn,
  .icon-btn {
    min-height: 44px;
  }

  /* Reordenar grillas a una sola columna */
  .grid-mobile-single,
  .perfil-drops-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   2. TABLET Y MÓVIL (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* En tablets y móviles la sidebar opera como dock inferior */
  .gaming-sidebar {
    display: flex !important;
  }

  .site-main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   3. LAPTOP / PANTALLAS MEDIANAS (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .bento-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   4. ESCRITORIO AMPLIO (min-width: 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
  .gaming-sidebar {
    display: flex !important;
  }
}

/* === END INLINED BASE === */

:root {
  --fondo: #0B0E14;
  --fondo-2: #111622;
  --tarjeta: #111622;
  --borde: rgba(255, 255, 255, 0.08);
  --texto: #F8FAFC;
  --texto-2: #94A3B8;
  --morado: #7C3AED;
  --morado-brillo: #8B5CF6;
  --dorado: #FFD700;
  --rojo: #FF2A4B;
  --rojo-bg: rgba(255, 42, 75, 0.14);
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --fuente-titulo: 'Rajdhani', sans-serif;
  --fuente-base: var(--fuente);
  --fuente-gaming: 'Rajdhani', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

a { text-decoration: none; color: inherit; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  background:
    radial-gradient(1100px 700px at 85% -12%, rgba(124, 58, 237, 0.16) 0%, transparent 45%),
    radial-gradient(900px 600px at -10% 25%, rgba(212, 175, 105, 0.05) 0%, transparent 45%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 55%, var(--fondo) 100%);
  color: var(--texto);
  min-height: 100vh;
}

/* ===== HEADER ===== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 14px 28px;
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(11, 11, 15, 0.95), rgba(11, 11, 15, 0.65));
  backdrop-filter: none;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-brand { display: flex; align-items: center; gap: 14px; background: none; border: none; padding: 0; cursor: pointer; color: inherit; text-align: left; }
.header-brand:hover .header-title { color: var(--morado-brillo); }
.main-nav { margin-left: auto; }
.discord-btn { margin-left: 4px; }
.header-brand .logo-badge {
  height: 52px;
  width: 52px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--morado), var(--morado-brillo));
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.header-brand .logo-badge img { height: 100%; width: 100%; object-fit: cover; border-radius: 10px; }
.header-title {
  font-family: var(--fuente-titulo);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--texto);
  line-height: 1;
}
.header-title span { color: var(--dorado); }
.header-sub {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-top: 4px;
}

/* Redes en el header (ordenadas y compactas) */
.header-social {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.header-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  transition: all 0.2s;
  white-space: nowrap;
}
.header-social-link:hover {
  border-color: var(--morado-brillo);
  color: var(--morado-brillo);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.28);
  transform: translateY(-1px);
}
/* Barra de búsqueda en navbar SSR (responsive móvil + PC) */
.nav-buscar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}
.nav-buscar input[type="search"],
.nav-buscar input[type="text"] {
  width: 170px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(10, 8, 22, 0.55);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 0.82rem;
}
.nav-buscar input::placeholder { color: rgba(240, 240, 250, 0.45); }
.nav-buscar input:focus {
  outline: none;
  border-color: var(--morado-brillo);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.nav-buscar-btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.hs-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.hs-kick { background: #53fc18; color: #0b0b0f; }
.hs-yt { background: #ff0033; color: #fff; }
.hs-dc { background: #5865F2; color: #fff; }
.hs-x { background: #f5f5f7; color: #0b0b0f; }
.hs-tt { background: #00f2ea; color: #0b0b0f; }

/* Botón Discord legacy */
.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
  font-family: var(--fuente);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.discord-icon { height: 20px; width: 20px; object-fit: contain; }
.discord-btn:hover {
  border-color: var(--morado-brillo);
  color: var(--morado-brillo);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

/* ===== HERO / INICIO ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 40px 30px;
  text-align: center;
  isolation: isolate;
}
/* Aurora 2026 — gradiente respirando (CSS puro, 0 JS) */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(-45deg,
    rgba(124,58,237,0.22) 0%,
    rgba(0,240,255,0.08) 25%,
    rgba(11,14,20,1) 50%,
    rgba(255,42,75,0.07) 75%,
    rgba(124,58,237,0.14) 100%);
  background-size: 400% 400%;
  /* aurora animation disabled */
  pointer-events: none;
}
/* Grain noise cinématique (desactivado) */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: none;
  opacity: 0;
  display: none !important;
}
@keyframes mtx-aurora {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero-glob {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, transparent 60%);
  filter: none !important;
  pointer-events: none;
}
.hero-avatar {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 22px;
  border-radius: 32px;
  padding: 6px;
  background: linear-gradient(160deg, var(--dorado), var(--morado-brillo));
  box-shadow: 0 0 34px rgba(139, 92, 246, 0.35);
}
.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 27px;
  display: block;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--morado-brillo);
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 16px;
}
.hero-title {
  font-family: var(--fuente-titulo);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.12;
  max-width: 720px;
  margin: 0 auto;
}
.hero-title span { color: var(--dorado); }
.hero-sub {
  margin: 14px auto 0;
  max-width: 680px;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--texto-2);
  line-height: 1.6;
}
.hero-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.social-btn:hover {
  border-color: var(--morado-brillo);
  color: var(--morado-brillo);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}
.s-ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
}
.s-kick { background: #53fc18; color: #0b0b0f; }
.s-yt { background: #ff0033; color: #fff; }
.s-dc { background: #5865F2; color: #fff; }
.s-tt { background: #00f2ea; color: #0b0b0f; }

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 34px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--morado), var(--morado-brillo));
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.45);
  transition: all 0.2s;
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(139, 92, 246, 0.55);
}
.cta-arrow { font-size: 1.15rem; line-height: 1; }
.hero-hint {
  margin-top: 14px;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* ===== TABS (categorías) ===== */
.tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 30px 40px 12px;
  flex-wrap: wrap;
}
.tab {
  padding: 9px 20px;
  background: var(--fondo-2);
  color: var(--texto-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-family: var(--fuente);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.tab img {
  height: 20px;
  width: 20px;
  object-fit: cover;
  border-radius: 50%;
}
.tab:hover { color: var(--texto); border-color: var(--morado-brillo); background: var(--tarjeta); }
.tab.active {
  background: linear-gradient(160deg, var(--morado), var(--morado-brillo));
  color: #fff;
  border-color: var(--morado-brillo);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);
}

/* ===== CATÁLOGO ===== */
.catalogo { padding: 12px 40px 48px; max-width: 1320px; margin: 0 auto; }
.categoria-seccion {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px 8px;
  scroll-margin-top: 90px;
}
.categoria-seccion + .categoria-seccion { margin-top: 10px; }
.tier-grupo { margin-bottom: 34px; }
.tier-subtitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 14px;
  margin-bottom: 18px;
  background: var(--tarjeta);
}
.tier-count {
  display: inline-block;
  margin-left: auto;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  font-family: var(--fuente-base);
}
.tier-subtitulo.top { color: var(--dorado); background: linear-gradient(90deg, rgba(212,175,105,0.18), rgba(212,175,105,0.05)); border-left: 4px solid var(--dorado); }
.tier-subtitulo.medio { color: var(--morado-brillo); background: linear-gradient(90deg, rgba(124,58,237,0.2), rgba(124,58,237,0.05)); border-left: 4px solid var(--morado); }
.tier-subtitulo.normal { color: var(--texto-2); background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border-left: 4px solid var(--borde); }
.cat-vacio { color: var(--texto-2); padding: 8px 0 20px; }
.cat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 22px;
}
.cat-header .cat-barra {
  height: 26px;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--dorado), var(--morado));
}
.cat-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--texto);
}
.cat-contador {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-2);
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
}
#catTitulo {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--texto);
}

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

/* Tarjeta de producto */
.producto-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 380px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
  background: var(--tarjeta);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s, border-color 0.2s, box-shadow 0.22s;
}
.producto-card:hover {
  transform: translateY(-6px);
  border-color: var(--morado-brillo);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 16px rgba(139, 92, 246, 0.25);
}

/* Tiers por color */
.producto-card.tier-top {
  border-color: rgba(212, 175, 105, 0.55);
  background: linear-gradient(165deg, var(--tarjeta), rgba(212, 175, 105, 0.06));
}
.producto-card.tier-top:hover {
  border-color: var(--dorado);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(212, 175, 105, 0.3);
}

/* 💎 VEHÍCULO EN CUSTODIA · PREMIO RANKING (Resplandor Azul Diamante Neón #00F0FF) */
.producto-card.premio-custodia-diamante,
.producto-card.tier-premio-diamante {
  border: 2px solid #00F0FF !important;
  background: linear-gradient(165deg, rgba(8, 14, 26, 0.98), rgba(0, 240, 255, 0.14)) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.55), inset 0 0 16px rgba(0, 240, 255, 0.16) !important;
  animation: none !important; /* 0% GPU idle */
  position: relative !important;
  z-index: 2 !important;
}

.producto-card.premio-custodia-diamante:hover,
.producto-card.tier-premio-diamante:hover {
  border-color: #70FFFF !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 38px rgba(0, 240, 255, 0.85), inset 0 0 24px rgba(0, 240, 255, 0.3) !important;
  transform: translateY(-6px) scale(1.02) !important;
}

@keyframes pulse-diamond-premio {
  0%, 100% {
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.4), inset 0 0 12px rgba(0, 240, 255, 0.12);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.75), inset 0 0 22px rgba(0, 240, 255, 0.28);
  }
}

/* Ribbon y badges en tarjeta de premio */
.producto-card.premio-custodia-diamante .custodia-glow-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(90deg, #00F0FF, #00A8FF);
  color: #000;
  font-weight: 900;
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.85);
  z-index: 5;
  pointer-events: none;
}

.tier-sello.premio-diamante {
  color: #000 !important;
  background: linear-gradient(90deg, #00F0FF, #70FFFF) !important;
  border: 1px solid #00F0FF !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.65) !important;
}

.stock-badge.premio-diamante {
  background: rgba(0, 240, 255, 0.18) !important;
  border: 1.5px solid #00F0FF !important;
  color: #00F0FF !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35) !important;
}

.producto-stock.premio-stock {
  color: #00F0FF !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
}
.producto-stock.premio-stock .dot-diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #00F0FF;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 8px #00F0FF;
  animation: none !important; /* 0% GPU idle */
}

.producto-card.premio-custodia-diamante .btn-comprar,
.btn-premio-diamante {
  background: linear-gradient(90deg, #00F0FF 0%, #0099FF 100%) !important;
  color: #000 !important;
  font-weight: 900 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.45) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.producto-card.premio-custodia-diamante .btn-comprar:hover,
.btn-premio-diamante:hover {
  background: linear-gradient(90deg, #70FFFF 0%, #00C8FF 100%) !important;
  box-shadow: 0 6px 26px rgba(0, 240, 255, 0.85) !important;
  transform: translateY(-1px);
}

.producto-card.premio-custodia-diamante .btn-comprar.btn-premio-comprar,
.btn-premio-comprar {
  background: linear-gradient(90deg, #10B981 0%, #00F0FF 100%) !important;
  color: #000 !important;
  font-weight: 900 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.producto-card.premio-custodia-diamante .btn-comprar.btn-premio-comprar:hover,
.btn-premio-comprar:hover {
  background: linear-gradient(90deg, #34D399 0%, #70FFFF 100%) !important;
  box-shadow: 0 6px 26px rgba(16, 185, 129, 0.85) !important;
  transform: translateY(-1px);
}

/* Evitar que sin-stock opaque o pinte de rojo el coche en custodia */
.producto-card.premio-custodia-diamante.sin-stock {
  border-color: #00F0FF !important;
  filter: none !important;
  opacity: 1 !important;
}
.producto-card.premio-custodia-diamante .producto-img::before,
.producto-card.premio-custodia-diamante .producto-img::after,
.producto-card.premio-custodia-diamante.sin-stock .producto-img::before,
.producto-card.premio-custodia-diamante.sin-stock .producto-img::after {
  display: none !important;
}

.producto-card.tier-medio {
  border-color: rgba(124, 58, 237, 0.5);
  background: linear-gradient(165deg, var(--tarjeta), rgba(124, 58, 237, 0.07));
}
.producto-card.tier-medio:hover {
  border-color: var(--morado-brillo);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(124, 58, 237, 0.4);
}
.producto-card.tier-normal { border-color: var(--borde); }

/* Sello de tier y badges de producto - Rediseño Gamer Dark */
.producto-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 26px;
  width: 100%;
  box-sizing: border-box;
}

/* TIER SELLO — más contrastado y legible */
.tier-sello {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1.2;
  background: rgba(11,14,20,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94A3B8;
  transition: all 0.2s ease;
}
.tier-sello.tier-olimpo, .tier-sello.olimpo, .tier-sello.top {
  color: #FFD700 !important;
  background: rgba(255,215,0,0.08) !important;
  border-color: rgba(255,215,0,0.5) !important;
  box-shadow: 0 0 8px rgba(255,215,0,0.2) !important;
}
.tier-sello.tier-elite, .tier-sello.elite {
  color: #C084FC !important;
  background: rgba(168,85,247,0.08) !important;
  border-color: rgba(168,85,247,0.45) !important;
  box-shadow: 0 0 8px rgba(168,85,247,0.18) !important;
}
.tier-sello.tier-accesible, .tier-sello.accesible, .tier-sello.medio {
  color: #38BDF8 !important;
  background: rgba(56,189,248,0.08) !important;
  border-color: rgba(56,189,248,0.4) !important;
}
.tier-sello.tier-obtenible, .tier-sello.obtenible, .tier-sello.normal {
  color: #10B981 !important;
  background: rgba(16,185,129,0.08) !important;
  border-color: rgba(16,185,129,0.4) !important;
}
.tier-sello.tier-premio-diamante, .tier-sello.premio-diamante {
  color: #00F0FF !important;
  background: rgba(0,240,255,0.08) !important;
  border-color: rgba(0,240,255,0.5) !important;
  box-shadow: 0 0 10px rgba(0,240,255,0.25) !important;
}

/* STOCK BADGE — Psicología de urgencia y escasez */
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1.2;
  white-space: nowrap;
}
.stock-badge.hay {
  background: rgba(16,185,129,0.1);
  color: #10B981;
  border: 1px solid rgba(16,185,129,0.35);
}
.stock-badge.nohay {
  background: rgba(100,116,139,0.08);
  color: #64748B;
  border: 1px solid rgba(100,116,139,0.2);
}
/* URGENCIA: Última unidad — rojo pulsante */
.stock-badge.badge-urgente, .stock-badge.stock-bajo {
  background: rgba(255,42,75,0.12);
  color: #FF2A4B;
  border: 1px solid rgba(255,42,75,0.4);
  animation: none !important; /* 0% GPU idle */
}
@keyframes mtx-urgencia-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,42,75,0.35); }
  50% { box-shadow: 0 0 0 5px rgba(255,42,75,0); }
}

/* ==================================================================
   PRODUCTO CARD — DISEÑO PRO 2026 CON PSICOLOGÍA DE CONVERSIÓN
   Principios: Urgencia · Prueba Social · Claridad · Confianza
   ================================================================== */

.producto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(14,18,28,0.92);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.32s cubic-bezier(0.23,1,0.32,1),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
  backdrop-filter: none !important;
  /* will-change removed */
}
.producto-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(124,58,237,0.5);
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.2),
    0 24px 64px rgba(0,0,0,0.5),
    0 0 60px rgba(124,58,237,0.12);
}
/* Tier top: borde dorado */
.producto-card.tier-top:hover {
  border-color: rgba(255,215,0,0.5);
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.2),
    0 24px 64px rgba(0,0,0,0.5),
    0 0 60px rgba(255,215,0,0.1);
}
/* Tier medio: borde cyan */
.producto-card.tier-medio:hover {
  border-color: rgba(0,240,255,0.45);
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.15),
    0 24px 64px rgba(0,0,0,0.5),
    0 0 60px rgba(0,240,255,0.09);
}

/* ── IMAGEN ── */
.producto-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.09) 0%, rgba(124, 58, 237, 0.06) 45%, #0B0E14 85%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.producto-img img {
  width: 100%; height: 100%;
  object-fit: contain !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 10px rgba(0, 240, 255, 0.16));
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1), filter 0.45s ease;
}
.producto-card:hover .producto-img img {
  transform: scale(1.1) translateY(-4px);
  filter: drop-shadow(0 10px 26px rgba(124,58,237,0.65)) drop-shadow(0 0 16px rgba(0, 240, 255, 0.4));
}
.producto-card.tier-top:hover .producto-img img {
  filter: drop-shadow(0 10px 26px rgba(255,215,0,0.55)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.35));
}

/* Shine sweep sobre la imagen al hover */
.producto-img::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-20deg);
  transition: none;
  z-index: 2;
  pointer-events: none;
}
.producto-card:hover .producto-img::before {
  left: 180%;
  transition: left 0.6s ease;
}

/* ── BODY ── */
.producto-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* ── NOMBRE ── */
.producto-nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1px;
  line-height: 1.25;
  min-height: 2.5em;
  color: #F1F5F9;
  transition: color 0.2s ease;
}
.producto-card:hover .producto-nombre { color: #FFFFFF; }

/* ── VALOR DE MERCADO (ancla de precio) ── */
.producto-valor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dorado);
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 999px;
  padding: 2px 10px;
  width: fit-content;
}
.producto-valor strong { font-weight: 800; color: var(--dorado); }

/* ── PRECIOS ── */
.producto-precios { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detalle-precios  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* Precio tier: color jerárquico = valor percibido */
.tier-top .precio-normal, .tier-top .precio-oferta { color: #FFD700; text-shadow: 0 0 12px rgba(255,215,0,0.3); }
.tier-medio .precio-normal, .tier-medio .precio-oferta { color: #00F0FF; }

.precio-normal {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #F8FAFC;
  letter-spacing: 0.3px;
  line-height: 1;
}
.precio-oferta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #00FF88;
  text-shadow: 0 0 10px rgba(0,255,136,0.3);
  line-height: 1;
}
.precio-tachado {
  font-size: 0.92rem;
  font-weight: 600;
  color: #475569;
  text-decoration: line-through;
  line-height: 1;
}

/* ── STOCK ── */
.producto-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-2);
}
.producto-stock .dot {
  height: 7px; width: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16,185,129,0.6);
  animation: none !important; /* 0% GPU idle */
}
.producto-stock.agotado .dot {
  background: var(--rojo);
  box-shadow: 0 0 6px rgba(255,42,75,0.5);
  animation: none;
}
@keyframes mtx-dot-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* ── BOTÓN COMPRAR — PSICOLOGÍA: CTA dominante y claro ── */
.btn-comprar {
  margin-top: auto;
  padding: 13px 16px;
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  border: 1px solid rgba(139,92,246,0.5);
  border-radius: 12px;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.2s ease,
    background 0.2s ease;
  text-align: center;
  display: block;
  width: 100%;
  text-decoration: none;
}
.btn-comprar::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn-comprar:hover:not(:disabled) {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  box-shadow: 0 8px 30px rgba(124,58,237,0.55), 0 2px 8px rgba(0,0,0,0.3);
  transform: translateY(-2px) scale(1.02);
}
.btn-comprar:hover::before {
  left: 160%;
  transition: left 0.5s ease;
}
.btn-comprar:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.btn-comprar:disabled { cursor: not-allowed; opacity: 0.45; }

/* Botón agotado — con opción de alerta */
.btn-comprar.btn-restock-alert {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #64748B;
  font-size: 0.88rem;
}
.btn-comprar.btn-restock-alert:hover {
  background: rgba(255,255,255,0.08);
  color: #94A3B8;
  box-shadow: none;
  transform: none;
}

/* ── ÍTEM SIN STOCK — OVERLAY PREMIUM — */

/* Imagen desaturada y oscurecida elegantemente */
.producto-card.sin-stock .producto-img img {
  filter: grayscale(0.75) brightness(0.55) saturate(0.3);
  transform: scale(0.96);
  transition: filter 0.4s ease, transform 0.4s ease;
}

/* Overlay degradado oscuro, sin cuadrado rojo */
.producto-card.sin-stock .producto-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.5) 55%,
    rgba(0,0,0,0.78) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Etiqueta “AGOTADO” centrada eliminada para despejar el render del vehículo */
.producto-card.sin-stock .producto-img::before {
  display: none !important;
  content: none !important;
}

/* Card agotada: borde sutil gris — sin rojo llamativo */
.producto-card.sin-stock {
  border-color: rgba(255,255,255,0.06);
  opacity: 0.82;
}
.producto-card.sin-stock:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  opacity: 1;
}
.sin-stock-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(224, 102, 102, 0.16);
  color: var(--rojo);
  border: 1px solid rgba(224, 102, 102, 0.6);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  z-index: 2;
}

/* Badge duplicado */
.dupe-badge {
  position: absolute;
  top: 14px;
  background: rgba(124, 58, 237, 0.16);
  color: var(--morado-brillo);
  border: 1px solid rgba(139, 92, 246, 0.65);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  z-index: 2;
}
.tier-sello.top + .dupe-badge, .producto-card.tier-top .dupe-badge { top: 52px; }
.tier-sello.medio + .dupe-badge, .producto-card.tier-medio .dupe-badge { top: 52px; }
.tier-sello.normal + .dupe-badge, .producto-card.tier-normal .dupe-badge { top: 52px; }
.detalle-dupe {
  position: static;
  display: inline-block;
  margin: 4px 0 10px;
}

/* ===== DETALLE DE ÍTEM (plantilla por tier) ===== */
.detalle-img {
  border-radius: 12px;
  overflow: hidden;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  margin: 6px 0 14px;
}
.detalle-img img { width: 100%; height: 190px; object-fit: cover; display: block; }
.detalle-nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
  color: var(--texto);
}
.detalle-tier {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.detalle-tier.olimpo,
.detalle-tier.top { color: #FFD700; background: rgba(255, 215, 0, 0.12); border: 1px solid rgba(255, 215, 0, 0.55); box-shadow: 0 0 12px rgba(255, 215, 0, 0.25); }
.detalle-tier.elite { color: #C084FC; background: rgba(192, 132, 252, 0.12); border: 1px solid rgba(192, 132, 252, 0.55); box-shadow: 0 0 12px rgba(192, 132, 252, 0.2); }
.detalle-tier.accesible,
.detalle-tier.medio { color: #38BDF8; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.45); box-shadow: 0 0 10px rgba(56, 189, 248, 0.18); }
.detalle-tier.obtenible,
.detalle-tier.normal { color: #10B981; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.45); box-shadow: 0 0 10px rgba(16, 185, 129, 0.18); }
.detalle-tier.premio-diamante { color: #00F0FF; background: rgba(0, 240, 255, 0.15); border: 1px solid #00F0FF; box-shadow: 0 0 14px rgba(0, 240, 255, 0.4); }
.detalle-precios { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.detalle-precios .precio-normal, .detalle-precios .precio-oferta { font-size: 1.5rem; }
.detalle-stock { margin: 12px 0 2px; }
.detalle-top { border-top: 3px solid rgba(212, 175, 105, 0.6); padding-top: 14px; }
.detalle-medio { border-top: 3px solid rgba(139, 92, 246, 0.6); padding-top: 14px; }
.detalle-normal { border-top: 3px solid var(--borde); padding-top: 14px; }

/* ===== MODAL ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-backdrop.abierto { display: flex; }
.modal {
  box-sizing: border-box !important;
  background: linear-gradient(170deg, var(--fondo-2), var(--fondo));
  border: 1px solid var(--borde);
  border-radius: 18px;
  max-width: 520px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
  max-height: 90vh;
  overflow-y: auto;
}
.modal h3 {
  font-family: var(--fuente-titulo);
  color: var(--texto);
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
  font-size: 1.3rem;
}
.modal p { margin-bottom: 12px; color: var(--texto-2); line-height: 1.55; }
.modal label { display: block; margin: 10px 0 6px; color: var(--texto); font-weight: 600; }
.modal input {
  width: 100%;
  padding: 12px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal input:focus { outline: none; border-color: var(--morado-brillo); box-shadow: 0 0 10px rgba(139, 92, 246, 0.25); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn {
  padding: 11px 20px;
  font-family: var(--fuente);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--texto);
  cursor: pointer;
  transition: all 0.2s;
}
.btn:hover { border-color: var(--morado-brillo); background: var(--fondo-2); }
.btn-primario { background: linear-gradient(160deg, var(--morado), var(--morado-brillo)); border-color: var(--morado-brillo); color: #fff; }
.btn-primario:hover { box-shadow: 0 0 12px rgba(139, 92, 246, 0.4); border-color: var(--morado-brillo); }
.btn-dorado { border-color: rgba(212, 175, 105, 0.5); color: var(--dorado); }
.btn-dorado:hover { background: rgba(212, 175, 105, 0.1); border-color: var(--dorado); }

/* ===== CÓDIGO GENERADO ===== */
.codigo-generado { text-align: center; margin: 18px 0; }
.codigo-box {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--dorado);
  border: 2px dashed rgba(212, 175, 105, 0.7);
  border-radius: 14px;
  padding: 16px 30px;
  background: var(--fondo);
  margin: 8px 0 2px;
  box-shadow: 0 0 18px rgba(212, 175, 105, 0.12);
}
.codigo-hint { font-size: 0.85rem; color: var(--texto-2); margin-top: 8px; }
.codigo-label { color: var(--texto); font-weight: 600; }

/* ===== ESTADOS VACÍOS Y AVISOS ===== */
#app-mensaje { padding: 56px 40px; color: var(--texto-2); text-align: center; font-size: 1.1rem; }
.aviso { margin-top: 12px; font-weight: 600; }
.aviso.ok { color: var(--dorado); }
.aviso.err { color: var(--rojo); }
.aviso.warn { color: var(--dorado); background: rgba(212, 175, 105, 0.08); border: 1px solid rgba(212, 175, 105, 0.35); padding: 10px 12px; border-radius: 12px; }

/* ===== SELECCIÓN DE VARIANTE (CLEAN / DUPPED) ===== */
.variante-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 4px;
}
.variante-chip {
  cursor: pointer;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.variante-chip:hover { border-color: var(--morado); }
.variante-chip:has(input:checked) {
  border-color: var(--morado-brillo);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.variante-chip input { display: none; }
.variante-chip strong { color: var(--texto); font-size: 1rem; }
.variante-chip small { color: var(--texto-2); font-weight: 500; }
.variante-chip.dupe-solo:has(input:checked) {
  border-color: var(--morado-brillo);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.variante-info {
  margin: 14px 0 4px;
  color: var(--texto-2);
  font-size: 0.95rem;
  background: rgba(212, 175, 105, 0.06);
  border: 1px solid rgba(212, 175, 105, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
}

/* ===== NAVEGACIÓN PRINCIPAL (Inicio / Tienda) ===== */
.main-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
}
.main-nav-btn {
  padding: 8px 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-2);
  font-family: var(--fuente);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.main-nav-btn:hover { color: var(--texto); }
.main-nav-btn.active {
  background: linear-gradient(120deg, var(--morado), var(--morado-brillo));
  color: #fff;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
}
.social-ico { height: 20px; width: 20px; object-fit: contain; }
.social-ico-mini {
  height: 16px;
  width: 16px;
  min-width: 16px;
  object-fit: contain;
  vertical-align: -2.5px;
  margin-right: 6px;
  display: inline-block;
  transition: transform 0.2s ease;
}
.pie-col a:hover .social-ico-mini {
  transform: scale(1.15);
}

/* ===== VISTA: TIENDA ===== */
.vista-tienda {
  padding: 30px 40px 0;
}
.tabs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 6px;
}
.tabs-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.4px;
}

/* ===== VISTA: INICIO ===== */
.inicio {
  position: relative;
  overflow: hidden;
  padding: 48px 40px 40px;
}
.inicio-glob {
  position: absolute;
  border-radius: 50%;
  filter: none !important;
  pointer-events: none;
}
.inicio-glob-1 { top: -180px; left: -120px; width: 480px; height: 480px; background: rgba(139, 92, 246, 0.2); }
.inicio-glob-2 { bottom: -200px; right: -140px; width: 520px; height: 520px; background: rgba(212, 175, 105, 0.12); }

.inicio-carta {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 42px;
  max-width: 980px;
  margin: 0 auto;
  align-items: center;
}
.inicio-perfil { display: flex; justify-content: center; }
.inicio-avatar {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 40px;
  padding: 8px;
  background: linear-gradient(150deg, var(--dorado), var(--morado-brillo) 60%);
  box-shadow: 0 18px 50px rgba(139, 92, 246, 0.35);
}
.inicio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 33px;
  display: block;
}
.avatar-live {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff3b3b;
  border: 4px solid var(--fondo);
  box-shadow: 0 0 14px rgba(255, 59, 59, 0.8);
  animation: none !important; /* 0% GPU idle */
}
@keyframes livePulse { 0%,100% { box-shadow: 0 0 8px rgba(255,59,59,.7); } 50% { box-shadow: 0 0 20px rgba(255,59,59,1); } }

.inicio-eyebrow {
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--morado-brillo);
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
}
.inicio-titulo {
  font-family: var(--fuente-titulo);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
}
.inicio-titulo span { color: var(--dorado); }
.inicio-soy {
  margin-top: 14px;
  font-size: 1.02rem;
  color: var(--texto-2);
  line-height: 1.6;
  max-width: 520px;
}
.inicio-soy strong { color: var(--texto); }

.inicio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
  max-width: 520px;
}
.stat-card {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}
.stat-num {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--texto);
}
.stat-txt { font-size: 0.72rem; color: var(--texto-2); margin-top: 4px; letter-spacing: 0.5px; }

.inicio-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  color: var(--texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.2s;
}
.social-btn:hover {
  border-color: var(--dorado);
  color: var(--dorado);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 105, 0.15);
}
.social-btn .social-ico { height: 22px; width: 22px; }

.inicio-cta {
  margin-top: 30px;
  padding: 14px 36px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--morado), var(--morado-brillo));
  color: #fff;
  font-family: var(--fuente);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.45);
  transition: all 0.2s;
}
.inicio-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(139, 92, 246, 0.55); }
.cta-arrow { margin-left: 6px; }

.inicio-morotext {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 44px;
}
.morotext-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--texto-2);
}
.mt-ico { font-size: 1.05rem; }

/* ===== NAVEGACIÓN PRINCIPAL (SSR) ===== */
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}
.site-nav a {
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--texto-2);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.site-nav a:hover { color: var(--texto); background: var(--fondo-2); }
.site-nav a.active {
  background: linear-gradient(120deg, var(--morado), var(--morado-brillo));
  color: #fff;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
}
.discord-btn { margin-left: 4px; }

/* ===== GRID DE CATEGORÍAS (home) ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  padding: 8px 40px 48px;
  max-width: 1320px;
  margin: 0 auto;
}
.cat-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
  background: var(--tarjeta);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s, border-color 0.2s, box-shadow 0.22s;
}
.cat-card:hover {
  transform: translateY(-5px);
  border-color: var(--morado-brillo);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 16px rgba(139, 92, 246, 0.25);
}
.cat-card-img { height: 120px; background: var(--fondo-2); position: relative; overflow: hidden; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.cat-card:hover .cat-card-img img { transform: scale(1.07); }
.cat-card-body { padding: 14px 16px; }
.cat-card-nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.2px; color: var(--texto); }
.cat-card-meta { font-size: 0.78rem; color: var(--texto-2); margin-top: 4px; letter-spacing: 0.5px; }

/* ===== MIGAJA DE PAN (breadcrumb) ===== */
.breadcrumb { padding: 18px 40px 0; max-width: 1320px; margin: 0 auto; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; color: var(--texto-2); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: '/'; color: var(--borde); }
.breadcrumb a { color: var(--morado-brillo); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li:last-child { color: var(--texto); font-weight: 600; }

/* ===== BADGE DE STOCK HAY / NO HAY ===== */
.stock-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  z-index: 2;
}
.producto-card .stock-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.2;
  box-sizing: border-box;
  max-width: 100%;
}
.stock-badge.hay {
  background: rgba(11, 14, 20, 0.85);
  color: #00FF88;
  border: 1px solid rgba(0, 255, 136, 0.4);
}
.stock-badge.nohay {
  background: rgba(11, 14, 20, 0.85);
  color: #FF5555;
  border: 1px solid rgba(255, 85, 85, 0.35);
}
.stock-badge.badge-urgente,
.stock-badge.stock-bajo {
  background: rgba(11, 14, 20, 0.85);
  color: #FF4466;
  border: 1px solid rgba(255, 42, 75, 0.55);
  box-shadow: 0 0 8px rgba(255, 42, 75, 0.25);
}
.stock-badge.grande { position: static; display: inline-block; margin: 6px 0 12px; font-size: 0.8rem; padding: 8px 16px; }
.stock-badge.grande.hay { animation: none; }
.cat-hint {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px 18px;
  color: var(--texto-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
.cat-hint strong { color: var(--texto); }

/* ===== PÁGINA DE ÍTEM ===== */
.item-wrap { padding-bottom: 40px; }
.item-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 34px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px 10px;
  align-items: start;
}
.item-img-wrap { position: relative; }
.item-img {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.item-img img { width: 100%; height: 280px; object-fit: cover; display: block; }
.item-info { min-width: 0; }
.item-titulo {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1;
  color: var(--texto);
}
.item-cat { color: var(--texto-2); font-size: 0.9rem; margin-top: 6px; letter-spacing: 0.5px; }
.detalle-valor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--dorado);
  background: rgba(212, 175, 105, 0.08);
  border: 1px solid rgba(212, 175, 105, 0.35);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 18px 0 2px;
}
.detalle-valor strong { font-weight: 800; }
.item-btn { padding: 14px 30px; font-size: 1rem; max-width: 100%; margin-top: 20px; }
.item-stats {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}
.item-stats h2 {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--texto);
}
.stat-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 9px 14px;
}
.stat-clave {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-valor {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--morado-brillo);
  text-align: right;
}
.item-desc {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}
.item-desc h2 {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--texto);
}
.item-desc p {
  color: var(--texto-2);
  line-height: 1.7;
  font-size: 0.98rem;
  white-space: pre-line;
}
.aviso.ok { background: rgba(61, 220, 132, 0.08); border: 1px solid rgba(61, 220, 132, 0.35); padding: 10px 12px; border-radius: 12px; }

/* Botón como link (tarjeta de catálogo) */
.producto-card .btn-comprar { display: block; text-align: center; font-size: 0.85rem; padding: 10px; }

/* ===== FOOTER / CONTACTO ===== */
.pie {
  margin-top: 48px;
  padding: 30px 40px 42px;
  border-top: 1px solid var(--borde);
  text-align: center;
}
.pie-linea {
  font-size: 0.95rem;
  color: var(--texto-2);
}
.pie-linea a {
  color: var(--morado-brillo);
  text-decoration: none;
  font-weight: 700;
}
.pie-linea a:hover { text-decoration: underline; }

.pie-buscar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 14px;
}
.pie-buscar input[type="search"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--texto);
  font-size: 0.95rem;
}
.pie-buscar input[type="search"]:focus {
  outline: 2px solid var(--morado-brillo);
  outline-offset: 1px;
}
.pie-buscar-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
@media (max-width: 520px) {
  .pie-buscar {
    max-width: none;
  }
  .pie-buscar input[type="search"] {
    flex: 1 1 100%;
  }
  .pie-buscar-btn {
    flex: 1 1 100%;
  }
}
.pie-redes {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--texto-2);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.pie-redes a {
  color: var(--texto-2);
  text-decoration: none;
  font-weight: 600;
}
.pie-redes a:hover { color: var(--morado-brillo); }

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
  header {
    padding: 12px 18px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .header-brand { flex: 1 1 auto; min-width: 0; }
  .header-title { font-size: 1.05rem; }
  .header-sub { display: none; }
  .header-brand .logo-badge { height: 46px; width: 46px; flex: none; }
  .discord-btn { padding: 8px 12px; font-size: 0.78rem; }
  .discord-btn .social-ico { height: 16px; width: 16px; }
  .site-nav { gap: 2px; margin-left: 0; width: 100%; order: 4; justify-content: center; }
  .site-nav a { padding: 7px 12px; font-size: 0.84rem; }
  .vista-tienda { padding: 22px 18px 0; }
  .tabs-titulo { font-size: 1.3rem; }

  .breadcrumb { padding: 14px 18px 0; }
  .cat-grid { padding: 8px 18px 32px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .cat-card-img { height: 90px; }
  .cat-card-body { padding: 10px 12px; }
  .cat-card-nombre { font-size: 0.92rem; }
  .cat-hint { padding: 0 18px 14px; font-size: 0.85rem; }
  .catalogo { padding: 10px 18px 40px; }
  .categoria-seccion { padding: 0 18px 6px; }
  .categoria-seccion + .categoria-seccion { margin-top: 8px; }
  .cat-titulo { font-size: 1.25rem; }

  .item-layout { grid-template-columns: 1fr; gap: 22px; padding: 20px 18px 10px; }
  .item-img img { height: 220px; }
  .item-titulo { font-size: 1.6rem; }
  .item-desc p { font-size: 0.92rem; }
  .item-btn { width: 100%; }
  .stock-badge.grande { font-size: 0.72rem; }
  .vista-tienda { padding: 22px 18px 0; }
  .tabs-titulo { font-size: 1.3rem; }

  .inicio { padding: 28px 18px 28px; }
  .inicio-carta { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .inicio-avatar { width: 180px; height: 180px; border-radius: 32px; }
  .inicio-avatar img { border-radius: 26px; }
  .inicio-titulo { font-size: 2.2rem; }
  .inicio-soy { font-size: 0.95rem; margin: 14px auto 0; }
  .inicio-stats { grid-template-columns: repeat(3, minmax(0,1fr)); margin: 24px auto 0; gap: 8px; }
  .stat-card { padding: 12px 8px; }
  .stat-num { font-size: 0.9rem; }
  .inicio-redes { justify-content: center; gap: 8px; margin-top: 22px; }
  .social-btn { padding: 9px 13px; font-size: 0.82rem; }
  .inicio-cta { margin-top: 24px; padding: 13px 30px; font-size: 1rem; }
  .inicio-morotext { margin-top: 30px; gap: 10px; }
  .morotext-item { padding: 8px 14px; font-size: 0.8rem; }

  .tabs, .catalogo { padding-left: 18px; padding-right: 18px; }
  .tabs { padding-top: 18px; justify-content: flex-start; gap: 8px; }
  .tab { padding: 8px 15px; font-size: 0.84rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .producto-img { aspect-ratio: 4 / 3; }
  .producto-body { padding: 12px; }
  .precio-normal, .precio-oferta { font-size: 1.1rem; }
  .pie { padding: 24px 18px 32px; }
}
.inicio-accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  max-width: 540px;
}
.acceso-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  color: var(--texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.acceso-btn:hover {
  border-color: var(--dorado);
  color: var(--dorado);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 105, 0.15);
}
.acceso-ico { font-size: 1.05rem; }

/* Home sections */
.home-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px;
}
.home-section-head {
  text-align: center;
  margin-bottom: 28px;
}
.home-section-head h2 {
  font-family: var(--fuente-titulo);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--texto);
}
.home-section-head p {
  font-family: var(--fuente) !important;
  color: var(--texto-2);
  margin-top: 6px;
  font-size: 0.95rem;
}
.home-cta {
  text-align: center;
  margin-top: 24px;
}

/* Trust grid */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.trust-card {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
}
.trust-ico { font-size: 2rem; margin-bottom: 10px; }
.trust-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--texto);
}
.trust-card p {
  font-size: 0.85rem;
  color: var(--texto-2);
  line-height: 1.5;
}

/* Games grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.game-card {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
}
.game-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 10px 0 6px;
  color: var(--texto);
}
.game-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--morado-brillo);
  font-weight: 700;
  text-decoration: none;
}
.game-link:hover { text-decoration: underline; }
.game-soon { opacity: 0.6; }
.game-soon p { font-size: 0.85rem; color: var(--texto-2); }

/* FAQ (Master styling consolidated in FAQ Accordion Gamer section) */

/* Product details / Ficha */
.item-ficha {
  max-width: 700px;
  margin: 32px auto 0;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 24px 28px;
}
.ficha-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--texto);
  margin-bottom: 16px;
}
.ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.ficha-celda {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fc-id {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-2);
  font-weight: 600;
}
.ficha-celda strong {
  font-size: 0.95rem;
  color: var(--texto);
}

/* ===== RESPONSIVE HOME (móvil) ===== */
@media (max-width: 700px) {
  .inicio-accesos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px auto 0;
    max-width: none;
  }
  .acceso-btn {
    justify-content: center;
    padding: 12px 10px;
    font-size: 0.88rem;
    width: 100%;
  }
  .home-section {
    padding: 28px 18px;
  }
  .home-section-head h2 {
    font-size: 1.45rem;
  }
  .home-section-head p {
  font-family: var(--fuente) !important;
    font-size: 0.88rem;
  }
  .trust-grid,
  .games-grid {
    grid-template-columns: 1fr;
  }
  .trust-card,
  .game-card {
    padding: 20px 16px;
  }
  .faq-item summary {
    padding: 14px 16px;
    font-size: 0.9rem;
  }
  .faq-item p {
    padding: 0 16px 14px;
  }
  .item-ficha {
    margin: 24px 18px 0;
    padding: 18px 16px;
  }
  .ficha-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .inicio-accesos {
    grid-template-columns: 1fr;
  }
  .ficha-grid {
    grid-template-columns: 1fr;
  }
  .inicio-titulo {
    font-size: 1.9rem;
  }
}

/* Updated values list */
.valores-lista {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.valor-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.valor-fila:hover { border-color: var(--dorado); }
.valor-nombre { font-weight: 700; color: var(--texto); font-size: 0.92rem; }
.valor-monto { font-weight: 700; color: var(--dorado); font-size: 0.92rem; }
.valor-delta { font-size: 0.78rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.valor-delta.estable { color: var(--texto-2); background: var(--fondo-2); }

/* Footer completo */
.pie-top {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto 28px;
  text-align: left;
}
.pie-marca .header-title { font-size: 1.3rem; }
.pie-tagline {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--texto-2);
  line-height: 1.6;
  max-width: 280px;
}
.pie-roblox-disclaimer {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(18, 18, 25, 0.7);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 10px;
  max-width: 320px;
  text-align: left;
}
.pie-roblox-disclaimer .prd-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dorado, #FFD700);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  padding: 2px 7px;
  border-radius: 9999px;
  margin-bottom: 5px;
}
.pie-roblox-disclaimer p {
  font-size: 0.72rem;
  color: var(--texto-2, #A1A1AA);
  line-height: 1.45;
  margin: 0;
}
.pie-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px;
}
.pie-col { display: flex; flex-direction: column; gap: 8px; }
.pie-col h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--texto);
  margin-bottom: 2px;
}
.pie-col a {
  font-size: 0.84rem;
  color: var(--texto-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pie-col a:hover { color: var(--morado-brillo); }
.pie-copy {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--texto-2);
  opacity: 0.7;
}
@media (max-width: 700px) {
  .pie-top { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .pie-tagline { margin-left: auto; margin-right: auto; }
  .pie-roblox-disclaimer { margin-left: auto; margin-right: auto; text-align: center; }
  .pie-cols { grid-template-columns: repeat(2, 1fr); text-align: left; }
  .valor-fila { grid-template-columns: 1fr auto; }
  .valor-delta { grid-column: 1 / -1; justify-self: start; }
}

/* ===== PÁGINAS LEGALES (GAMER DARK BENTO) ===== */
.legal-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 36px 20px 70px;
  box-sizing: border-box;
}

.legal-hero-header {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  position: static;
  backdrop-filter: none;
  padding: 0;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.legal-titulo {
  font-family: var(--fuente-titulo);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--texto);
  margin: 12px 0 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
}

.legal-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.lmp-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.3px;
}

.lmp-pill.lmp-verified {
  background: rgba(16, 185, 129, 0.12);
  color: var(--esmeralda, #10B981);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.lmp-pill.lmp-date {
  background: rgba(124, 58, 237, 0.12);
  color: var(--morado-brillo, #8B5CF6);
  border: 1px solid rgba(124, 58, 237, 0.28);
}

.legal-intro {
  color: var(--texto-2);
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0;
  max-width: 780px;
}

.legal-nav-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  margin-bottom: 22px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.legal-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(24, 24, 32, 0.65);
  border: 1px solid var(--borde);
  color: var(--texto-2);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.legal-tab-btn:hover {
  color: var(--texto);
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.1);
  transform: translateY(-1px);
}

.legal-tab-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(0, 240, 255, 0.15));
  border-color: var(--morado-brillo);
  color: var(--texto);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.25);
}

.legal-secciones-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.legal-bloque {
  background: rgba(24, 24, 32, 0.7);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.legal-bloque:hover {
  border-color: rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}

.legal-bloque-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.legal-sec-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.legal-bloque h2 {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--texto);
  margin: 0;
  letter-spacing: -0.01em;
}

.legal-bloque p {
  font-size: 0.92rem;
  color: var(--texto-2);
  line-height: 1.75;
  margin: 0;
}

/* ROBLOX DISCLAIMER BOX */
.legal-disclaimer-box {
  display: flex;
  gap: 16px;
  background: linear-gradient(135deg, rgba(212, 175, 105, 0.08), rgba(11, 11, 15, 0.9));
  border: 1px solid rgba(212, 175, 105, 0.3);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 28px;
  align-items: flex-start;
}

.legal-disclaimer-box .ldb-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.legal-disclaimer-box .ldb-content h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dorado, #FFD700);
  margin: 0 0 6px;
}

.legal-disclaimer-box .ldb-content p {
  font-size: 0.85rem;
  color: var(--texto-2);
  line-height: 1.65;
  margin: 0;
}

/* BOTONES DE ACCIÓN LEGAL */
.legal-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.btn-legal-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #5865F2;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-legal-discord:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.45);
}

.btn-legal-catalogo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cian, #00F0FF);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.btn-legal-catalogo:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: var(--cian, #00F0FF);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.25);
}

@media (max-width: 600px) {
  .legal-wrap {
    padding: 24px 14px 50px;
  }
  .legal-titulo {
    font-size: 1.6rem;
  }
  .legal-disclaimer-box {
    flex-direction: column;
    gap: 10px;
  }
  .legal-actions-bar {
    flex-direction: column;
  }
  .btn-legal-discord,
  .btn-legal-catalogo {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* Métodos de pago (modal de compra) */
.mp-seccion-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1rem;
  color: var(--texto);
  margin: 18px 0 10px;
}
.metodos-pago {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.metodo-pago {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
}
.mp-nombre {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
}
.mp-desc {
  font-size: 0.85rem;
  color: var(--texto-2);
  margin-top: 4px;
  line-height: 1.5;
}
.mp-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.mp-dato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 600;
}
.mp-dato:hover { border-color: var(--dorado); color: var(--dorado); }
.mp-enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--dorado);
  color: #1a1a1a;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.mp-enlace:hover { filter: brightness(1.1); }

/* ===== HEADER: búsqueda, carrito, usuario ===== */
.header-search {
  position: relative !important;
  flex: 1 1 180px;
  max-width: 380px;
  min-width: 0;
}
.header-search .hs-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--texto-2);
  pointer-events: none;
}
.header-search .hs-ico svg { width: 18px; height: 18px; }
.header-search input[type="search"] {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}
.header-search input[type="search"]:focus { border-color: var(--dorado); }
.buscar-sugerencias {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 500px;
  max-width: calc(100vw - 32px);
  background: rgba(12, 16, 26, 0.98);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 240, 255, 0.15);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
  z-index: 100000 !important;
  display: none;
}
.buscar-sugerencias.abierto { display: block; }

.bs-header-recom {
  padding: 9px 14px;
  background: rgba(0, 240, 255, 0.09);
  border-bottom: 1px solid rgba(0, 240, 255, 0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #00F0FF;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.bs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.18s ease;
}
.bs-item:last-child { border-bottom: none; }
.bs-item:hover {
  background: rgba(0, 240, 255, 0.08);
  transform: translateX(2px);
}
.bs-item.bs-item-premio {
  background: rgba(0, 240, 255, 0.05);
  border-left: 3px solid #00F0FF;
}
.bs-thumb-wrap {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.bs-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bs-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bs-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-nombre {
  font-weight: 700;
  font-size: 13.5px;
  color: #FFFFFF;
  white-space: normal;
  line-height: 1.25;
}
.bs-cat-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.2);
  color: #C4B5FD;
  border: 1px solid rgba(124, 58, 237, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.bs-clean-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.bs-dupe-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.35);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.bs-custodia-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 240, 255, 0.2);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.5);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.bs-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bs-trade-sub {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 600;
  white-space: nowrap;
}
.bs-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.bs-precio-badge {
  font-size: 13px;
  font-weight: 900;
  color: #10B981;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.bs-stock {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
}
.bs-stock.in-stock {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.bs-stock.out-stock {
  background: rgba(255, 255, 255, 0.05);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bs-stock.custodia-stock {
  background: rgba(0, 240, 255, 0.18);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.45);
}
.bs-action-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: bold;
  padding-right: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.bs-item:hover .bs-action-arrow {
  transform: translateX(3px);
  color: #00F0FF;
}
.bs-vacio {
  padding: 14px;
  color: #94A3B8;
  font-size: 12.5px;
  text-align: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  color: var(--texto);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--dorado); color: var(--dorado); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--dorado);
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-area { display: flex; align-items: center; }
.login-btn {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  color: var(--texto);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.login-btn:hover { border-color: var(--dorado); color: var(--dorado); }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 24px;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
}
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fondo-2);
}
.user-name { font-size: 0.82rem; font-weight: 700; color: var(--texto); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-logout {
  border: none;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  font-size: 0.8rem;
}
.user-logout:hover { color: var(--dorado); }

/* Botón add to cart */
.btn-add-cart {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--dorado);
  background: transparent;
  color: var(--dorado);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-cart:hover { background: rgba(212,175,105,0.12); }
.btn-add-cart:disabled { opacity: 0.5; cursor: not-allowed; }

/* Carrito modal */
.carrito-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.carrito-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo-2);
}
.carrito-item img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.ci-nombre { font-weight: 700; font-size: 0.88rem; color: var(--texto); }
.ci-precio { font-size: 0.8rem; color: var(--dorado); font-weight: 700; }
.ci-cant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ci-cant button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  touch-action: manipulation;
}
.ci-cant button:hover {
  background: rgba(255, 222, 0, 0.25) !important;
  border-color: #FFDE00 !important;
  color: #FFDE00 !important;
}
.ci-cant button:active {
  transform: scale(0.92) !important;
}
.ci-cant span {
  min-width: 24px;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #00F0FF;
}
/* ── Blindaje cantidad fija (Robux / Gamepass) ──────────────────── */
.ci-cant--fijo {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  padding: 3px 10px;
  min-height: 36px;
  pointer-events: none;
}
.ci-cant-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #00F0FF;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.ci-quitar { border: none; background: transparent; color: var(--texto-2); cursor: pointer; }
.ci-quitar:hover { color: #e06666; }
.carrito-total { text-align: right; font-size: 1rem; margin-bottom: 12px; color: var(--texto); }

@media (max-width: 700px) {
  .header-search { position: relative !important; order: 3; flex: 1 1 100%; max-width: none; margin-top: 8px; }
  .header-actions { order: 2; }
  .user-name { max-width: 70px; }
  .carrito-item { grid-template-columns: 40px 1fr; row-gap: 8px; }
  .ci-cant { grid-column: 2; }
  .ci-quitar { grid-column: 2; justify-self: end; }
}

/* =====================================================
   MOBILE FIRST — flujo de usuario en celular (<=700px)
   Este bloque va al final para sobreescribir lo anterior.
   ===================================================== */
@media (max-width: 700px) {
  /* ---- Header en 2 filas limpias ---- */
  header {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .header-brand { flex: 0 1 auto !important; max-width: none !important; min-width: 0; gap: 8px; }
  .header-brand .logo-badge { height: 30px; width: 30px; flex: none; border-radius: 8px; }
  .header-title { font-size: 0.95rem; }
  .header-sub { display: none; }
  .header-actions { order: 1; margin-left: auto; gap: 4px !important; flex: 0 0 auto !important; }
  .icon-btn { width: 30px !important; height: 30px !important; border-radius: 8px !important; }
  .icon-btn svg { width: 15px !important; height: 15px !important; }
  .login-btn { padding: 9px 14px; font-size: 0.8rem; }
  .user-name { max-width: 64px; }
  .header-search {
    position: relative !important;
    order: 2;
    flex: 1 1 100%;
    max-width: none;
    margin-top: 4px;
  }
  .header-search input[type="search"] {
    padding: 11px 14px 11px 38px;
    font-size: 0.92rem;
    border-radius: 11px;
  }
  .site-nav {
    order: 3;
    width: 100%;
    margin: 2px 0 0;
    justify-content: center;
    gap: 4px;
  }
  .site-nav a { padding: 7px 14px; font-size: 0.84rem; }

  /* ---- Sugerencias del buscador ---- */
  .buscar-sugerencias { max-height: 60vh; overflow-y: auto; }
  .bs-item { padding: 10px 12px; gap: 10px; }
  .bs-item img { width: 34px; height: 34px; }
  .bs-nombre { font-size: 0.86rem; }

  /* ---- Hero / inicio ---- */
  .inicio { padding: 24px 16px 28px; }
  .inicio-carta { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .inicio-avatar { width: 140px; height: 140px; border-radius: 28px; }
  .inicio-avatar img { border-radius: 22px; }
  .inicio-titulo { font-size: 2rem; }
  .inicio-soy { font-size: 0.95rem; margin: 12px auto 0; }
  .inicio-accesos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px auto 0;
    max-width: none;
  }
  .acceso-btn { justify-content: center; padding: 13px 10px; font-size: 0.88rem; width: 100%; }
  .inicio-morotext { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 22px; }
  .morotext-item { justify-content: center; padding: 10px 14px; font-size: 0.82rem; }

  /* ---- Secciones del home ---- */
  .home-section { padding: 26px 16px; }
  .home-section-head { margin-bottom: 20px; }
  .home-section-head h2 { font-size: 1.4rem; }
  .home-section-head p {
  font-family: var(--fuente) !important; font-size: 0.86rem; }
  .trust-grid, .games-grid { grid-template-columns: 1fr; }
  .trust-card, .game-card { padding: 20px 16px; }
  .home-cta .btn-comprar { display: block; width: 100%; text-align: center; }

  /* ---- Grids de productos / categorías: 2 columnas ---- */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 16px 28px; }
  .cat-card-img { height: 84px; }
  .cat-card-body { padding: 10px 12px; }
  .cat-card-nombre { font-size: 0.88rem; }
  .cat-card-meta { font-size: 0.72rem; }
  .catalogo { padding: 8px 16px 36px; }
  .categoria-seccion { padding: 0 16px 6px; }
  .cat-titulo { font-size: 1.2rem; }
  .cat-hint { padding: 0 16px 14px; font-size: 0.84rem; }
  .tabs-head { padding: 0 16px; }
  .tabs-titulo { font-size: 1.25rem; }
  .breadcrumb { padding: 12px 16px 0; font-size: 0.82rem; }
  .producto-body { padding: 10px; }
  .producto-nombre { font-size: 0.85rem; }
  .producto-valor { font-size: 0.72rem; }
  .precio-normal, .precio-oferta { font-size: 1rem; }
  .producto-card .btn-comprar { font-size: 0.8rem; padding: 9px; }
  .tier-sello, .stock-badge { font-size: 0.62rem; padding: 3px 7px; }

  /* ---- Página de producto ---- */
  .item-wrap { padding: 0 12px 140px !important; }
  .item-layout { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 10px 0 !important; }
  .item-col-left { display: contents !important; }
  .item-img-wrap { order: 1 !important; width: 100% !important; position: static !important; }
  .item-info { order: 2 !important; }
  .item-left-extra { order: 3 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; margin-top: 14px !important; }
  .item-img { border-radius: 16px !important; max-height: 240px !important; overflow: hidden !important; }
  .item-img img { width: 100% !important; height: 220px !important; object-fit: contain !important; background: rgba(0,0,0,0.4) !important; padding: 10px !important; }
  .item-titulo { font-size: 1.4rem !important; margin: 6px 0 !important; }
  .item-cat { font-size: 0.85rem; }
  .item-desc p { font-size: 0.9rem; }
  .item-actions-row { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .item-btn, .btn-add-cart { width: 100% !important; min-height: 44px !important; font-size: 0.95rem !important; font-weight: 800 !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .whatsapp-express-box { padding: 14px 12px !important; margin-top: 14px !important; }
  .wa-buttons-grid { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; }
  .btn-whatsapp-direct, .btn-copy-wa-msg { width: 100% !important; min-height: 42px !important; }
  .item-ficha { margin: 20px 0 0; padding: 16px 14px; }
  .ficha-titulo { font-size: 1.05rem; }
  .ficha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ficha-celda { padding: 10px 12px; }
  .fc-id { font-size: 0.66rem; }
  .ficha-celda strong { font-size: 0.88rem; }

  /* ---- Modales (carrito, login, compra) ---- */
  .modal-backdrop { padding: 12px; align-items: flex-end; }
  .modal {
    box-sizing: border-box !important;
    max-width: none;
    width: 100%;
    padding: 20px 16px;
    border-radius: 18px 18px 14px 14px;
    max-height: 90vh;
  }
  .modal h3 { font-size: 1.15rem; }
  .modal-actions { flex-direction: column-reverse; gap: 8px; }
  .modal-actions .btn { width: 100%; padding: 13px; font-size: 0.95rem; }
  .carrito-item { grid-template-columns: 40px 1fr auto; row-gap: 8px; }
  .carrito-item img { width: 40px; height: 40px; }
  .ci-cant { grid-column: 2; }
  .ci-quitar { grid-column: 3; grid-row: 1; justify-self: end; }
  .mp-dato, .mp-enlace { flex: 1 1 auto; justify-content: center; }
  .mp-acciones { gap: 8px; }

  /* ---- Footer ---- */
  .pie { padding: 24px 16px 30px; }
  .pie-top { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .pie-marca { display: flex; flex-direction: column; align-items: center; }
  .pie-tagline { margin: 10px auto 0; }
  .pie-cols { grid-template-columns: repeat(2, 1fr); text-align: left; gap: 16px; }
  .pie-col h4 { font-size: 0.82rem; }
  .pie-col a { font-size: 0.82rem; }
  .pie-linea { font-size: 0.82rem; }

  /* ---- Valores / legal ---- */
  .valor-fila { grid-template-columns: 1fr auto; gap: 8px; padding: 11px 13px; }
  .valor-delta { grid-column: 1 / -1; justify-self: start; }
  .legal-wrap { padding: 20px 16px 40px; }
  .legal-titulo { font-size: 1.5rem; }
}

@media (max-width: 380px) {
  .inicio-accesos { grid-template-columns: 1fr; }
  .ficha-grid { grid-template-columns: 1fr; }
  .inicio-titulo { font-size: 1.8rem; }
  .header-title { font-size: 0.92rem; }
  .login-btn { padding: 8px 11px; font-size: 0.76rem; }
}

/* =====================================================
   MÓVIL: header compacto, buscador-icono, menú hamburguesa
   ===================================================== */
.search-toggle, .menu-toggle { display: none; }

@media (max-width: 700px) {
  .search-toggle, .menu-toggle { display: inline-flex; }

  header {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
    row-gap: 8px;
  }
  .header-brand { flex: 0 1 auto !important; max-width: none !important; min-width: 0; gap: 8px; order: 0; }
  .header-brand .logo-badge { height: 30px; width: 30px; border-radius: 8px; padding: 0; }
  .header-title { font-size: 0.95rem; }
  .header-sub { display: none; }
  .header-actions { order: 1; margin-left: auto; gap: 4px !important; flex: 0 0 auto !important; }
  .icon-btn { width: 30px !important; height: 30px !important; border-radius: 8px !important; }
  .icon-btn svg { width: 15px !important; height: 15px !important; }
  .login-btn { padding: 8px 12px; font-size: 0.78rem; }
  .user-chip { padding: 4px 6px 4px 4px; gap: 6px; }
  .user-name { display: none; }
  .user-avatar { width: 28px; height: 28px; }
  .cart-count { top: -5px; right: -5px; min-width: 18px; height: 18px; font-size: 0.68rem; }

  /* Buscador: oculto hasta tocar el icono */
  .header-search { position: relative !important; display: none; order: 2; flex: 1 1 100%; max-width: none; margin: 0; }
  .header-search.abierto { display: block; margin-top: 2px; }
  .header-search input[type="search"] { padding: 11px 14px 11px 38px; font-size: 0.92rem; }

  /* Menú hamburguesa desplegable */
  .site-nav {
    display: none;
    order: 3;
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    width: min(340px, calc(100vw - 24px));
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 12px;
    background: rgba(14, 18, 28, 0.96);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    backdrop-filter: none !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 215, 0, 0.1);
    z-index: 1000;
  }
  .site-nav.abierto {
    display: flex !important;
    animation: mtxMenuIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .site-nav-header {
    padding: 4px 8px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
  }
  .site-nav-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #FFD700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .site-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
  }
  .site-nav-link:hover, .site-nav-link.active {
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: rgba(255, 215, 0, 0.35) !important;
    transform: translateX(3px) !important;
  }
  .sn-icon {
    font-size: 20px;
    flex-shrink: 0;
  }
  .sn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sn-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
  }
  .sn-text small {
    font-size: 11px;
    color: #A0AEC0;
  }
  .sn-kick {
    border-color: rgba(0, 255, 136, 0.2) !important;
  }
  .sn-kick:hover {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: #00FF88 !important;
  }
  .sn-admin {
    border-color: rgba(255, 51, 102, 0.3) !important;
    background: rgba(255, 51, 102, 0.05) !important;
  }
}

@media (max-width: 380px) {
  .header-brand .logo-badge { height: 34px; width: 34px; }
  .header-title { font-size: 0.85rem; }
  .icon-btn { width: 36px; height: 36px; }
}

/* =====================================================
   ANIMACIONES
   ===================================================== */
@keyframes mtxFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mtxPop { 0% { transform: scale(0.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes mtxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes mtxSlideUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes mtxGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(124, 58, 237, 0.35); }
  50% { box-shadow: 0 0 24px rgba(124, 58, 237, 0.6); }
}
@keyframes mtxShine { from { left: -120%; } to { left: 130%; } }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: none; }

/* Hero: avatar flotando */
.inicio-avatar { animation: none !important; /* 0% GPU idle */ }

/* Logo con brillo suave */
.header-brand .logo-badge { animation: none !important; /* 0% GPU idle */ }

/* Tarjetas con elevación */
.producto-card, .cat-card, .trust-card, .game-card, .valor-fila {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.producto-card:hover, .cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.38);
  border-color: var(--dorado);
}
.trust-card:hover, .game-card:hover { transform: translateY(-4px); border-color: var(--dorado); }
.valor-fila:hover { transform: translateX(4px); }

/* Botones con destello */
.btn-comprar, .btn-add-cart, .mp-enlace, .btn-primario { position: relative; overflow: hidden; }
.btn-comprar::after, .btn-add-cart::after, .btn-primario::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn-comprar:hover::after, .btn-add-cart:hover::after, .btn-primario:hover::after {
  animation: mtxShine 0.6s ease;
}

/* Dropdown de sugerencias */
.buscar-sugerencias.abierto { animation: mtxFadeUp 0.18s ease; }

/* Modal */
.modal { animation: mtxSlideUp 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); }

/* Badge del carrito */
.cart-count { animation: mtxPop 0.3s ease; }

/* Menú hamburguesa */
.site-nav.abierto { animation: mtxFadeUp 0.2s ease; }

/* Accesos rápidos con transición */
.acceso-btn { transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .inicio-avatar, .header-brand .logo-badge, .cart-count, .modal, .buscar-sugerencias.abierto, .site-nav.abierto {
    animation: none !important;
  }
  .producto-card:hover, .cat-card:hover, .trust-card:hover, .game-card:hover, .valor-fila:hover { transform: none; }
}

/* =====================================================
   ANIMACIONES: buscador y menú
   ===================================================== */
@keyframes mtxSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes mtxItemIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes mtxMenuIn { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Barra buscadora: aparece deslizándose */
.header-search.abierto { animation: mtxSlideDown 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); }

/* Ítems de sugerencias: entrada escalonada */
.buscar-sugerencias.abierto .bs-item { animation: mtxItemIn 0.26s ease backwards; }
.buscar-sugerencias.abierto .bs-item:nth-child(1) { animation-delay: 0.02s; }
.buscar-sugerencias.abierto .bs-item:nth-child(2) { animation-delay: 0.05s; }
.buscar-sugerencias.abierto .bs-item:nth-child(3) { animation-delay: 0.08s; }
.buscar-sugerencias.abierto .bs-item:nth-child(4) { animation-delay: 0.11s; }
.buscar-sugerencias.abierto .bs-item:nth-child(5) { animation-delay: 0.14s; }
.buscar-sugerencias.abierto .bs-item:nth-child(6) { animation-delay: 0.17s; }
.buscar-sugerencias.abierto .bs-item:nth-child(7) { animation-delay: 0.20s; }
.buscar-sugerencias.abierto .bs-item:nth-child(8) { animation-delay: 0.23s; }

/* Menú desplegable */
.site-nav.abierto { animation: mtxMenuIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); }
.site-nav.abierto a { animation: mtxItemIn 0.3s ease backwards; }
.site-nav.abierto a:nth-child(1) { animation-delay: 0.04s; }
.site-nav.abierto a:nth-child(2) { animation-delay: 0.09s; }
.site-nav.abierto a:nth-child(3) { animation-delay: 0.14s; }
.site-nav.abierto a:nth-child(4) { animation-delay: 0.19s; }
.site-nav.abierto a:nth-child(5) { animation-delay: 0.24s; }

/* Icono hamburguesa -> X */
.menu-toggle svg line {
  transform-origin: 12px 12px;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.18s ease;
}
.menu-toggle.abierto svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.abierto svg line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.abierto svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Icono de la lupa: pequeño rebote al abrir */
.search-toggle.abierto svg { animation: mtxPop 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .header-search.abierto, .site-nav.abierto, .site-nav.abierto a,
  .buscar-sugerencias.abierto .bs-item, .menu-toggle svg line, .search-toggle.abierto svg {
    animation: none !important;
    transition: none !important;
  }
}

/* Client benefits */
.benefits-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.benefit-item:hover { transform: translateY(-3px); border-color: var(--dorado); }
.benefit-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--morado), var(--morado-brillo));
  color: #fff;
  font-weight: 800;
  font-family: var(--fuente-titulo);
}
.benefit-item h3 { font-size: 1rem; font-weight: 700; color: var(--texto); margin-bottom: 4px; }
.benefit-item p { font-size: 0.88rem; color: var(--texto-2); line-height: 1.6; }
.benefits-policy { max-width: 760px; margin: 16px auto 0; text-align: center; font-weight: 700; color: var(--dorado); }

/* Item benefits (página de producto) */
.item-benefits {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.item-benefits h3 { font-size: 0.95rem; font-weight: 800; color: var(--texto); margin-bottom: 10px; }
.item-benefits ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.item-benefits li { font-size: 0.86rem; color: var(--texto-2); line-height: 1.5; }

@media (max-width: 700px) {
  .benefit-item { padding: 16px; gap: 12px; }
  .benefit-num { width: 30px; height: 30px; font-size: 0.9rem; }
}

/* Resumen de pedido (con comisión) */
.resumen-pedido, .carrito-total {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.resumen-fila { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.9rem; color: var(--texto-2); }
.resumen-fila strong { color: var(--texto); }
.resumen-total { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 10px; font-size: 1rem; }
.resumen-total strong { color: var(--dorado); font-size: 1.1rem; }

/* Crédito de marca (Valkryn Host) */
.pie-credit {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--texto-2);
  opacity: 0.9;
}
.pie-credit-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--fondo-2);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.pie-credit-brand:hover { border-color: var(--dorado); transform: translateY(-2px); }
.pie-credit-logo {
  height: 26px;
  width: 26px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}
.pie-credit strong { color: var(--dorado); font-weight: 800; letter-spacing: 0.3px; }

/* Crédito dentro del modal */
.modal-credit {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--texto-2);
}
.modal-credit .pie-credit-logo { height: 22px; width: 22px; }
.modal-credit .pie-credit-brand { padding: 4px 10px 4px 5px; }

/* ===== PRODUCTO VALORES (dupe + real en card) ===== */
.producto-valores { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.pv-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; padding: 3px 8px;
  border-radius: 6px; line-height: 1.3;
}
.pv-real { background: rgba(61, 220, 132, 0.12); color: var(--verde); border: 1px solid rgba(61, 220, 132, 0.25); }
.pv-dupe { background: rgba(212, 175, 105, 0.12); color: var(--dorado); border: 1px solid rgba(212, 175, 105, 0.25); }

/* ===== DETALLE VALORES (item page) ===== */
.detalle-valores { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.dv-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; font-weight: 600; padding: 6px 12px;
  border-radius: 10px; line-height: 1.3;
}
.dv-real { background: rgba(61, 220, 132, 0.1); color: var(--verde); border: 1px solid rgba(61, 220, 132, 0.2); }
.dv-dupe { background: rgba(212, 175, 105, 0.1); color: var(--dorado); border: 1px solid rgba(212, 175, 105, 0.2); }

/* ===== PAYMENT METHOD TAGS (item page) ===== */
.item-payment-methods { margin-top: 14px; }
.item-payment-methods h3 { font-size: 0.9rem; color: var(--texto); margin-bottom: 8px; }
.pay-methods-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-tag {
  font-size: 0.75rem; font-weight: 700; padding: 5px 10px;
  border-radius: 8px; background: var(--fondo-2); border: 1px solid var(--borde);
  color: var(--texto-2); display: inline-flex; align-items: center; gap: 4px;
}
.pay-binance { border-color: rgba(240, 185, 11, 0.3); color: #f0b90b; }
.pay-usdt { border-color: rgba(38, 161, 123, 0.3); color: #26a17b; }

/* ===== CHECKOUT STEP TITLE ===== */
.cart-step-title {
  font-size: 1rem; font-weight: 700; color: var(--texto);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}
.checkout-resumen { margin-bottom: 14px; }
.checkout-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.checkout-line { font-size: 0.88rem; color: var(--texto-2); }
.checkout-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--texto); margin: 12px 0 4px; }
.checkout-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--fondo-2);
  color: var(--texto); font-size: 0.9rem; font-family: inherit;
  box-sizing: border-box;
}
.checkout-input:focus { border-color: var(--morado-brillo); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); }
.checkout-hint { font-size: 0.8rem; color: var(--texto-2); margin: 10px 0 4px; line-height: 1.5; }
.checkout-instrucciones { font-size: 0.88rem; color: var(--texto-2); margin-bottom: 12px; line-height: 1.5; }

/* ===== CHECKBOX OBLIGATORIO DE TÉRMINOS Y MAYORÍA DE EDAD ===== */
.checkout-terms-box {
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.checkout-terms-box:hover {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.18);
}
.checkout-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.checkout-terms-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--morado, #7C3AED);
  cursor: pointer;
  flex-shrink: 0;
}
.checkout-terms-text {
  font-size: 0.82rem;
  color: var(--texto-2, #94A3B8);
  line-height: 1.45;
  font-weight: 500;
}
.checkout-terms-text strong,
.checkout-terms-label:hover .checkout-terms-text {
  color: var(--texto, #F1F5F9);
}
.checkout-legal-link {
  color: var(--cian, #00F0FF);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
.checkout-legal-link:hover {
  color: #38BDF8;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}
.terms-error-shake {
  border-color: #EF4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important;
  animation: mtxTermsShake 0.45s ease-in-out;
}
@keyframes mtxTermsShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.checkout-success { text-align: center; padding: 10px 0; }
.success-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
.checkout-success h3 { font-size: 1.2rem; color: var(--dorado); margin-bottom: 8px; }
.checkout-success p { font-size: 0.9rem; color: var(--texto-2); line-height: 1.5; margin-bottom: 10px; }
.checkout-details { text-align: left; background: var(--fondo-2); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.checkout-next-steps { text-align: left; margin: 14px 0; }
.checkout-next-steps h4 { font-size: 0.9rem; color: var(--texto); margin-bottom: 8px; }
.checkout-next-steps ol { font-size: 0.85rem; color: var(--texto-2); line-height: 1.7; padding-left: 20px; }
.checkout-next-steps ol li { margin-bottom: 2px; }
.checkout-next-steps a { color: var(--morado-brillo); text-decoration: none; font-weight: 600; }

/* ===== RADIO-BASED PAYMENT METHOD SELECT ===== */
.metodo-pago {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.metodo-pago input[type="radio"] {
  margin-top: 4px; accent-color: var(--morado); width: 16px; height: 16px; flex-shrink: 0;
}
.metodo-pago:has(input:checked) {
  border-color: var(--morado-brillo);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.mp-content { flex: 1; }
.mp-dato-wrap { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.mp-dato-label { font-size: 0.78rem; color: var(--texto-2); }
.mp-dato {
  cursor: pointer; transition: all 0.2s;
}
.mp-dato.copied { color: var(--verde); border-color: var(--verde); }
.mp-copy-hint {
  display: none; font-size: 0.7rem; color: var(--texto-2); font-weight: 400;
}
.mp-dato:hover .mp-copy-hint { display: inline; }

/* ===== CART EMPTY ===== */
.cart-empty { text-align: center; color: var(--texto-2); padding: 20px 0; font-size: 0.95rem; }

/* ==========================================================================
   THE MOROTEX SHOP — MODERN GAMING UI (MOCKUP REDESIGN)
   ========================================================================== */

:root {
  --amarillo-neon: #FFDE00;
  --amarillo-brillo: #FFE84D;
  --amarillo-glow: rgba(255, 222, 0, 0.4);
  --fuente-gaming: 'Rajdhani', sans-serif;
}

html {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

body.site-body {
  display: flex !important;
  min-height: 100vh;
  overflow-x: clip !important;
  max-width: 100vw !important;
  color: #F5F5F7;
  background-color: #07080D !important;
  background-image:
    /* 1. Nebulosa Superior Derecha (Morado Neón) */
    radial-gradient(1000px 700px at 90% -5%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
    /* 2. Nebulosa Lateral Izquierda (Dorado Jailbreak) */
    radial-gradient(850px 650px at -5% 25%, rgba(255, 222, 0, 0.08) 0%, transparent 55%),
    /* 3. Nebulosa Central Profunda (Cian / Electric) */
    radial-gradient(1100px 800px at 50% 65%, rgba(0, 240, 255, 0.04) 0%, transparent 65%),
    /* 4. Nebulosa Inferior (Morado Cósmico) */
    radial-gradient(900px 600px at 85% 90%, rgba(124, 58, 237, 0.12) 0%, transparent 60%),
    /* 5. Micro-Malla Tecnológica / Gaming Grid (40px) */
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    /* 6. Gradiente Base Profundo */
    linear-gradient(180deg, #07080D 0%, #0D0F17 50%, #06070B 100%) !important;
  background-size:
    auto,
    auto,
    auto,
    auto,
    40px 40px,
    40px 40px,
    auto !important;
  background-attachment: fixed !important;
}

/* ===== GAMING SIDEBAR (Left Desktop, Bottom Mobile) ===== */
.gaming-sidebar {
  width: 76px;
  height: 100vh;
  background: #0E1017;
  border-right: 1px solid var(--borde);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  z-index: 100;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gaming-sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar-brand {
  margin-bottom: 24px;
}

.sidebar-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFDE00, #FF9900);
  padding: 3px;
  box-shadow: 0 0 15px rgba(255, 222, 0, 0.4);
  object-fit: contain;
  display: block;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
  flex: 1;
}

.sidebar-item {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8E92A4;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.sidebar-item svg {
  width: 20px;
  height: 20px;
}

.sidebar-label {
  display: none;
}

.sidebar-item:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-item.active {
  color: var(--amarillo-neon);
  background: rgba(255, 222, 0, 0.12);
  box-shadow: inset 0 0 12px rgba(255, 222, 0, 0.2);
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -14px;
  width: 4px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: var(--amarillo-neon);
  box-shadow: 0 0 10px var(--amarillo-neon);
}

.sidebar-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sidebar responsive para pantallas con altura reducida (laptops y ventanas bajas) */
@media (max-height: 760px) and (min-width: 961px) {
  .gaming-sidebar {
    padding: 10px 0;
  }
  .sidebar-brand {
    margin-bottom: 12px;
  }
  .sidebar-logo {
    width: 36px;
    height: 36px;
  }
  .sidebar-nav {
    gap: 6px;
  }
  .sidebar-item {
    width: 40px;
    height: 40px;
  }
  .sidebar-item svg {
    width: 18px;
    height: 18px;
  }
}

/* ===== MAIN CONTENT WRAPPER ===== */
.site-main-wrapper {
  margin-left: 76px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* ===== GAMING TOPBAR ===== */
/* ===== GAMING TOPBAR (AAA DESKTOP ARCHITECTURE) ===== */
.gaming-header {
  height: 58px;
  background: rgba(11, 14, 20, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 10000;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
}

.gaming-header.scrolled {
  background: #0B0E14 !important;
  border-bottom-color: rgba(0, 240, 255, 0.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85);
}

/* Scroll Progress Bar Global */
#mtx-scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, #7C3AED, #00F0FF) !important;
  width: 0%;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
  transition: width 0.05s ease-out;
}

/* Zona izquierda: Logo + Buscador integrado */
.header-left-zone {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.header-brand .logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  flex-shrink: 0;
}

.header-brand .logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--fuente-gaming);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #FFFFFF;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.brand-badge-shop {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  font-weight: 900;
}

.brand-sub {
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: #7A7E92;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 1px;
  white-space: nowrap;
}

/* Buscador prominente de escritorio (solo pantallas >= 901px) */
@media (min-width: 901px) {
  .gaming-header .header-search {
    position: relative !important;
    width: 260px;
    flex: 0 0 260px;
    display: flex !important;
    align-items: center;
  }
}

.gaming-header .header-search input[type="search"] {
  width: 100%;
  height: 38px;
  padding: 0 40px 0 36px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.gaming-header .header-search input[type="search"]:focus {
  border-color: #FFD700;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
}

.gaming-header .header-search .hs-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #8C99AE;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.gaming-header .header-search .hs-ico svg {
  width: 15px;
  height: 15px;
}

.search-kbd-hint {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  color: #7A7E92;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
  pointer-events: none;
  line-height: 1.2;
  z-index: 2;
}

/* Botón universal limpiar/cerrar búsqueda */
.btn-search-clear,
.header-search .btn-search-clear,
#btnSearchClear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.18);
  border: 1.5px solid #00F0FF;
  color: #00F0FF;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  user-select: none;
  outline: none;
  transition: all 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
  box-sizing: border-box;
}

.btn-search-clear svg,
.header-search .btn-search-clear svg {
  width: 12px;
  height: 12px;
  stroke: #00F0FF;
  stroke-width: 2.5;
  display: block;
  pointer-events: none;
}

.btn-search-clear:hover,
.header-search .btn-search-clear:hover {
  background: rgba(0, 240, 255, 0.35);
  border-color: #00F0FF;
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.btn-search-clear:active,
.header-search .btn-search-clear:active {
  transform: translateY(-50%) scale(0.94);
}

.header-search.has-value .btn-search-clear,
.gaming-header .header-search.has-value .btn-search-clear {
  display: flex !important;
}

.header-search.has-value .search-kbd-hint,
.gaming-header .header-search.has-value .search-kbd-hint {
  display: none !important;
}

/* Navegación central limpia y espaciosa */
.gaming-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-right: 14px;
  flex: 0 1 auto;
  min-width: 0;
  flex-shrink: 0;
}

.gaming-nav a,
.nav-more-btn {
  color: #B0B4C4;
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  padding: 6px 9px;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.gaming-nav a:hover,
.nav-more-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05);
}

.gaming-nav a.active {
  color: #FFD700;
  background: rgba(255, 215, 0, 0.08);
}

/* Dropdown "MÁS" en desktop */
.nav-more-wrap {
  position: relative;
  flex-shrink: 0;
}

.nav-more-item-compact {
  display: none !important;
}

.nav-more-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 18, 28, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  z-index: 100;
  backdrop-filter: none !important;
}

.nav-more-wrap:hover .nav-more-dropdown,
.nav-more-dropdown.abierto {
  display: flex;
}

.nav-more-dropdown a,
.nav-more-dropdown button {
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #A6B4C9;
  border-radius: 8px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: transparent;
  border: none;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.nav-more-dropdown a:hover,
.nav-more-dropdown button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.nav-more-dropdown .nav-more-item-action {
  color: #00E5FF;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.25);
  font-weight: 800;
  margin-bottom: 3px;
}

.nav-more-dropdown .nav-more-item-action:hover {
  background: rgba(0, 229, 255, 0.2);
  border-color: #00E5FF;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.nmd-ico {
  font-size: 14px;
  flex-shrink: 0;
}

/* Pantallas medianas, laptops y monitores con escala Windows 125%/150% (hasta 1680px): colapsar calculadora y valores en MÁS */
@media (min-width: 901px) and (max-width: 1680px) {
  .gaming-header .nav-item-secondary {
    display: none !important;
  }
  .nav-more-dropdown .nav-more-item-compact {
    display: flex !important;
  }
  .gaming-header .header-search {
    position: relative !important;
    width: 200px !important;
    flex: 0 1 200px !important;
  }
  .gaming-header .header-search input[type="search"] {
    font-size: 12px !important;
    padding: 0 42px 0 30px !important;
  }
  .gaming-nav {
    gap: 6px !important;
    margin: 0 14px 0 0 !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
  }
  .gaming-nav a,
  .nav-more-btn {
    font-size: 11.5px !important;
    padding: 5px 7px !important;
    letter-spacing: 0.2px !important;
  }
  .nav-bovedas-pill {
    padding: 4px 8px !important;
  }
  .gaming-header .header-actions {
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .currency-pill-btn {
    padding: 0 7px !important;
    font-size: 11.5px !important;
  }
  .gaming-header .login-btn {
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }
}

/* En laptops y pantallas a escala/zoom (ancho <= 1550px), compactacion inteligente fluida:
   Garantiza que .header-actions (donde esta el Login / Perfil) NUNCA se corte al 90% ni en ninguna escala */
@media (min-width: 901px) and (max-width: 1550px) {
  .gaming-header {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .gaming-header .header-search {
    position: relative !important;
    width: 180px !important;
    flex: 0 1 180px !important;
  }
  .gaming-header .search-kbd-hint {
    display: none !important;
  }
  .gaming-header .brand-sub {
    display: none !important;
  }
  .gaming-header .brand-title {
    font-size: 15px !important;
  }
  .gaming-nav {
    gap: 6px !important;
    margin: 0 14px 0 0 !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
  }
  .gaming-nav a,
  .nav-more-btn {
    font-size: 11.5px !important;
    padding: 5px 6px !important;
  }
}

.gaming-header {
  overflow: visible !important;
}

.gaming-header .header-actions {
  margin-left: auto !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  min-width: auto !important;
}

.gaming-header .user-area {
  flex-shrink: 0 !important;
}

.gaming-header .login-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.gaming-header .user-pill-dropdown {
  flex-shrink: 0 !important;
}

/* Reglas estrictas de alineación desktop (>= 901px) */
@media (min-width: 901px) {
  .gaming-header .search-toggle {
    display: none !important;
  }
  .gaming-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .gaming-header .login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important;
    height: 38px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  .gaming-header .login-btn:hover {
    background: #FFD700 !important;
    color: #0E1017 !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.4) !important;
  }
  .gaming-header .cart-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    color: #A6B4C9 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  .gaming-header .cart-btn:hover {
    color: #FFD700 !important;
    border-color: #FFD700 !important;
  }
  .currency-pill-btn {
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
  }
  .btn-canjear-pill {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
}

.gaming-cart-btn {
  background: rgba(255, 222, 0, 0.1);
  border: 1px solid rgba(255, 222, 0, 0.35);
  color: var(--amarillo-neon);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.gaming-cart-btn:hover {
  background: var(--amarillo-neon);
  color: #0E1017;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.5);
}

/* ===== HERO BANNER ===== */
.hero-banner-wrap {
  padding: 24px 32px 12px;
}

.hero-banner-inner {
  min-height: 480px;
  height: auto;
  padding: 40px 24px 32px;
  box-sizing: border-box;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 222, 0, 0.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.75);
}

.hero-banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/img/jailbreak_hero_bg.webp') center/cover no-repeat;
  filter: brightness(0.9);
  transition: transform 0.5s ease;
}

.hero-banner-inner:hover .hero-banner-bg {
  transform: scale(1.02);
}

.hero-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(14, 16, 23, 0.65) 0%, rgba(10, 11, 16, 0.92) 100%);
}

.hero-banner-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.hero-badge {
  font-family: var(--fuente-gaming);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--amarillo-neon);
  text-transform: uppercase;
  background: rgba(255, 222, 0, 0.1);
  border: 1px solid rgba(255, 222, 0, 0.3);
  padding: 5px 18px;
  border-radius: 20px;
  margin-bottom: 12px;
  box-shadow: 0 0 15px rgba(255, 222, 0, 0.2);
}

.hero-jailbreak-title {
  font-family: var(--fuente-gaming);
  font-size: 72px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  margin-bottom: 14px;
  text-shadow: 0 0 35px rgba(0, 0, 0, 0.85);
}

.hero-title-slash {
  display: block;
  width: 140px;
  height: 4px;
  background: linear-gradient(90deg, #FF2A4B, #FFDE00);
  margin: 10px auto 0;
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(255, 42, 75, 0.8);
}

.hero-tagline {
  font-size: 15px;
  color: #C5C8D8;
  max-width: 600px;
  margin-bottom: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.hero-categories-ticker {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(14, 16, 23, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  padding: 9px 24px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65);
}

.ticker-pill {
  color: var(--amarillo-neon);
  font-family: var(--fuente-gaming);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ticker-pill:hover {
  color: #FFFFFF;
  text-shadow: 0 0 10px #FFFFFF;
}

.ticker-dot {
  color: rgba(255, 255, 255, 0.3);
}

/* ===== 4 SHOWCASE CARDS (MOCKUP EXACT STYLE) ===== */
.mockup-cards-section {
  padding: 24px 32px 36px;
}

.cards-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.showcase-card {
  background: linear-gradient(180deg, #161824 0%, #10121B 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 26px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 222, 0, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 222, 0, 0.2);
}

.card-glow {
  position: absolute;
  top: -60px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.card-hypers .card-glow {
  background: radial-gradient(circle, rgba(157, 78, 221, 0.35) 0%, transparent 70%);
}

.card-rines .card-glow {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.25) 0%, transparent 70%);
}

.card-texturas .card-glow {
  background: radial-gradient(circle, rgba(255, 42, 75, 0.25) 0%, transparent 70%);
}

.card-img-wrap {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.card-img-wrap img {
  max-width: 90%;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s ease;
}

.showcase-card:hover .card-img-wrap img {
  transform: scale(1.06);
}

.card-info {
  text-align: center;
  z-index: 2;
}

.card-title-main {
  font-family: var(--fuente-gaming);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #FFFFFF;
  line-height: 1.1;
  text-transform: uppercase;
}

.card-title-sub {
  font-family: var(--fuente-gaming);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--amarillo-neon);
  text-transform: uppercase;
  margin-top: 4px;
  display: inline-block;
  text-shadow: 0 0 10px rgba(255, 222, 0, 0.4);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 960px) {
  .gaming-sidebar {
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(60px + env(safe-area-inset-bottom, 10px)) !important;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 10px)) !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    justify-content: stretch !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7) !important;
    background: rgba(11, 14, 22, 0.95) !important;
    backdrop-filter: none !important;
    z-index: 999 !important;
  }
  .sidebar-brand, .sidebar-footer {
   display: none !important;
 }
 .sidebar-item.desktop-only,
 .gaming-sidebar .sidebar-item[href="/robux"],
 .gaming-sidebar .sidebar-item[href="/creadores"] {
   display: none !important;
 }
 .sidebar-nav {
   box-sizing: border-box !important;
   display: flex !important;
   flex-direction: row !important;
   justify-content: space-around !important;
   align-items: center !important;
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   gap: 0 !important;
 }
 .sidebar-item {
   box-sizing: border-box !important;
   flex: 1 1 0 !important;
   max-width: none !important;
   width: auto !important;
   min-width: 0 !important;
   height: 52px !important;
   border-radius: 10px !important;
   position: relative !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
   background: transparent !important;
   box-shadow: none !important;
   border: none !important;
   color: #8E92A4 !important;
   text-decoration: none !important;
   cursor: pointer !important;
   transition: all 0.2s ease !important;
   padding: 0 2px !important;
   overflow: visible !important;
 }
 .sidebar-item .sidebar-icon {
   font-size: 20px !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   transition: all 0.2s ease !important;
 }
 .sidebar-item .sidebar-icon svg {
   width: 21px !important;
   height: 21px !important;
 }
 .sidebar-item .sidebar-label {
   display: block !important;
   font-family: 'Rajdhani', sans-serif !important;
   font-size: 11px !important;
   font-weight: 700 !important;
   letter-spacing: 0.3px !important;
   margin-top: 3px !important;
   line-height: 1 !important;
   color: inherit !important;
 }
 .dock-cart-btn {
   background: transparent !important;
   border: none !important;
   padding: 0 !important;
 }
 .dock-cart-icon-wrap {
   position: relative !important;
   display: inline-flex !important;
 }
 .dock-cart-badge {
   position: absolute !important;
   top: -6px !important;
   right: -10px !important;
   background: #FF3366 !important;
   color: #FFFFFF !important;
   font-size: 10px !important;
   font-weight: 800 !important;
   min-width: 17px !important;
   height: 17px !important;
   border-radius: 999px !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 0 4px !important;
   border: 1.5px solid #0B0F19 !important;
   box-shadow: 0 0 8px rgba(255, 51, 102, 0.7) !important;
 }
 .sidebar-item.active {
   color: #FFDE00 !important;
   background: transparent !important;
   box-shadow: none !important;
 }
 .sidebar-item.active .sidebar-icon {
   filter: drop-shadow(0 0 8px rgba(255, 222, 0, 0.7)) !important;
   transform: translateY(-2px) !important;
 }
 /* Indicador elegante de micro-línea superior para el tab activo */
 .sidebar-item.active::before {
   display: block !important;
   content: '' !important;
   position: absolute !important;
   top: -4px !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   width: 24px !important;
   height: 3px !important;
   background: #FFDE00 !important;
   border-radius: 2px !important;
   box-shadow: 0 0 10px #FFDE00 !important;
 }
  .site-main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 20px)) !important;
  }
  .gaming-nav {
    display: none;
  }
  .cards-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .hero-banner-wrap, .mockup-cards-section {
    padding: 16px;
  }
}

@media (max-width: 580px) {
  .hero-jailbreak-title {
    font-size: 42px;
  }
  .hero-banner-inner {
    height: 320px;
  }
  .cards-grid-4 {
    grid-template-columns: 1fr;
  }
  .hero-categories-ticker {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
  }
  .ticker-pill {
    font-size: 13px;
  }
}

/* ==========================================================================
   UPDATED VALUES & MARKET SECTION STYLES
   ========================================================================== */
.valores-section {
  padding: 30px 24px 60px;
  max-width: 1280px;
  margin: 0 auto;
}
.valores-section .home-section-head {
  text-align: center;
  margin-bottom: 28px;
}
.valores-section .home-section-head h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-transform: uppercase;
}
.valores-section .home-section-head p {
  font-family: var(--fuente) !important;
  color: #8E92A4;
  font-size: 15px;
  margin-top: 6px;
}

.valores-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}

.valor-fila {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(14, 18, 27, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: #FFFFFF;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
}
.valor-fila::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  transition: background 0.2s ease;
}
.valor-fila:hover {
  transform: translateX(8px);
  background: rgba(22, 27, 40, 0.95);
  border-color: rgba(255, 222, 0, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 222, 0, 0.15);
}
.valor-fila:hover::before {
  background: #FFDE00;
}

.valor-pos {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #555A70;
  min-width: 38px;
  text-align: center;
}
.valor-fila.rank-gold .valor-pos {
  color: #FFDE00;
  text-shadow: 0 0 10px rgba(255, 222, 0, 0.5);
}
.valor-fila.rank-silver .valor-pos {
  color: #E2E8F0;
  text-shadow: 0 0 10px rgba(226, 232, 240, 0.4);
}
.valor-fila.rank-bronze .valor-pos {
  color: #D97706;
}

.valor-thumb {
  width: 58px;
  height: 48px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  padding: 3px;
}
.valor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.valor-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.valor-nombre {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.valor-cat {
  font-size: 12px;
  color: #8E92A4;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.valor-datos {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.valor-monto {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #FFDE00;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(255, 222, 0, 0.25);
}

.valor-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.valor-delta .trend-ico {
  font-size: 15px;
  line-height: 1;
}
.valor-delta.subiendo {
  background: rgba(0, 255, 136, 0.12);
  color: #00FF88;
  border: 1px solid rgba(0, 255, 136, 0.35);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
}
.valor-delta.bajando {
  background: rgba(255, 42, 75, 0.12);
  color: #FF2A4B;
  border: 1px solid rgba(255, 42, 75, 0.35);
  box-shadow: 0 0 10px rgba(255, 42, 75, 0.15);
}
.valor-delta.estable {
  background: rgba(255, 222, 0, 0.1);
  color: #FFDE00;
  border: 1px solid rgba(255, 222, 0, 0.25);
}
.valor-delta.fluctuando {
  background: rgba(0, 240, 255, 0.1);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.25);
}

@media (max-width: 680px) {
  .valor-fila {
    display: grid !important;
    grid-template-columns: 28px 46px 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .valor-pos {
    font-size: 17px !important;
    min-width: 24px !important;
    text-align: center !important;
  }
  .valor-thumb {
    width: 46px !important;
    height: 42px !important;
  }
  .valor-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  .valor-nombre {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .valor-cat {
    font-size: 10.5px !important;
    color: #8E92A4 !important;
    text-transform: uppercase !important;
  }
  .valor-datos {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }
  .valor-monto {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #FFDE00 !important;
    line-height: 1 !important;
    text-align: right !important;
  }
  .valor-delta {
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   STREAMER & COMMUNITY HUB (MODERN GAMING OVERHAUL)
   ========================================================================== */
.inicio-streamer-section {
  max-width: 1240px;
  margin: 30px auto 40px;
  padding: 0 24px;
  position: relative;
}

.streamer-card {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 20, 30, 0.85) 0%, rgba(10, 12, 18, 0.95) 100%);
  border: 1px solid rgba(255, 222, 0, 0.2);
  border-radius: 24px;
  padding: 34px 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 222, 0, 0.05);
  backdrop-filter: none !important;
  overflow: hidden;
}

.streamer-perfil {
  display: flex;
  justify-content: center;
  align-items: center;
}

.streamer-avatar-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
}

.streamer-avatar-frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #FFDE00 0%, #7C3AED 50%, #00F0FF 100%);
  box-shadow: 0 0 25px rgba(255, 222, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.streamer-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: contrast(1.05) brightness(0.95);
}

.streamer-avatar-overlay {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 40%, rgba(10, 12, 18, 0.4) 100%);
  pointer-events: none;
}

.streamer-live-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(255, 42, 75, 0.6);
  padding: 4px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 42, 75, 0.35);
  z-index: 2;
}

.streamer-live-badge .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF2A4B;
  box-shadow: 0 0 8px #FF2A4B;
  animation: none !important; /* 0% GPU idle */
}

@keyframes livePulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px #FF2A4B; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.streamer-info {
  display: flex;
  flex-direction: column;
}

.streamer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(255, 222, 0, 0.1);
  border: 1px solid rgba(255, 222, 0, 0.3);
  border-radius: 999px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFDE00;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 8px;
}

.streamer-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: 8px;
}

.streamer-title-gold {
  color: #FFDE00;
  text-shadow: 0 0 16px rgba(255, 222, 0, 0.4);
}

.streamer-bio {
  color: #9AA0B6;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 22px;
  max-width: 700px;
}

.streamer-bio strong {
  color: #FFFFFF;
}

/* 4 Accesos Rápidos */
.streamer-accesos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.acceso-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(22, 27, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: #FFFFFF;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.acceso-card:hover {
  transform: translateY(-2px);
  background: rgba(28, 34, 52, 0.95);
  border-color: rgba(255, 222, 0, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 222, 0, 0.15);
}

.acceso-card-ico {
  font-size: 22px;
  flex-shrink: 0;
}

.acceso-card-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acceso-card-tit {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acceso-card-sub {
  font-size: 11px;
  color: #8E92A4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3 Tarjetas de Confianza */
.streamer-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.trust-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(16, 20, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  backdrop-filter: none;
}

.trust-ico {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex-shrink: 0;
}

.trust-content {
  display: flex;
  flex-direction: column;
}

.trust-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
}

.trust-desc {
  font-size: 12px;
  color: #8E92A4;
  margin-top: 2px;
}

/* Responsive Mobile Rules */
@media (max-width: 900px) {
  .site-main-wrapper {
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 20px)) !important;
  }
  .streamer-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px 20px;
    text-align: center;
  }
  .streamer-eyebrow {
    margin: 0 auto 10px;
  }
  .streamer-title {
    font-size: 32px;
  }
  .streamer-bio {
    margin: 0 auto 20px;
  }
  .streamer-accesos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .acceso-card {
    text-align: left;
  }
  .streamer-trust-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 500px) {
  .inicio-streamer-section {
    padding: 0 14px;
    margin: 20px auto 30px;
  }
  .streamer-card {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .streamer-avatar-wrapper {
    width: 140px;
    height: 140px;
  }
  .streamer-title {
    font-size: 28px;
  }
  .streamer-bio {
    font-size: 13px;
  }
  .streamer-accesos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .acceso-card {
    padding: 10px 12px;
    gap: 8px;
  }
  .acceso-card-ico {
    font-size: 18px;
  }
  .acceso-card-tit {
    font-size: 13px;
  }
  .acceso-card-sub {
    font-size: 10px;
  }
  .trust-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .trust-ico {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .trust-title {
    font-size: 14px;
  }
  .trust-desc {
    font-size: 11px;
  }
}

/* ==========================================================================
   HOMEPAGE SECTIONS & PRODUCT CARDS — GAMING OVERHAUL
   ========================================================================== */
.home-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 24px;
}

.home-section-head {
  text-align: center;
  margin-bottom: 30px;
}

.home-section-head h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-transform: uppercase;
}

.home-section-head p {
  font-family: var(--fuente) !important;
  color: #8E92A4;
  font-size: 15px;
  margin-top: 6px;
}

/* Category cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.cat-card {
  background: linear-gradient(165deg, rgba(22, 27, 40, 0.85), rgba(12, 15, 23, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex;
  flex-direction: column;
}

.cat-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 222, 0, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 222, 0, 0.15) !important;
}

.cat-card-img {
  height: 120px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.cat-card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.cat-card-body {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cat-card-nombre {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.5px;
}

.cat-card-meta {
  color: #8E92A4 !important;
  font-size: 13px !important;
  margin-top: 4px;
}

/* Product cards */
.producto-card {
  background: linear-gradient(165deg, rgba(20, 24, 36, 0.9), rgba(11, 14, 21, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.producto-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 222, 0, 0.4) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 222, 0, 0.15) !important;
}

.producto-card.tier-top {
  border-color: rgba(255, 222, 0, 0.35) !important;
}
.producto-card.tier-top:hover {
  border-color: #FFDE00 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 222, 0, 0.3) !important;
}

/* sin-stock overlay: neutralizado — ya definido arriba con diseño pro */
.producto-card.sin-stock .producto-img::after {
  content: '' !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tier-sello.top {
  color: #FFDE00 !important;
  background: rgba(255, 222, 0, 0.12) !important;
  border: 1px solid rgba(255, 222, 0, 0.5) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
}
.tier-sello.medio {
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.5) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
}
.tier-sello.normal {
  color: #8E92A4 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
}

.stock-badge.hay {
  background: rgba(0, 255, 136, 0.12) !important;
  color: #00FF88 !important;
  border: 1px solid rgba(0, 255, 136, 0.35) !important;
  font-weight: 700 !important;
}
.stock-badge.nohay {
  background: rgba(255, 42, 75, 0.12) !important;
  color: #FF2A4B !important;
  border: 1px solid rgba(255, 42, 75, 0.35) !important;
  font-weight: 700 !important;
}

.producto-nombre {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
}

.pv-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}
.pv-real {
  background: rgba(255, 222, 0, 0.1) !important;
  color: #FFDE00 !important;
  border: 1px solid rgba(255, 222, 0, 0.3) !important;
}
.pv-clean,
#itemCleanBadge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.16) 0%, rgba(0, 255, 136, 0.12) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25) !important;
  color: #00F0FF !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.pv-dupe {
  background: rgba(255, 42, 75, 0.1) !important;
  color: #FF2A4B !important;
  border: 1px solid rgba(255, 42, 75, 0.3) !important;
}

.precio-normal, .precio-oferta {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #FFDE00 !important;
  letter-spacing: 0.5px !important;
}

.producto-card .btn-comprar {
  background: linear-gradient(135deg, #FFDE00, #E6C800) !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  padding: 11px 18px !important;
  box-shadow: 0 4px 15px rgba(255, 222, 0, 0.25) !important;
  text-align: center !important;
  margin-top: auto !important;
  transition: all 0.2s ease !important;
}
.producto-card:hover .btn-comprar {
  background: #FFF066 !important;
  box-shadow: 0 6px 22px rgba(255, 222, 0, 0.45) !important;
}

/* Trust grid */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.trust-section .trust-card {
  background: rgba(16, 20, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: all 0.25s ease !important;
}
.trust-section .trust-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 222, 0, 0.35) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

.trust-section .trust-ico {
  font-size: 28px !important;
  margin-bottom: 12px !important;
  width: 50px !important;
  height: 50px !important;
}

.trust-section .trust-card h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}

.trust-section .trust-card p {
  color: #8E92A4 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Benefits section */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.benefit-item {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 18px 24px !important;
  background: rgba(16, 20, 30, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
}

.benefit-num {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FFDE00, #FF9900) !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 15px rgba(255, 222, 0, 0.4) !important;
}

.benefit-item h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 4px !important;
}

.benefit-item p {
  color: #8E92A4 !important;
  font-size: 14px !important;
}

.benefits-policy {
  text-align: center;
  margin-top: 24px;
  padding: 14px 20px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 12px;
  color: #00FF88;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Games Grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.game-card {
  background: linear-gradient(165deg, rgba(20, 24, 36, 0.85), rgba(12, 15, 23, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}

.game-card:hover {
  border-color: rgba(255, 222, 0, 0.4) !important;
  transform: translateY(-4px) !important;
}

.game-card h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 10px 0 !important;
}

.game-link {
  display: inline-block;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
}
.game-link:hover {
  text-decoration: underline !important;
}

/* FAQ (Master styling consolidated in FAQ Accordion Gamer section) */

@media (max-width: 768px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .games-grid {
    grid-template-columns: 1fr !important;
  }
  .home-section-head h2 {
    font-size: 26px !important;
  }
}

@media (max-width: 480px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cat-card-img {
    height: 90px !important;
  }
  .cat-card-nombre {
    font-size: 15px !important;
  }
  .cat-card-meta {
    font-size: 11px !important;
  }
  .producto-nombre {
    font-size: 18px !important;
  }
  .precio-normal, .precio-oferta {
    font-size: 20px !important;
  }
  .benefit-item {
    padding: 14px 16px !important;
    gap: 14px !important;
  }
  .benefit-num {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
  }
  .benefit-item h3 {
    font-size: 16px !important;
  }
  .benefit-item p {
    font-size: 12px !important;
  }
}

/* Compact Streamer Card for Mobile */
@media (max-width: 900px) {
  .inicio-streamer-section {
    padding: 0 16px;
    margin: 20px auto 25px;
  }
  .streamer-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(20, 24, 36, 0.9) 0%, rgba(12, 14, 22, 0.95) 100%) !important;
    border: 1px solid rgba(255, 222, 0, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 222, 0, 0.05) !important;
  }
  .streamer-perfil {
    flex-shrink: 0 !important;
  }
  .streamer-avatar-wrapper {
    width: 68px !important;
    height: 68px !important;
  }
  .streamer-avatar-frame {
    padding: 2.5px !important;
    box-shadow: 0 0 15px rgba(255, 222, 0, 0.4) !important;
  }
  .streamer-live-badge {
    bottom: -6px !important;
    padding: 2px 7px !important;
    font-size: 8.5px !important;
    gap: 4px !important;
    letter-spacing: 0.5px !important;
  }
  .streamer-live-badge .live-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .streamer-info {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .streamer-eyebrow {
    font-size: 10px !important;
    padding: 2px 8px !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    letter-spacing: 0.5px !important;
  }
  .streamer-title {
    font-size: 22px !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }
  .streamer-bio {
    display: none !important;
  }
  .streamer-accesos-grid {
    display: none !important;
  }
  .streamer-mobile-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .streamer-btn-mobile {
    padding: 6px 14px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
  }
  .streamer-btn-mobile.primary {
    background: #FFDE00 !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(255, 222, 0, 0.3) !important;
  }
  .streamer-btn-mobile.secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFF !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .streamer-trust-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
}

@media (min-width: 901px) {
  .streamer-mobile-actions {
    display: none !important;
  }
}

/* ==========================================================================
   DESKTOP BUTTON & CRO ENHANCEMENTS (GPU ACCELERATED · NO JITTER)
   ========================================================================== */

/* 1. Suavizado de elevación de la tarjeta */
.producto-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* will-change removed */
}

.producto-card:hover {
  transform: translateY(-6px) !important;
}

/* 2. Botón COMPRAR: CERO transform para eliminar el conflicto de coordenadas */
.producto-card .btn-comprar {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: auto !important;
  white-space: nowrap !important;
  text-align: center !important;
  background: linear-gradient(135deg, #FFDE00 0%, #F5C518 100%) !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  padding: 11px 12px !important;
  box-shadow: 0 4px 15px rgba(255, 222, 0, 0.3) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
  transform: none !important; /* Elimina micro-salto / jitter */
}

@media (max-width: 700px) {
  .producto-card .btn-comprar {
    font-size: 11.5px !important;
    letter-spacing: 0.3px !important;
    padding: 9px 6px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
}

/* Efecto destello (Shine) acelerado por GPU con transform: translateX */
.producto-card .btn-comprar::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%) !important;
  transform: translateX(-100%) skewX(-20deg) !important;
  /* will-change removed */
  pointer-events: none !important;
}

.producto-card:hover .btn-comprar {
  background: #FFF066 !important;
  box-shadow: 0 6px 25px rgba(255, 222, 0, 0.55) !important;
}

.producto-card:hover .btn-comprar::after {
  animation: mtxShineGPU 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes mtxShineGPU {
  0%   { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(120%) skewX(-20deg); }
}

/* 3. Botón para producto AGOTADO (Sobrio, secundario, sin engaño visual) */
.producto-card.sin-stock .btn-comprar {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #8E92A4 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.producto-card.sin-stock:hover .btn-comprar {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.producto-card.sin-stock .btn-comprar::after {
  display: none !important;
}

/* 4. Badges de urgencia psicológica y escasez */
.stock-badge.urgente {
  background: rgba(255, 42, 75, 0.15) !important;
  color: #FF2A4B !important;
  border: 1px solid rgba(255, 42, 75, 0.4) !important;
  font-weight: 800 !important;
  animation: none !important; /* 0% GPU idle */
}
@keyframes pulseUrgente {
  0%   { box-shadow: 0 0 0 0 rgba(255, 42, 75, 0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 42, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 42, 75, 0); }
}

.stock-badge.limitado {
  background: rgba(255, 170, 0, 0.15) !important;
  color: #FFAA00 !important;
  border: 1px solid rgba(255, 170, 0, 0.4) !important;
  font-weight: 800 !important;
}

.stock-badge.hay {
  background: rgba(0, 255, 136, 0.12) !important;
  color: #00FF88 !important;
  border: 1px solid rgba(0, 255, 136, 0.35) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   VIP CATALOG BUTTON & MODERN PRODUCT DETAIL (HUD GARAJE)
   ========================================================================== */

/* 1. Botón CTA VIP para el Catálogo Completo en la Home */
.home-cta {
  text-align: center !important;
  margin: 32px 0 16px !important;
}

.btn-catalogo-vip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 36px !important;
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.12) 0%, rgba(124, 58, 237, 0.15) 100%) !important;
  border: 1px solid rgba(255, 222, 0, 0.45) !important;
  border-radius: 999px !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 222, 0, 0.15) !important;
  backdrop-filter: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-catalogo-vip::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%) !important;
  transform: translateX(-100%) skewX(-20deg) !important;
  /* will-change removed */
}

.btn-catalogo-vip:hover {
  background: linear-gradient(135deg, #FFDE00 0%, #F5C518 100%) !important;
  color: #000000 !important;
  border-color: #FFDE00 !important;
  box-shadow: 0 10px 35px rgba(255, 222, 0, 0.4), 0 0 30px rgba(255, 222, 0, 0.3) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.btn-catalogo-vip:hover::after {
  animation: mtxShineGPU 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.btn-vip-icon, .btn-vip-arrow {
  font-size: 18px !important;
  transition: transform 0.2s ease !important;
}
.btn-catalogo-vip:hover .btn-vip-arrow {
  transform: translateX(4px) !important;
}

@media (max-width: 600px) {
  .btn-catalogo-vip {
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
  }
}

/* 2. Cabecera Moderna de Categoría */
.cat-eyebrow {
  display: inline-block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #FFDE00 !important;
  background: rgba(255, 222, 0, 0.1) !important;
  border: 1px solid rgba(255, 222, 0, 0.3) !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 8px !important;
}

.tabs-titulo {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
}

/* 3. Página de Detalle de Ítem (HUD Garaje Gaming) */
.item-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #8E92A4 !important;
  margin-bottom: 8px !important;
}

.item-titulo {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
}

.item-subhead {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 12px 0 16px !important;
}

.detalle-valores-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.dv-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
}

.dv-real {
  background: rgba(255, 222, 0, 0.12) !important;
  color: #FFDE00 !important;
  border: 1px solid rgba(255, 222, 0, 0.35) !important;
}

.dv-real strong {
  font-size: 16px !important;
  font-weight: 800 !important;
}

.dv-clean,
.detalle-valores-wrap .dv-clean {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00FF88 !important;
  background: rgba(0, 255, 136, 0.1) !important;
  border: 1px solid rgba(0, 255, 136, 0.35) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
}

.dv-clean strong,
.detalle-valores-wrap .dv-clean strong {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #00FF88 !important;
}

.dv-dupe {
  background: rgba(255, 42, 75, 0.12) !important;
  color: #FF2A4B !important;
  border: 1px solid rgba(255, 42, 75, 0.35) !important;
}

.item-actions-row {
  display: flex !important;
  gap: 12px !important;
  margin: 20px 0 24px !important;
}

.item-actions-row .item-btn {
  flex: 1 1 auto !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
}

.item-actions-row .btn-add-cart {
  flex: 1 1 auto !important;
  padding: 14px 24px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.item-actions-row .btn-add-cart:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #FFDE00 !important;
  color: #FFDE00 !important;
}

.btn-restock-link {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  color: #C084FC !important;
}

/* 4. Ficha Técnica HUD Garaje */
.item-ficha {
  max-width: 960px !important;
  margin: 36px auto 0 !important;
  background: linear-gradient(135deg, rgba(16, 20, 32, 0.85) 0%, rgba(10, 12, 18, 0.95) 100%) !important;
  border: 1px solid rgba(255, 222, 0, 0.2) !important;
  border-radius: 20px !important;
  padding: 28px 32px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 222, 0, 0.05) !important;
}

.ficha-titulo {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #FFFFFF !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ficha-titulo::before {
  content: '⚡' !important;
  color: #FFDE00 !important;
}

.ficha-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}

.ficha-celda {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  transition: border-color 0.2s ease !important;
}

.ficha-celda:hover {
  border-color: rgba(255, 222, 0, 0.4) !important;
}

.ficha-celda .fc-id {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #8E92A4 !important;
}

.ficha-celda strong {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

@media (max-width: 850px) {
  .ficha-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .item-actions-row {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   BENTO HUB CATEGORIES (HOME) & PRO HUD PRODUCT DETAIL
   ========================================================================== */

/* 1. Bento Grid para Categorías Principales */
.bento-cat-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  gap: 20px !important;
  margin: 24px auto 28px !important;
  max-width: 1240px !important;
}

.bento-card {
  position: relative !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 220px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(145deg, rgba(20, 24, 36, 0.85) 0%, rgba(10, 12, 18, 0.95) 100%) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7) !important;
}

.bento-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  margin-bottom: 16px !important;
}

.bento-vehiculos .bento-badge {
  background: rgba(255, 222, 0, 0.15) !important;
  color: #FFDE00 !important;
  border: 1px solid rgba(255, 222, 0, 0.4) !important;
}

.bento-hypers .bento-badge {
  background: rgba(124, 58, 237, 0.2) !important;
  color: #C084FC !important;
  border: 1px solid rgba(124, 58, 237, 0.5) !important;
}

.bento-tuning .bento-badge {
  background: rgba(0, 240, 255, 0.15) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
}

.bento-content h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

.bento-content p {
  font-size: 13.5px !important;
  color: #8E92A4 !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

.bento-link {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #FFDE00 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: transform 0.2s ease !important;
}

.bento-card:hover .bento-link {
  transform: translateX(4px) !important;
}

.bento-glow {
  position: absolute !important;
  top: -50px !important;
  right: -50px !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  filter: none !important;
  opacity: 0.2 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.bento-card:hover .bento-glow {
  opacity: 0.45 !important;
}

.bento-vehiculos .bento-glow { background: #FFDE00 !important; }
.bento-hypers .bento-glow { background: #7C3AED !important; }
.bento-tuning .bento-glow { background: #00F0FF !important; }

/* 2. Riel de Chips Táctiles (Swipe Horizontal en Celular) */
.cat-chips-wrapper {
  max-width: 1240px !important;
  margin: 0 auto 24px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.chips-label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8E92A4 !important;
  white-space: nowrap !important;
}

.cat-chips-rail {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  padding-bottom: 6px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.cat-chips-rail::-webkit-scrollbar {
  display: none !important;
}

.cat-chip {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #E2E8F0 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.cat-chip:hover {
  background: rgba(255, 222, 0, 0.12) !important;
  border-color: rgba(255, 222, 0, 0.4) !important;
  color: #FFDE00 !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 900px) {
  .bento-cat-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }
  .bento-card {
    min-height: auto !important;
    padding: 20px !important;
  }
}

/* 3. HUD de Telemetría con Barras Gráficas en Ficha de Producto */
.item-hud-telemetria {
  background: linear-gradient(145deg, rgba(16, 20, 32, 0.9) 0%, rgba(10, 12, 18, 0.96) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  border-radius: 18px !important;
  padding: 20px 24px !important;
  margin: 22px 0 !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.05) !important;
}

.hud-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hud-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #00F0FF !important;
}

.hud-status {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #3DDC84 !important;
}

.hud-bars-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.hud-stat-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.hud-stat-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.hud-stat-label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8E92A4 !important;
}

.hud-stat-val {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.hud-bar-track {
  width: 100% !important;
  height: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
}

.hud-bar-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hud-bar-fill.hud-speed {
  background: linear-gradient(90deg, #00F0FF 0%, #FFDE00 100%) !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
}

.hud-bar-fill.hud-accel {
  background: linear-gradient(90deg, #7C3AED 0%, #00F0FF 100%) !important;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5) !important;
}

.hud-bar-fill.hud-handling {
  background: linear-gradient(90deg, #00FF88 0%, #FFDE00 100%) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5) !important;
}

.hud-bar-fill.hud-brakes {
  background: linear-gradient(90deg, #FF2A4B 0%, #FFDE00 100%) !important;
  box-shadow: 0 0 10px rgba(255, 42, 75, 0.5) !important;
}

.hud-bar-fill.hud-generic {
  background: linear-gradient(90deg, #FFDE00 0%, #FFAA00 100%) !important;
}

/* 4. TheMorotex Pro-Tip Box */
.themorotex-protip-box {
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.08) 0%, rgba(12, 15, 24, 0.95) 100%) !important;
  border: 1px solid rgba(255, 222, 0, 0.3) !important;
  border-left: 4px solid #FFDE00 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 20px 0 !important;
}

.protip-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #FFDE00 !important;
  margin-bottom: 6px !important;
}

.protip-txt {
  font-size: 13.5px !important;
  color: #E2E8F0 !important;
  line-height: 1.55 !important;
  font-style: italic !important;
}

/* 5. Guía de Entrega en 3 Pasos */
.item-steps-guide {
  background: rgba(16, 20, 32, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  margin: 22px 0 !important;
}

.steps-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.5px !important;
}

.steps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

.step-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}

.step-num {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #FFDE00 !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.step-info strong {
  display: block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 2px !important;
}

.step-info span {
  font-size: 11.5px !important;
  color: #8E92A4 !important;
  line-height: 1.4 !important;
  display: block !important;
}

@media (max-width: 700px) {
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* 6. Mobile Sticky Buy Bar */
.mobile-sticky-buy-bar {
  display: none !important;
}

@media (max-width: 900px) {
  .mobile-sticky-buy-bar {
    display: flex !important;
    position: fixed !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 10px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 998 !important;
    background: rgba(12, 15, 24, 0.95) !important;
    backdrop-filter: none !important;
    border-top: 1px solid rgba(255, 222, 0, 0.3) !important;
    padding: 10px 18px !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.6) !important;
  }

  .sticky-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  .sticky-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sticky-price {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #FFDE00 !important;
  }

  .btn-sticky-buy {
    padding: 8px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   FASE 1: CONVERSIÓN, CONFIANZA & TRANSMISIÓN EN VIVO
   1. LIVE STREAM RIBBON
   2. SOCIAL PROOF TOAST POPUPS
   3. MURO DE CONFIANZA & ENTREGAS REALES (VOUCHES)
   ========================================================================== */

/* ===== 1. LIVE STREAM RIBBON ===== */
.live-stream-ribbon {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.16) 0%, rgba(124, 58, 237, 0.22) 50%, rgba(239, 68, 68, 0.16) 100%);
  border-bottom: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.12);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 85;
  transition: all 0.3s ease;
}

.live-stream-ribbon.ribbon-dismissed {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.live-ribbon-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 999px;
  padding: 3px 10px;
}

.live-dot-ping {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #EF4444;
  animation: none !important; /* 0% GPU idle */
}

.live-dot-core {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #EF4444;
  box-shadow: 0 0 10px #EF4444;
}

.live-pulse-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FCA5A5;
  text-transform: uppercase;
}

.live-ribbon-divider {
  color: rgba(255, 255, 255, 0.25);
  font-size: 13px;
}

.live-ribbon-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #FFFFFF;
}

.live-ribbon-title strong {
  color: #FFDE00;
  text-shadow: 0 0 12px rgba(255, 222, 0, 0.35);
}

.live-ribbon-sub {
  font-size: 13px;
  color: #CBD5E1;
  font-weight: 500;
  margin-left: 4px;
}

.live-ribbon-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.live-stream-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.live-stream-btn.btn-kick {
  background: #53FC18;
  color: #000000;
  box-shadow: 0 0 12px rgba(83, 252, 24, 0.35);
}
.live-stream-btn.btn-kick:hover {
  background: #68ff33;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(83, 252, 24, 0.6);
}

.live-stream-btn.btn-youtube {
  background: rgba(255, 0, 0, 0.18);
  color: #FFA5A5;
  border: 1px solid rgba(255, 0, 0, 0.4);
}
.live-stream-btn.btn-youtube:hover {
  background: #FF0000;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

.live-stream-btn.btn-tiktok {
  background: #000000;
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 12px rgba(254, 44, 85, 0.35);
}
.live-stream-btn.btn-tiktok:hover {
  background: #FE2C55;
  color: #FFFFFF;
  border-color: #FE2C55;
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(254, 44, 85, 0.7);
}

.live-stream-btn.btn-twitch {
  background: rgba(145, 70, 255, 0.18);
  color: #D8B4FE;
  border: 1px solid rgba(145, 70, 255, 0.4);
}
.live-stream-btn.btn-twitch:hover {
  background: #9146FF;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.5);
}

.live-ribbon-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border-radius: 8px;
  touch-action: manipulation;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.live-ribbon-close:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}
.live-ribbon-close:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.96);
}

@keyframes livePing {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-50%) scale(2.4);
    opacity: 0;
  }
}

/* ===== 2. SOCIAL PROOF TOAST POPUPS ===== */
.social-toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  left: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}

.social-toast-card {
  pointer-events: auto;
  position: relative;
  background: rgba(15, 18, 28, 0.95);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 222, 0, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(124, 58, 237, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.social-toast-card:hover {
  border-color: rgba(255, 222, 0, 0.6);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 222, 0, 0.25);
}

.social-toast-card.animate-enter {
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.social-toast-card.animate-exit {
  animation: toastSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

.social-toast-left {
  flex-shrink: 0;
}

.social-toast-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: inset 0 0 10px rgba(255, 222, 0, 0.1);
}

.social-toast-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.social-toast-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.social-toast-tit {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #FFDE00;
  line-height: 1.2;
}

.social-toast-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(61, 220, 132, 0.15);
  color: #3DDC84;
  border: 1px solid rgba(61, 220, 132, 0.35);
  white-space: nowrap;
}

.social-toast-msg {
  font-size: 12.5px;
  color: #E2E8F0;
  line-height: 1.35;
  margin: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-toast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border-radius: 8px;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.social-toast-close:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}
.social-toast-close:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.96);
}

/* ===== 3. MURO DE CONFIANZA & ENTREGAS REALES (VOUCHES) ===== */
.vouches-section {
  position: relative;
  max-width: 1240px;
  margin: 40px auto;
  padding: 0 24px;
}

.vouches-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.vouch-stat-card {
  background: rgba(16, 20, 32, 0.85);
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--morado);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.vouch-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 222, 0, 0.4);
  border-top-color: #FFDE00;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 222, 0, 0.15);
}

.vouch-stat-icon {
  font-size: 26px;
  margin-bottom: 8px;
}

.vouch-stat-number {
  font-family: 'Rajdhani', sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #FFDE00;
  line-height: 1.1;
  text-shadow: 0 0 18px rgba(255, 222, 0, 0.35);
  margin-bottom: 4px;
}

.vouch-stat-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.vouch-stat-sub {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.3;
}

.vouches-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.vouch-card {
  background: rgba(16, 20, 32, 0.85);
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.vouch-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 0, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.vouch-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(124, 58, 237, 0.15);
}

.vouch-card:hover::before {
  opacity: 1;
}

.vouch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vouch-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vouch-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.vouch-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 222, 0, 0.4);
  background: #141724;
}

.vouch-check-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #3DDC84;
  color: #000000;
  font-size: 10px;
  font-weight: 900;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0E1017;
}

.vouch-username {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  display: block;
  word-break: break-word;
  overflow-wrap: break-word;
}

.vouch-country {
  font-size: 12px;
  color: #94A3B8;
  display: block;
}

.vouch-stars {
  color: #FFDE00;
  font-size: 16px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 222, 0, 0.4);
}

.vouch-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.35);
  color: #DDD6FE;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
}

.vouch-badge-ico {
  font-size: 14px;
}

.vouch-comment {
  font-size: 14px;
  color: #E2E8F0;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.vouch-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
}

.vouch-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.vouch-tag.heli-tag {
  background: rgba(0, 240, 255, 0.12);
  color: #38BDF8;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.vouch-tag.vip-tag {
  background: rgba(255, 222, 0, 0.12);
  color: #FFDE00;
  border: 1px solid rgba(255, 222, 0, 0.3);
}

.vouch-tag.stream-tag {
  background: rgba(239, 68, 68, 0.14);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.vouch-tag.clean-tag {
  background: rgba(61, 220, 132, 0.12);
  color: #4ADE80;
  border: 1px solid rgba(61, 220, 132, 0.3);
}

.vouch-time {
  color: #64748B;
  font-size: 12px;
}

.vouches-cta-box {
  background: linear-gradient(135deg, rgba(20, 24, 38, 0.9) 0%, rgba(30, 25, 50, 0.9) 100%);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.vouches-cta-text strong {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

.vouches-cta-text p {
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0;
}

.vouches-cta-text code {
  color: #FFDE00;
  background: rgba(255, 222, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.vouches-cta-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-vouch-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #5865F2;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.35);
  white-space: nowrap;
}
.btn-vouch-discord:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(88, 101, 242, 0.55);
}

.btn-vouch-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-vouch-all:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 222, 0, 0.4);
  color: #FFDE00;
  transform: translateY(-2px);
}

/* ===== DEDICATED /VOUCHES PAGE ===== */
.vouches-page-wrap {
  max-width: 1240px;
  margin: 0 auto 60px;
  padding: 24px;
}

.vouches-hero-header {
  text-align: center;
  max-width: 820px;
  margin: 20px auto 40px;
}

.vouches-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 8px 0 14px;
  text-transform: uppercase;
}

.vouches-hero-desc {
  font-size: 16px;
  color: #94A3B8;
  line-height: 1.6;
}

.vouches-guarantees-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
  margin-bottom: 34px;
}

.vouch-guarantee-card {
  background: rgba(16, 20, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.25s ease;
}
.vouch-guarantee-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 222, 0, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.vouch-guarantee-card .guarantee-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.vouch-guarantee-card h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.vouch-guarantee-card p {
  font-size: 13px;
  color: #8E92A4;
  line-height: 1.5;
}

.vouches-bottom-cta {
  text-align: center;
  margin-top: 30px;
}

/* ===== RESPONSIVE RULES FOR FASE 1 ===== */
@media (max-width: 1024px) {
  .vouches-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .vouches-guarantees-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .social-toast-container {
    left: 14px;
    right: 14px;
    bottom: calc(75px + env(safe-area-inset-bottom, 10px));
    max-width: calc(100vw - 28px);
  }
}

@media (max-width: 768px) {
  .live-stream-ribbon {
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  .live-ribbon-content {
    justify-content: center;
    text-align: center;
  }
  .live-ribbon-sub {
    display: none;
  }
  .live-ribbon-actions {
    margin-top: 4px;
  }
  .vouches-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .vouches-cta-box {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .vouches-cta-buttons {
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  .btn-vouch-discord,
  .btn-vouch-all {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }
  .vouches-hero-title {
    font-size: 28px;
  }
}

@media (max-width: 520px) {
  .vouches-stats-bar {
    grid-template-columns: 1fr;
  }
  .vouches-guarantees-grid {
    grid-template-columns: 1fr;
  }
  .vouch-stat-number {
    font-size: 30px;
  }
  .live-ribbon-actions .btn-twitch {
    display: none;
  }
}

/* ==========================================================================
   FASE 2: CALCULADORA DE TRADEOS W/F/L (Win / Fair / Lose)
   ========================================================================== */

.trade-page-wrap,
.valores-page-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  position: relative;
  z-index: 10;
}

/* Hero Headers */
.trade-hero-header,
.valores-hero-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 36px;
}

.trade-hero-title,
.valores-hero-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  margin: 10px 0 14px;
  background: linear-gradient(135deg, #FFFFFF 20%, #E2E8F0 60%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.trade-hero-desc,
.valores-hero-desc {
  font-size: 15px;
  color: #94A3B8;
  line-height: 1.6;
  margin: 0 auto 20px;
  max-width: 720px;
}

.trade-hero-pills,
.valores-hero-pills {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tpill-item,
.vhero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: none;
}

.tpill-btn {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.tpill-btn:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.45);
  color: #00F0FF;
  transform: translateY(-1px);
}

/* Modal Glosario de Términos */
.mtx-modal-glosario-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: none !important;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-glosario-card {
  background: #0E111A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  color-scheme: dark;
  animation: picker-modal-in 0.22s ease-out;
}

.mglosario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: #0E111A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.mglosario-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mglosario-ico {
  font-size: 22px;
}

.mglosario-title {
  font-size: 17px;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0;
}

.mglosario-body {
  padding: 18px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.mglosario-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 16px;
}

.mglosario-term {
  font-size: 13px;
  font-weight: 800;
  color: #FFDE00;
  display: block;
  margin-bottom: 4px;
}

.mglosario-item p {
  font-size: 12px;
  color: #CBD5E1;
  line-height: 1.5;
  margin: 0;
}

.mglosario-footer {
  padding: 14px 24px;
  background: #0E111A;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.tpill-dot.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Quick Presets de Tradeo */
.trade-presets-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.tpreset-label {
  font-size: 11px;
  font-weight: 800;
  color: #FFAA00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tpreset-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-tpreset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-tpreset:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

/* Botón Invertir Lados (Swap) */
.trade-swap-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: -6px;
}
.btn-swap-sides {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 22, 34, 0.9);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #FFDE00;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  touch-action: manipulation;
}
.btn-swap-sides:hover {
  background: rgba(255, 222, 0, 0.15);
  border-color: #FFDE00;
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.35);
}
.btn-swap-sides .swap-icon {
  font-size: 15px;
  transition: transform 0.3s ease;
}
.btn-swap-sides:hover .swap-icon {
  transform: rotate(180deg);
}

/* Modo Selección Múltiple en Picker */
.picker-mode-wrap {
  display: flex;
  align-items: center;
}

/* Selector de Lado en Picker (Lado A / Lado B) */
.picker-target-switcher {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 3px;
  gap: 3px;
  margin-top: 4px;
}
.pts-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}
.pts-btn.active[data-side="A"] {
  background: rgba(0, 229, 255, 0.18);
  border-color: rgba(0, 229, 255, 0.5);
  color: #00E5FF;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}
.pts-btn.active[data-side="B"] {
  background: rgba(255, 222, 0, 0.18);
  border-color: rgba(255, 222, 0, 0.5);
  color: #FFDE00;
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.25);
}

/* Badges de Demanda y Precios en Picker */
.picker-demanda-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.picker-demanda-chip.dem-muy-alta { color: #FF3366; background: rgba(255, 51, 102, 0.14); border: 1px solid rgba(255, 51, 102, 0.3); }
.picker-demanda-chip.dem-alta { color: #00E676; background: rgba(0, 230, 118, 0.14); border: 1px solid rgba(0, 230, 118, 0.3); }
.picker-demanda-chip.dem-media { color: #FFDE00; background: rgba(255, 222, 0, 0.14); border: 1px solid rgba(255, 222, 0, 0.3); }
.picker-demanda-chip.dem-baja { color: #00E5FF; background: rgba(0, 229, 255, 0.14); border: 1px solid rgba(0, 229, 255, 0.3); }
.picker-demanda-chip.dem-muy-baja { color: #94A3B8; background: rgba(255, 255, 255, 0.05); }

.picker-precio-tag {
  font-size: 10px;
  font-weight: 700;
  color: #FFDE00;
  margin-left: 6px;
  background: rgba(255, 222, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 222, 0, 0.25);
}

/* Estados de Espera de Veredicto (Waiting State) */
.verdict-waiting-b {
  border-color: rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15) !important;
}
.verdict-waiting-b #tradeVerdictBadge {
  color: #00E5FF !important;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}
.verdict-waiting-a {
  border-color: rgba(255, 222, 0, 0.35) !important;
  box-shadow: 0 0 20px rgba(255, 222, 0, 0.15) !important;
}
.verdict-waiting-a #tradeVerdictBadge {
  color: #FFDE00 !important;
  text-shadow: 0 0 14px rgba(255, 222, 0, 0.4);
}
.hud-waiting .hud-verdict-pill,
.hud-waiting .hud-verdict-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #E2E8F0 !important;
}
.picker-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 9999px;
  transition: all 0.2s ease;
}
.picker-mode-switch input {
  display: none;
}
.picker-mode-switch .pms-slider {
  width: 26px;
  height: 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  position: relative;
  transition: background 0.2s ease;
}
.picker-mode-switch .pms-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.picker-mode-switch input:checked + .pms-slider {
  background: #00E676;
}
.picker-mode-switch input:checked + .pms-slider::after {
  transform: translateX(11px);
}
.picker-mode-switch:has(input:checked) {
  border-color: rgba(0, 230, 118, 0.4);
  background: rgba(0, 230, 118, 0.1);
  color: #00E676;
}
.card-selected-flash {
  animation: cardSelectedPulse 0.7s ease !important;
}
@keyframes cardSelectedPulse {
  0% { transform: scale(1); border-color: #00E676; box-shadow: 0 0 0 rgba(0, 230, 118, 0); }
  50% { transform: scale(1.05); border-color: #00E676; box-shadow: 0 0 20px rgba(0, 230, 118, 0.6); }
  100% { transform: scale(1); }
}

/* Acordeón de Reglas Oficiales */
.trade-rules-section {
  width: 100%;
  max-width: 1100px;
  margin: 36px auto 0;
}
.trade-rules-accordion {
  background: rgba(14, 18, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: none !important;
}
.trade-rules-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.trade-rules-summary::-webkit-details-marker {
  display: none;
}
.trs-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trs-icon {
  font-size: 20px;
}
.trs-title {
  font-size: 15px;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.2px;
}
.trs-arrow {
  font-size: 12px;
  color: #64748B;
  transition: transform 0.25s ease;
}
.trade-rules-accordion[open] .trs-arrow {
  transform: rotate(180deg);
  color: #FFDE00;
}
.trade-rules-content {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.tr-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
}
.tr-card h4 {
  font-size: 13px;
  font-weight: 800;
  color: #FFDE00;
  margin: 0 0 6px 0;
}
.tr-card p {
  font-size: 11.5px;
  color: #94A3B8;
  line-height: 1.5;
  margin: 0;
}

/* SELECTOR DE VISTA TÁCTIL (Móvil / Pantallas Angostas) */
.trade-mobile-nav {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.trade-mobile-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 8px;
  color: #94A3B8;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 42px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.trade-mobile-tab.is-active {
  background: rgba(255, 222, 0, 0.12);
  border-color: rgba(255, 222, 0, 0.4);
  color: #FFDE00;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.2);
}

.trade-mobile-tab[data-view="A"].is-active {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.4);
  color: #00E5FF;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.trade-mobile-tab .tab-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 9999px;
  font-family: monospace, sans-serif;
}

/* BARRA FLOTANTE STICKY HUD (Móvil & Tablets) */
.trade-sticky-hud {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(11, 14, 22, 0.94);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.7);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 12px));
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hud-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hud-side-a .hud-tag {
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
}

.hud-side-a .hud-val {
  font-size: 14px;
  font-weight: 900;
  color: #00E5FF;
  font-family: monospace, sans-serif;
}

.hud-side-b {
  text-align: right;
}

.hud-side-b .hud-tag {
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
}

.hud-side-b .hud-val {
  font-size: 14px;
  font-weight: 900;
  color: #FFDE00;
  font-family: monospace, sans-serif;
}

.hud-verdict-pill,
.hud-verdict-btn {
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.hud-pill-badge,
.hud-verdict-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.hud-pill-diff,
.hud-verdict-diff {
  font-size: 10px;
  font-weight: 800;
  font-family: monospace, sans-serif;
}

.hud-win .hud-verdict-pill,
.hud-win .hud-verdict-btn {
  background: rgba(0, 230, 118, 0.15);
  border-color: #00E676;
  color: #00E676;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.3);
}

.hud-lose .hud-verdict-pill,
.hud-lose .hud-verdict-btn {
  background: rgba(255, 23, 68, 0.15);
  border-color: #FF1744;
  color: #FF1744;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.3);
}

.hud-fair .hud-verdict-pill,
.hud-fair .hud-verdict-btn {
  background: rgba(255, 222, 0, 0.15);
  border-color: #FFDE00;
  color: #FFDE00;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.25);
}

.hud-neutral .hud-verdict-pill,
.hud-neutral .hud-verdict-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94A3B8;
}

.verdict-highlight-flash {
  animation: flashVerdictCard 1.2s ease;
}

@keyframes flashVerdictCard {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 229, 255, 0); }
  50% { transform: scale(1.02); box-shadow: 0 0 35px rgba(0, 229, 255, 0.6); }
  100% { transform: scale(1); }
}

/* ARENA DE TRADEO */
.trade-arena {
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  gap: 20px;
  align-items: start;
}

.trade-side-card {
  background: rgba(14, 17, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.trade-side-card.side-a {
  border-top: 3px solid #00E5FF;
}

.trade-side-card.side-b {
  border-top: 3px solid #FFDE00;
}

.trade-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-side-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-badge-icon {
  font-size: 24px;
  line-height: 1;
}

.trade-side-name {
  font-size: 18px;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0;
  letter-spacing: -0.3px;
}

.trade-side-hint {
  font-size: 11px;
  color: #64748B;
  display: block;
}

.trade-side-counter {
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 8px;
}

.trade-side-total-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 16px;
}

.total-box-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 4px;
}

.total-box-amount {
  font-size: 32px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  font-family: monospace, -apple-system, sans-serif;
}

.side-a .total-box-amount {
  color: #00E5FF;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.4);
}

.side-b .total-box-amount {
  color: #FFDE00;
  text-shadow: 0 0 18px rgba(255, 222, 0, 0.4);
}

.trade-side-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.btn-trade-add {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.15), rgba(255, 153, 0, 0.2));
  border: 1px solid rgba(255, 222, 0, 0.4);
  color: #FFDE00;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-trade-add:hover {
  background: linear-gradient(135deg, #FFDE00, #FF9900);
  color: #000000;
  box-shadow: 0 0 18px rgba(255, 222, 0, 0.5);
  transform: translateY(-1px);
}

.btn-trade-clear {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-trade-clear:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #EF4444;
}

/* SLOTS GRID (8 slots) */
.trade-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* SLOTS GRID (8 slots) */
.trade-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.trade-slot {
  min-height: 104px;
  height: auto;
  border-radius: 14px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.trade-slot.slot-empty {
  min-height: 104px;
  height: 104px;
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.trade-slot.slot-empty:hover {
  border-color: rgba(255, 222, 0, 0.5);
  background: rgba(255, 222, 0, 0.04);
  transform: scale(1.02);
}

.slot-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #64748B;
  transition: color 0.2s ease;
}

.trade-slot.slot-empty:hover .slot-empty-content {
  color: #FFDE00;
}

.slot-add-icon {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.slot-number {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Slot Lleno */
.trade-slot.slot-filled {
  min-height: 104px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(18, 22, 34, 0.95);
  display: flex;
  align-items: flex-start;
  padding: 10px 10px;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}

.trade-slot.slot-filled:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.slot-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #0B0E16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-top: 2px;
}

.slot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.slot-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.slot-title-row {
  width: 100%;
  padding-right: 22px;
  box-sizing: border-box;
}

.slot-item-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
  min-width: 0;
  transition: color 0.18s ease;
}

.slot-item-title-link:hover .slot-item-title {
  color: #FFDE00;
  text-shadow: 0 0 8px rgba(255, 222, 0, 0.4);
}

.slot-ext-ico {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
  vertical-align: middle;
}

.slot-thumb-link {
  text-decoration: none;
  display: block;
  flex-shrink: 0;
  border-radius: 10px;
}

.slot-thumb-link:hover .slot-thumb {
  border-color: #FFDE00;
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.35);
}

.slot-item-title {
  font-size: 13px;
  font-weight: 800;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.25;
}

.slot-val-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.slot-item-val {
  font-size: 14.5px;
  font-weight: 900;
  color: #FFDE00;
  font-family: monospace, sans-serif;
  line-height: 1.1;
}

.slot-demanda-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}

.slot-demanda-tag.dem-muy-alta { color: #FF3366; background: rgba(255, 51, 102, 0.14); border: 1px solid rgba(255, 51, 102, 0.3); }
.slot-demanda-tag.dem-alta { color: #00E676; background: rgba(0, 230, 118, 0.14); border: 1px solid rgba(0, 230, 118, 0.3); }
.slot-demanda-tag.dem-media { color: #FFDE00; background: rgba(255, 222, 0, 0.14); border: 1px solid rgba(255, 222, 0, 0.3); }
.slot-demanda-tag.dem-baja { color: #00E5FF; background: rgba(0, 229, 255, 0.14); border: 1px solid rgba(0, 229, 255, 0.3); }
.slot-demanda-tag.dem-muy-baja { color: #94A3B8; background: rgba(255, 255, 255, 0.05); }

.slot-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  z-index: 3;
}

.slot-remove-btn:hover {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
  transform: scale(1.15);
}

.slot-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.slot-condition-wrap {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 2px;
  gap: 2px;
}

.slot-cond-btn {
  background: transparent;
  border: 1px solid transparent;
  font-size: 9.5px;
  font-weight: 700;
  color: #64748B;
  padding: 2px 7px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
  user-select: none;
}

.slot-cond-btn.active[data-cond=clean] {
  background: rgba(0, 230, 118, 0.2);
  color: #00E676;
  border-color: rgba(0, 230, 118, 0.4);
}

.slot-cond-btn.active[data-cond=duped] {
  background: rgba(255, 170, 0, 0.2);
  color: #FFAA00;
  border-color: rgba(255, 170, 0, 0.4);
}

.slot-buy-btn {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  background: rgba(255, 222, 0, 0.16) !important;
  border: 1px solid rgba(255, 222, 0, 0.5) !important;
  color: #FFDE00 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  touch-action: manipulation !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  white-space: nowrap !important;
}

.slot-buy-btn:hover {
  background: #FFDE00 !important;
  color: #0B0E14 !important;
  border-color: #FFDE00 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.45) !important;
}

.slot-stock-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #00E676;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 2px;
}

.slot-stock-tag.stock-urgente {
  color: #FF9900;
  font-weight: 800;
}

.slot-stock-none {
  font-size: 9px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 2px;
}

.slot-cond-btn {
  background: transparent;
  border: none;
  font-size: 9px;
  font-weight: 700;
  color: #64748B;
  padding: 2px 7px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.slot-cond-btn.active[data-cond="clean"] {
  background: rgba(0, 230, 118, 0.2);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.4);
}

.slot-cond-btn.active[data-cond="duped"] {
  background: rgba(255, 170, 0, 0.2);
  color: #FFAA00;
  border: 1px solid rgba(255, 170, 0, 0.4);
}

.slot-demanda-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
  width: fit-content;
}

.slot-demanda-tag.dem-muy-alta { color: #FF3366; background: rgba(255, 51, 102, 0.12); }
.slot-demanda-tag.dem-alta { color: #00E676; background: rgba(0, 230, 118, 0.12); }
.slot-demanda-tag.dem-media { color: #FFDE00; background: rgba(255, 222, 0, 0.12); }
.slot-demanda-tag.dem-baja { color: #00E5FF; background: rgba(0, 229, 255, 0.12); }
.slot-demanda-tag.dem-muy-baja { color: #94A3B8; background: rgba(255, 255, 255, 0.05); }

.trade-demand-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.4);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0 6px;
  text-align: left;
}

.tdw-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}

.tdw-title {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #FFAA00;
  margin-bottom: 2px;
}

.tdw-desc {
  font-size: 11px;
  color: #CBD5E1;
  line-height: 1.4;
  margin: 0;
}

/* PANEL CENTRAL DINÁMICO */
.trade-center-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.trade-verdict-card {
  background: rgba(14, 17, 26, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.verdict-top-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.verdict-badge-main {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.verdict-explain-sub {
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.5;
  margin: 0 auto 16px;
}

.verdict-explain-sub strong {
  color: #FFFFFF;
}

/* Estados de Veredicto */
.trade-verdict-card.verdict-neutral {
  border-color: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}

.trade-verdict-card.verdict-win {
  border-color: #00E676;
  box-shadow: 0 0 35px rgba(0, 230, 118, 0.3), inset 0 0 25px rgba(0, 230, 118, 0.08);
}

.trade-verdict-card.verdict-win .verdict-badge-main {
  color: #00E676;
  text-shadow: 0 0 20px rgba(0, 230, 118, 0.6);
}

.trade-verdict-card.verdict-lose {
  border-color: #FF1744;
  box-shadow: 0 0 35px rgba(255, 23, 68, 0.3), inset 0 0 25px rgba(255, 23, 68, 0.08);
}

.trade-verdict-card.verdict-lose .verdict-badge-main {
  color: #FF1744;
  text-shadow: 0 0 20px rgba(255, 23, 68, 0.6);
}

.trade-verdict-card.verdict-fair {
  border-color: #FFDE00;
  box-shadow: 0 0 30px rgba(255, 222, 0, 0.25), inset 0 0 20px rgba(255, 222, 0, 0.06);
}

.trade-verdict-card.verdict-fair .verdict-badge-main {
  color: #FFDE00;
  text-shadow: 0 0 20px rgba(255, 222, 0, 0.5);
}

/* Animaciones del Veredicto */
.animate-pulse-win {
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulse-win-card {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); box-shadow: 0 0 45px rgba(0, 230, 118, 0.45); }
  100% { transform: scale(1); }
}

.animate-shake-lose {
  animation: shake-lose-badge 0.5s ease-in-out;
}

@keyframes shake-lose-badge {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Diferencia Numérica */
.trade-diff-box {
  display: flex;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.diff-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.diff-metric-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
}

.diff-metric-value {
  font-size: 17px;
  font-weight: 900;
  font-family: monospace, sans-serif;
}

.diff-metric-value.val-win {
  color: #00E676;
}

.diff-metric-value.val-lose {
  color: #FF1744;
}

.diff-metric-value.val-fair {
  color: #FFDE00;
}

/* Barra Comparativa Visual con Etiquetas Externas */
.trade-compare-wrap {
  width: 100%;
  margin-bottom: 18px;
}

.trade-compare-labels {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
  padding: 0 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.tcl-item {
  font-family: 'JetBrains Mono', 'Manrope', monospace !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.tcl-item.tcl-a {
  color: #00E5FF !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.35) !important;
}

.tcl-item.tcl-b {
  color: #FFDE00 !important;
  text-shadow: 0 0 8px rgba(255, 222, 0, 0.35) !important;
}

.trade-compare-meter {
  height: 20px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
}

.meter-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #000000;
  transition: width 0.35s ease;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 4px;
}

.meter-bar.bar-a {
  background: linear-gradient(90deg, #00B0FF, #00E5FF);
}

.meter-bar.bar-b {
  background: linear-gradient(90deg, #FFDE00, #FFA000);
}

.verdict-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verdict-action-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.btn-share-trade {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.05) 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.5) !important;
  color: #00E5FF !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-share-trade:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.25) !important;
  border-color: #00E5FF !important;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-share-trade:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-copiar-link {
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.15) 0%, rgba(255, 222, 0, 0.05) 100%) !important;
  border: 1px solid rgba(255, 222, 0, 0.5) !important;
  color: #FFDE00 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.btn-copiar-link:hover:not(:disabled) {
  background: rgba(255, 222, 0, 0.25) !important;
  border-color: #FFDE00 !important;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-copiar-link:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-copiar-link.btn-copied-success {
  background: #00E676 !important;
  color: #000000 !important;
  border-color: #00E676 !important;
  box-shadow: 0 0 18px #00E676 !important;
}

.btn-copiar-trade {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFDE00, #FF9900);
  border: none;
  color: #000000;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 222, 0, 0.35);
  transition: all 0.2s ease;
}

.btn-copiar-trade:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(255, 222, 0, 0.55);
  transform: translateY(-2px);
}

.btn-copiar-trade:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-copiar-trade.btn-copied-success {
  background: #00E676 !important;
  color: #000000 !important;
  box-shadow: 0 0 20px #00E676 !important;
}

.btn-reset-trade {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset-trade:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

/* PUENTE DE VENTA CON LA TIENDA (Sales Bridge) */
.trade-sales-bridge {
  background: linear-gradient(180deg, rgba(22, 18, 38, 0.95), rgba(11, 14, 22, 0.98));
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 18px;
  padding: 20px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(168, 85, 247, 0.08);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.sales-bridge-header {
  text-align: center;
  margin-bottom: 14px;
}

.sales-bridge-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #C084FC;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.sales-bridge-title {
  font-size: 15px;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 6px;
  line-height: 1.35;
}

.sales-bridge-desc {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.5;
  margin: 0;
}

.sales-bridge-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
  width: 100%;
  box-sizing: border-box;
}

.bridge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 20, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  width: 100%;
}

.bridge-card:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 240, 255, 0.12);
}

.bridge-card-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #0B0E16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

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

.bridge-card-val {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #FFDE00;
  font-size: 8.5px;
  font-weight: 800;
  text-align: center;
  padding: 1px 0;
  font-family: monospace, sans-serif;
}

.bridge-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bridge-card-name {
  font-size: 13px;
  font-weight: 800;
  color: #F1F5F9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bridge-card-price {
  font-size: 11px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.bridge-dot {
  color: #475569;
}

.stock-clean-tag {
  color: #00E676;
  font-weight: 700;
}

.bridge-stock-pill {
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: #00E676;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  line-height: 1.2;
}

.bridge-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.bridge-card-btn-add {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.45);
  color: #00F0FF;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 32px;
  touch-action: manipulation;
  text-decoration: none;
  white-space: nowrap;
}

.bridge-card-btn-add:hover {
  background: #00F0FF;
  color: #0B0E14;
  border-color: #00F0FF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.45);
  transform: translateY(-1px);
}

.bridge-btn-side-a {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.45);
  color: #00F0FF;
}

.bridge-btn-side-a:hover {
  background: #00F0FF;
  color: #0B0E14;
  border-color: #00F0FF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.45);
  transform: translateY(-1px);
}

.bridge-btn-side-b {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #C084FC;
}

.bridge-btn-side-b:hover {
  background: #A855F7;
  color: #0B0E14;
  border-color: #A855F7;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
  transform: translateY(-1px);
}

.bridge-card-btn-add.btn-added-flash {
  background: #00E676 !important;
  color: #0B0E14 !important;
  border-color: #00E676 !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.6) !important;
}

.bridge-card-btn-buy {
  background: rgba(255, 222, 0, 0.14);
  border: 1px solid rgba(255, 222, 0, 0.45);
  color: #FFDE00;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 32px;
  touch-action: manipulation;
  text-decoration: none;
  white-space: nowrap;
}

.bridge-card-btn-buy:hover {
  background: #FFDE00;
  color: #0B0E14;
  border-color: #FFDE00;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.45);
  transform: translateY(-1px);
}

.bridge-card-btn {
  background: rgba(255, 222, 0, 0.15);
  border: 1px solid rgba(255, 222, 0, 0.4);
  color: #FFDE00;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.bridge-card-btn:hover {
  background: #FFDE00;
  color: #000000;
}

.btn-sales-bridge-more {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #C084FC;
  text-decoration: none;
  padding: 6px;
  transition: color 0.15s ease;
}

.btn-sales-bridge-more:hover {
  color: #E9D5FF;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .bridge-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .bridge-card-img {
    width: 100%;
    height: 70px;
    border-radius: 8px;
  }
  .bridge-card-img img {
    object-position: center;
  }
  .bridge-card-body {
    width: 100%;
  }
  .bridge-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  .bridge-card-btn-add,
  .bridge-btn-side-a,
  .bridge-btn-side-b {
    width: 100%;
    padding: 7px 4px;
    font-size: 10.5px;
    box-sizing: border-box;
  }
  .bridge-card-btn-buy {
    grid-column: span 2;
    width: 100%;
    padding: 8px 6px;
    font-size: 11px;
    box-sizing: border-box;
  }
}

/* MODAL SELECTOR DE ÍTEMS */
.trade-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: none !important;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.trade-picker-backdrop.abierto {
  display: flex;
}

.trade-picker-window {
  background: #0E111A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  width: 100%;
  max-width: 780px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  color-scheme: dark;
  animation: picker-modal-in 0.22s ease-out;
}

@keyframes picker-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: #0E111A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.picker-title-group h3 {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.picker-side-target {
  font-size: 12px;
  font-weight: 600;
  color: #FFDE00;
}

.picker-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #94A3B8;
  font-size: 18px;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.picker-close-btn:hover {
  background: #EF4444;
  color: #FFFFFF;
}

.picker-search-wrap {
  padding: 14px 24px;
  position: relative;
  display: flex;
  align-items: center;
  background: #0E111A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.picker-search-ico {
  position: absolute;
  left: 36px;
  font-size: 15px;
  color: #64748B;
  pointer-events: none;
}

.picker-search-wrap input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 11px 40px 11px 40px;
  outline: none;
  transition: border-color 0.2s ease;
}

.picker-search-wrap input:focus {
  border-color: #FFDE00;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.25);
}

.picker-clear-search {
  position: absolute;
  right: 36px;
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 13px;
  cursor: pointer;
}

.picker-cats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  background: #0E111A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.picker-cats-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.picker-cat-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.picker-cat-btn:hover {
  background: rgba(255, 222, 0, 0.12);
  border-color: rgba(255, 222, 0, 0.45);
  color: #FFDE00;
  transform: translateY(-1px);
}

.picker-cat-btn.active {
  background: #FFDE00;
  border-color: #FFDE00;
  color: #0B0E14;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.35);
  transform: none;
}

.picker-cat-btn.active:hover {
  background: #FFE633;
  border-color: #FFE633;
  color: #0B0E14;
}

.picker-cat-btn.picker-cat-stock-btn {
  background: rgba(0, 230, 118, 0.08);
  border-color: rgba(0, 230, 118, 0.35);
  color: #00E676;
}

.picker-cat-btn.picker-cat-stock-btn:hover {
  background: rgba(0, 230, 118, 0.2);
  border-color: #00E676;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.3);
}

.picker-cat-btn.picker-cat-stock-btn.active {
  background: #00E676;
  border-color: #00E676;
  color: #0B0E14;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.5);
}

.picker-item-card:focus-visible {
  outline: 2px solid #00F0FF;
  outline-offset: 2px;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.picker-no-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

.picker-no-results .pnr-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.85;
}

.picker-no-results p {
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0 0 14px 0;
}

.btn-pnr-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 222, 0, 0.15);
  border: 1px solid rgba(255, 222, 0, 0.5);
  color: #FFDE00;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-pnr-reset:hover {
  background: #FFDE00;
  color: #0B0E14;
  border-color: #FFDE00;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.45);
  transform: translateY(-1px);
}

.picker-grid-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px 36px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) rgba(11, 14, 22, 0.85);
}

.picker-grid-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.picker-grid-container::-webkit-scrollbar-track {
  background: rgba(11, 14, 22, 0.85);
  border-radius: 4px;
}

.picker-grid-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.picker-grid-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 222, 0, 0.6);
  box-shadow: 0 0 8px rgba(255, 222, 0, 0.3);
}

.picker-grid-container::-webkit-scrollbar-corner {
  background: rgba(11, 14, 22, 0.85);
}

.picker-item-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.18s ease;
}

.picker-item-card:hover {
  background: rgba(255, 222, 0, 0.06);
  border-color: #FFDE00;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.picker-item-img {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  background: #0B0E16;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.picker-item-val {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 222, 0, 0.4);
  color: #FFDE00;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: monospace, sans-serif;
}

.picker-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-item-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.picker-cosmetic-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  white-space: nowrap;
}

.picker-cosmetic-chip.chip-coche {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #00F0FF;
}

.picker-cosmetic-chip.chip-hyper {
  background: rgba(236, 72, 153, 0.14);
  border-color: rgba(236, 72, 153, 0.4);
  color: #F472B6;
}

.picker-cosmetic-chip.chip-rin,
.picker-cosmetic-chip.chip-estilo-rin,
.picker-cosmetic-chip.chip-sticker {
  background: rgba(255, 222, 0, 0.12);
  border-color: rgba(255, 222, 0, 0.35);
  color: #FFDE00;
}

.picker-cosmetic-chip.chip-textura {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.4);
  color: #C084FC;
}

.picker-cosmetic-chip.chip-aleron {
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.4);
  color: #FB923C;
}

.picker-cosmetic-chip.chip-derrape {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(14, 165, 233, 0.4);
  color: #38BDF8;
}

.picker-cosmetic-chip.chip-mueble {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.4);
  color: #A78BFA;
}

.picker-cosmetic-chip.chip-color {
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.4);
  color: #FACC15;
}

.picker-cosmetic-chip.chip-bocina {
  background: rgba(20, 184, 166, 0.14);
  border-color: rgba(20, 184, 166, 0.4);
  color: #2DD4BF;
}

.picker-cosmetic-chip.chip-arma {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.4);
  color: #F87171;
}

.picker-item-cat {
  font-size: 11px;
  color: #64748B;
}

.picker-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.picker-tier-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.picker-tier-badge.tier-top {
  background: rgba(255, 222, 0, 0.2);
  color: #FFDE00;
}

.picker-tier-badge.tier-medio {
  background: rgba(168, 85, 247, 0.2);
  color: #C084FC;
}

.picker-tier-badge.tier-normal {
  background: rgba(148, 163, 184, 0.15);
  color: #94A3B8;
}

.picker-stock-badge {
  font-size: 9px;
  font-weight: 700;
  color: #00E676;
}

.picker-stock-none {
  font-size: 9px;
  font-weight: 600;
  color: #64748B;
}

.picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: #0E111A;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.picker-count-indicator {
  font-size: 12px;
  color: #64748B;
}

/* ==========================================================================
   FASE 2: TABLERO INTERACTIVO DE VALORES DE TRADING
   ========================================================================== */

/* KPI Ribbon */
.valores-stats-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.vstat-card {
  background: rgba(14, 17, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
}

.vstat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFDE00, transparent);
  opacity: 0.5;
}

.vstat-num {
  font-size: 28px;
  font-weight: 900;
  color: #FFFFFF;
  display: block;
  line-height: 1.1;
  margin-bottom: 4px;
  font-family: monospace, sans-serif;
}

.vstat-label {
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
}

/* Controles de Filtros */
.valores-controls-card {
  background: rgba(14, 17, 26, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.vcontrols-row-top {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}

.vsearch-field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.vsearch-icon {
  position: absolute;
  left: 14px;
  font-size: 15px;
  color: #64748B;
  pointer-events: none;
}

.vsearch-field input {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 12px 38px 12px 42px;
  outline: none;
  transition: all 0.2s ease;
}

.vsearch-field input:focus {
  border-color: #FFDE00;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.25);
  background: rgba(0, 0, 0, 0.6);
}

.vsearch-clear {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
}

.vsort-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

.vsort-label {
  font-size: 13px;
  font-weight: 700;
  color: #94A3B8;
  white-space: nowrap;
}

.vselect-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 14px;
  outline: none;
  cursor: pointer;
}

.vselect-box:focus {
  border-color: #FFDE00;
}

.vcontrols-filters-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vfilter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vfilter-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vfilter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vfilter-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vfilter-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.vfilter-pill.active {
  background: #FFDE00;
  border-color: #FFDE00;
  color: #000000;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.4);
}

/* Custom pills */
.vfilter-pill.pill-subiendo.active {
  background: #00E676;
  border-color: #00E676;
  color: #000000;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.4);
}

.vfilter-pill.pill-bajando.active {
  background: #FF1744;
  border-color: #FF1744;
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.4);
}

.vfilter-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.vstock-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.vstock-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vstock-custom-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.vstock-checkbox:checked + .vstock-custom-box {
  background: #00E676;
  border-color: #00E676;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
}

.vstock-checkbox:checked + .vstock-custom-box::after {
  content: '✓';
  color: #000000;
  font-size: 13px;
  font-weight: 900;
}

.vstock-label-text {
  font-size: 13px;
  color: #E2E8F0;
}

.btn-reset-vfilters {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.btn-reset-vfilters:hover {
  color: #FFDE00;
}

.valores-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

.vcounter-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748B;
}

.btn-shortcut-calc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #FFDE00;
  text-decoration: none;
  background: rgba(255, 222, 0, 0.08);
  border: 1px solid rgba(255, 222, 0, 0.3);
  padding: 6px 14px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.btn-shortcut-calc:hover {
  background: #FFDE00;
  color: #000000;
}

/* TABLA DE VALORES */
.valores-table-card {
  background: rgba(14, 17, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vtable-header {
  display: grid;
  grid-template-columns: 46px minmax(170px, 1.8fr) minmax(95px, 0.9fr) minmax(80px, 0.8fr) minmax(80px, 0.8fr) minmax(95px, 0.9fr) minmax(95px, 0.9fr) minmax(95px, 0.9fr) minmax(105px, 1fr) minmax(215px, 1.5fr);
  align-items: center;
  padding: 14px 20px;
  background: rgba(10, 14, 24, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  min-width: 1080px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vtable-body {
  display: flex;
  flex-direction: column;
  min-width: 1080px;
}

.vrow-item {
  display: grid;
  grid-template-columns: 46px minmax(170px, 1.8fr) minmax(95px, 0.9fr) minmax(80px, 0.8fr) minmax(80px, 0.8fr) minmax(95px, 0.9fr) minmax(95px, 0.9fr) minmax(95px, 0.9fr) minmax(105px, 1fr) minmax(215px, 1.5fr);
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.18s ease;
  min-width: 1080px;
}

.vrow-meta {
  display: contents;
}

.vrow-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 222, 0, 0.2);
}

.vrow-item.rank-gold {
  background: linear-gradient(90deg, rgba(255, 222, 0, 0.06), transparent 40%);
}

.vrow-item.rank-silver {
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.05), transparent 40%);
}

.vrow-item.rank-bronze {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.05), transparent 40%);
}

.rank-badge-pill {
  font-size: 12px;
  font-weight: 800;
  color: #94A3B8;
  font-family: monospace, sans-serif;
}

.rank-gold .rank-badge-pill {
  color: #FFDE00;
  font-weight: 900;
}

.vtd-item-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.vtd-thumb {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #0B0E16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.vtd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.vtd-item-link:hover .vtd-thumb img {
  transform: scale(1.1);
}

.vtd-name-group {
  display: flex;
  flex-direction: column;
}

.vtd-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #F8FAFC;
  transition: color 0.15s ease;
}

.vtd-item-link:hover .vtd-item-title {
  color: #FFDE00;
}

.vtd-item-sub {
  font-size: 11px;
  color: #64748B;
}

.vcat-badge {
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.vval-badge-main {
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  font-family: monospace, sans-serif;
  letter-spacing: -0.3px;
}

.vval-badge-dupe {
  font-size: 13.5px;
  font-weight: 800;
  color: #FFAA00;
  font-family: monospace, sans-serif;
  letter-spacing: -0.3px;
}

.vval-badge-na {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748B;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}

.vdemanda-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.vdemanda-pill.dem-muy-alta {
  background: rgba(255, 51, 102, 0.14);
  border: 1px solid rgba(255, 51, 102, 0.45);
  color: #FF3366;
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.2);
}

.vdemanda-pill.dem-alta {
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: #00E676;
}

.vdemanda-pill.dem-media {
  background: rgba(255, 222, 0, 0.12);
  border: 1px solid rgba(255, 222, 0, 0.4);
  color: #FFDE00;
}

.vdemanda-pill.dem-baja {
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.4);
  color: #00E5FF;
}

.vdemanda-pill.dem-muy-baja {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}

.vtend-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.vtend-badge-pill.trend-rising,
.vtend-badge-pill.trend-subiendo {
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.35);
  color: #00FF88;
}

.vtend-badge-pill.trend-dropping,
.vtend-badge-pill.trend-bajando {
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid rgba(255, 77, 109, 0.35);
  color: #FF4D6D;
}

.vtend-badge-pill.trend-unstable,
.vtend-badge-pill.trend-fluctuando {
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.35);
  color: #FFB800;
}

.vtend-badge-pill.trend-manipulated,
.vtend-badge-pill.trend-manipulado {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #A855F7;
}

.vtend-badge-pill.trend-stable,
.vtend-badge-pill.trend-estable {
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94A3B8;
}

.vstock-pill {
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.vstock-pill.in-stock {
  color: #00E676;
}

.vstock-pill.out-stock {
  color: #64748B;
}

.vtd-stock {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

.vtd-act {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  min-width: 215px;
  flex-shrink: 0;
}

.btn-row-action {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 9px;
  min-height: 32px;
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.btn-row-chart {
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: #00E5FF;
}

.btn-row-chart:hover {
  background: rgba(0, 229, 255, 0.25);
  border-color: #00E5FF;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
  transform: translateY(-1px);
}

.btn-row-buy {
  background: linear-gradient(135deg, #FFDE00, #FF9900);
  color: #000000;
  font-weight: 800;
  border: none;
  box-shadow: 0 2px 10px rgba(255, 222, 0, 0.25);
}

.btn-row-buy:hover {
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.55);
  transform: translateY(-1px);
}

.btn-row-trade {
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: #C084FC;
  font-weight: 700;
}

.btn-row-trade:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: #A855F7;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.45);
  transform: translateY(-1px);
}

.valores-empty-feedback {
  text-align: center;
  padding: 60px 20px;
}

.empty-ico {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Tablets & Móviles - /valores & Trade Arena)
   ========================================================================== */

/* TABLET LAYOUT (641px - 1080px): Dos columnas paralelas + Veredicto superior Bento + Sales Bridge inferior */
@media (min-width: 641px) and (max-width: 1080px) {
  .trade-arena {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }
  .trade-center-panel {
    display: contents !important;
  }
  #tradeVerdictCard {
    grid-column: 1 / -1 !important;
    order: 1 !important;
    padding: 20px 24px !important;
  }
  .trade-swap-wrap {
    grid-column: 1 / -1 !important;
    order: 2 !important;
    margin: 4px auto !important;
  }
  #tradeSideA {
    grid-column: 1 !important;
    order: 3 !important;
    margin-bottom: 0 !important;
  }
  #tradeSideB {
    grid-column: 2 !important;
    order: 4 !important;
    margin-bottom: 0 !important;
  }
  #tradeSalesBridge {
    grid-column: 1 / -1 !important;
    order: 5 !important;
    margin-top: 10px !important;
  }
  .sales-bridge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .trade-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* MÓVILES (<= 640px): Stack vertical optimizado con Tabs de selección, Slots compactos y HUD */
@media (max-width: 640px) {
  .trade-page-wrap {
    padding: 12px 10px calc(88px + env(safe-area-inset-bottom, 16px)) !important;
    overflow-x: clip !important;
  }
  .trade-hero-header {
    margin-bottom: 14px !important;
    padding: 16px 12px !important;
  }
  .trade-hero-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .trade-hero-desc {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .trade-hero-pills {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .tpill-item {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  .trade-mobile-nav {
    display: grid !important;
  }

  .trade-arena {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .trade-center-panel {
    display: contents !important;
  }
  #tradeVerdictCard {
    order: 1 !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }
  .trade-swap-wrap {
    order: 2 !important;
    margin: 2px auto !important;
  }
  #tradeSideA {
    order: 3 !important;
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }
  #tradeSideB {
    order: 4 !important;
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }
  #tradeSalesBridge {
    order: 5 !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-top: 6px !important;
  }

  .trade-side-card.mobile-hidden {
    display: none !important;
  }

  .trade-side-head {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  .trade-side-name {
    font-size: 16px !important;
  }
  .trade-side-hint {
    font-size: 10.5px !important;
  }
  .trade-side-total-box {
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }
  .total-box-lbl {
    font-size: 10px !important;
  }
  .total-box-amount {
    font-size: 26px !important;
  }

  .trade-side-actions {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .btn-trade-add {
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .btn-trade-clear {
    min-height: 42px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  .trade-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .trade-slot {
    border-radius: 12px !important;
  }
  .trade-slot.slot-empty {
    min-height: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    background: rgba(11, 14, 22, 0.4) !important;
    border: 1.5px dashed rgba(255, 255, 255, 0.1) !important;
  }
  .trade-slot.slot-empty .slot-empty-content {
    flex-direction: row !important;
    gap: 6px !important;
  }
  .trade-slot.slot-empty .slot-add-icon {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .trade-slot.slot-empty .slot-number {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
  }
  .trade-slot.slot-filled {
    min-height: 108px !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    background: linear-gradient(135deg, rgba(18, 24, 38, 0.95), rgba(12, 16, 26, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }
  .slot-thumb-link {
    display: flex !important;
    align-items: center !important;
  }
  .slot-thumb {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    background: #080A10 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
  }
  .slot-details {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 3px !important;
  }
  .slot-title-row {
    padding-right: 18px !important;
    width: 100% !important;
  }
  .slot-item-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
  }
  .slot-val-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }
  .slot-item-val {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #00FF88 !important;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.35) !important;
    line-height: 1 !important;
  }
  .slot-demanda-tag {
    font-size: 8.5px !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  .slot-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-top: 1px !important;
  }
  .slot-condition-wrap {
    display: inline-flex !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 5px !important;
    padding: 1px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .slot-cond-btn {
    padding: 2px 5px !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    height: 17px !important;
    line-height: 13px !important;
    border-radius: 4px !important;
    border: none !important;
    color: #94A3B8 !important;
    background: transparent !important;
    cursor: pointer !important;
  }
  .slot-cond-btn.active {
    background: #00F0FF !important;
    color: #050811 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.4) !important;
  }
  .slot-buy-btn {
    font-size: 8.5px !important;
    height: 17px !important;
    padding: 0 5px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #FFB800, #FF8800) !important;
    color: #050811 !important;
    font-weight: 800 !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 17px !important;
    position: static !important;
  }
  .slot-stock-tag {
    font-size: 8px !important;
    color: #38BDF8 !important;
    display: block !important;
    line-height: 1.1 !important;
  }
  .slot-stock-tag.stock-urgente {
    color: #FF4D6D !important;
    font-weight: 700 !important;
  }
  .slot-stock-none {
    font-size: 8px !important;
    color: #64748B !important;
    display: block !important;
    line-height: 1.1 !important;
  }
  .slot-remove-btn {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: rgba(255, 77, 109, 0.15) !important;
    border: 1px solid rgba(255, 77, 109, 0.3) !important;
    color: #FF4D6D !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
  }

  .verdict-badge-main {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .verdict-explain-sub {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .trade-diff-box {
    padding: 8px 10px !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  .diff-metric-label {
    font-size: 11px !important;
  }
  .diff-metric-value {
    font-size: 16px !important;
  }
  .verdict-action-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .btn-copiar-trade,
  .btn-share-trade,
  .btn-reset-trade {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 12.5px !important;
    padding: 8px 12px !important;
  }

  .sales-bridge-header {
    margin-bottom: 12px !important;
  }
  .sales-bridge-title {
    font-size: 15px !important;
  }
  .sales-bridge-desc {
    font-size: 12px !important;
  }
  .sales-bridge-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .bridge-card {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    align-items: center !important;
  }
  .bridge-card-img {
    height: 74px !important;
    width: 74px !important;
    border-radius: 10px !important;
  }
  .bridge-card-body {
    min-width: 0 !important;
  }
  .bridge-card-name {
    font-size: 13.5px !important;
  }
  .bridge-card-price {
    font-size: 11px !important;
    margin: 3px 0 6px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .bridge-card-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }
  .bridge-card-btn-add,
  .bridge-card-btn-buy {
    font-size: 11px !important;
    padding: 8px 4px !important;
    min-height: 38px !important;
    justify-content: center !important;
  }
}

/* PANTALLAS EXTRA ANGOSTAS (<= 380px: Galaxy S8/A series, iPhone SE) */
@media (max-width: 380px) {
  .trade-page-wrap {
    padding: 8px 6px calc(88px + env(safe-area-inset-bottom, 16px)) !important;
  }
  .trade-side-card {
    padding: 12px 8px !important;
  }
  .total-box-amount {
    font-size: 22px !important;
  }
  .trade-slots-grid {
    gap: 6px !important;
  }
  .trade-slot.slot-empty {
    min-height: 50px !important;
    height: 50px !important;
  }
  .trade-slot.slot-filled {
    min-height: 104px !important;
    height: auto !important;
  }
  .slot-thumb {
    width: 38px !important;
    height: 38px !important;
  }
  .slot-item-title {
    font-size: 10.5px !important;
  }
  .slot-item-val {
    font-size: 11px !important;
  }
  .slot-remove-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
  .slot-buy-btn {
    width: auto !important;
    height: 19px !important;
    font-size: 9px !important;
    padding: 0 5px !important;
    top: auto !important;
    left: auto !important;
    position: static !important;
  }
  .bridge-card-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  .bridge-card-btn-buy {
    grid-column: 1 / -1 !important;
  }
  .trade-mobile-tab {
    padding: 8px 4px !important;
    font-size: 11px !important;
    min-height: 38px !important;
  }
  .trade-mobile-tab .tab-icon {
    font-size: 13px !important;
  }
  .hud-side-a .hud-val,
  .hud-side-b .hud-val {
    font-size: 12.5px !important;
  }
  .hud-pill-badge {
    font-size: 10px !important;
  }
  .hud-pill-diff {
    font-size: 9.5px !important;
  }
}

@media (max-width: 1080px) {
  .trade-sticky-hud {
    display: flex !important;
  }
  .trade-page-wrap {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 16px)) !important;
  }

  .valores-table-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .vtable-header {
    display: none !important;
  }

  .vtable-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .vrow-item {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "rank item val"
      "meta meta meta"
      "act  act  act" !important;
    gap: 10px 8px !important;
    align-items: center !important;
    padding: 14px 14px 12px !important;
    background: rgba(14, 18, 28, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  .vrow-item:hover,
  .vrow-item:active {
    background: rgba(18, 24, 38, 0.98) !important;
    border-color: rgba(0, 229, 255, 0.35) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 229, 255, 0.1) !important;
  }

  .vrow-item.rank-gold {
    background: linear-gradient(135deg, rgba(255, 222, 0, 0.08) 0%, rgba(14, 18, 28, 0.92) 50%) !important;
    border-color: rgba(255, 222, 0, 0.3) !important;
  }

  .vrow-item.rank-silver {
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.06) 0%, rgba(14, 18, 28, 0.92) 50%) !important;
    border-color: rgba(226, 232, 240, 0.25) !important;
  }

  .vrow-item.rank-bronze {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.06) 0%, rgba(14, 18, 28, 0.92) 50%) !important;
    border-color: rgba(205, 127, 50, 0.25) !important;
  }

  .vtd-rank {
    grid-area: rank !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .vtd-rank .rank-badge-pill {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    line-height: 1 !important;
  }

  .vrow-item.rank-gold .vtd-rank .rank-badge-pill {
    color: #000000 !important;
    background: #FFDE00 !important;
    font-weight: 900 !important;
  }

  .vrow-item.rank-silver .vtd-rank .rank-badge-pill {
    color: #000000 !important;
    background: #E2E8F0 !important;
    font-weight: 900 !important;
  }

  .vrow-item.rank-bronze .vtd-rank .rank-badge-pill {
    color: #FFFFFF !important;
    background: #CD7F32 !important;
    font-weight: 900 !important;
  }

  .vtd-cat {
    display: none !important;
  }

  .vdupe-label {
    display: none;
  }

  .vtd-item {
    grid-area: item !important;
    min-width: 0 !important;
  }

  .vtd-item-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    text-decoration: none !important;
  }

  .vtd-thumb {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #0B0E16 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .vtd-name-group {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .vtd-item-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }

  .vtd-item-sub {
    font-size: 11px !important;
    color: #64748B !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 1px !important;
  }

  .vtd-val {
    grid-area: val !important;
    justify-self: end !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .vtd-val .vval-badge-main {
    font-size: 16.5px !important;
    font-weight: 900 !important;
    color: #FFDE00 !important;
    font-family: monospace, sans-serif !important;
    letter-spacing: -0.3px !important;
    display: block !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(255, 222, 0, 0.3) !important;
  }

  .vrow-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 2px 0 !important;
  }

  .vrow-meta .vtd {
    display: inline-flex !important;
    align-items: center !important;
  }

  .vrow-meta .vval-badge-dupe {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #FFAA00 !important;
    background: rgba(255, 170, 0, 0.12) !important;
    border: 1px solid rgba(255, 170, 0, 0.35) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .vrow-meta .vval-badge-dupe .vdupe-label {
    display: inline !important;
    font-size: 9px !important;
    color: #FFDE00 !important;
    opacity: 0.85 !important;
    font-weight: 800 !important;
  }

  .vrow-meta .vval-badge-na {
    display: none !important;
  }

  .vrow-meta .vcat-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  .vrow-meta .vtend-badge-pill {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    gap: 3px !important;
  }

  .vrow-meta .tier-sello {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  .vrow-meta .vstock-pill {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    white-space: nowrap !important;
  }

  .vrow-meta .vstock-pill.in-stock {
    color: #00FF88 !important;
    background: rgba(0, 255, 136, 0.08) !important;
    border-color: rgba(0, 255, 136, 0.25) !important;
  }

  .vrow-meta .vstock-pill.out-stock {
    color: #64748B !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .vtd-act {
    grid-area: act !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
  }

  .vtd-act .btn-row-action {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
  }

  .btn-row-action {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 8px 6px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    text-align: center !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .btn-row-chart {
    background: rgba(0, 229, 255, 0.1) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #00E5FF !important;
  }

  .btn-row-chart:hover,
  .btn-row-chart:active {
    background: rgba(0, 229, 255, 0.25) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important;
  }

  .btn-row-buy {
    background: linear-gradient(135deg, #FFDE00, #FF9900) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(255, 222, 0, 0.25) !important;
  }

  .btn-row-buy:hover,
  .btn-row-buy:active {
    box-shadow: 0 0 14px rgba(255, 222, 0, 0.55) !important;
  }

  .btn-row-trade {
    background: rgba(124, 58, 237, 0.14) !important;
    border: 1px solid rgba(124, 58, 237, 0.4) !important;
    color: #C084FC !important;
    font-weight: 700 !important;
  }

  .btn-row-trade:hover,
  .btn-row-trade:active {
    background: rgba(124, 58, 237, 0.3) !important;
    border-color: #A855F7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.45) !important;
  }
}

@media (max-width: 768px) {
  .valores-page-wrap {
    padding: 14px 12px calc(80px + env(safe-area-inset-bottom, 16px)) !important;
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .valores-stats-ribbon {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .vstat-card {
    padding: 12px 10px !important;
  }
  .vstat-num {
    font-size: 22px !important;
  }
  .vstat-label {
    font-size: 11px !important;
  }
  .valores-controls-card {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vcontrols-row-top {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .vsort-field {
    min-width: 0 !important;
    width: 100% !important;
  }
  .vcontrols-filters-area {
    gap: 10px !important;
    padding: 12px 0 !important;
  }
  .vfilter-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .vfilter-label {
    min-width: 0 !important;
    font-size: 11px !important;
  }
  .valores-summary-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 10px !important;
    text-align: center !important;
  }
  .btn-shortcut-calc {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .trade-hero-title,
  .valores-hero-title {
    font-size: 24px !important;
    margin: 6px 0 10px !important;
  }
  .trade-slots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .picker-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 12px 14px 36px !important;
    gap: 10px !important;
  }
  .trade-picker-backdrop {
    padding: 12px 8px !important;
  }
  .trade-picker-window {
    max-height: 90vh !important;
    border-radius: 16px !important;
  }
  .picker-header {
    padding: 14px 16px !important;
    flex-shrink: 0 !important;
  }
  .picker-search-wrap {
    padding: 10px 16px !important;
    flex-shrink: 0 !important;
  }
  .picker-cats-bar {
    padding: 10px 16px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .picker-footer {
    padding: 12px 16px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 480px) {
  .valores-page-wrap {
    padding: 10px 8px calc(88px + env(safe-area-inset-bottom, 16px)) !important;
  }
  .trade-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .valores-stats-ribbon {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .vstat-card {
    padding: 10px 8px !important;
    border-radius: 10px !important;
  }
  .vstat-num {
    font-size: 19px !important;
  }
  .vstat-label {
    font-size: 10px !important;
  }
  .valores-hero-title {
    font-size: 20px !important;
  }
  .valores-hero-desc {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .picker-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 10px 10px 36px !important;
    gap: 8px !important;
  }
  .picker-item-card {
    padding: 8px !important;
  }
  .picker-item-img {
    height: 76px !important;
  }
  .picker-item-name {
    font-size: 12px !important;
  }
  .vhero-pill {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
  }
  .vrow-item {
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    padding: 11px 10px 10px !important;
    border-radius: 14px !important;
    gap: 8px 6px !important;
  }
  .vtd-thumb {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
  }
  .vtd-item-title {
    font-size: 13px !important;
  }
  .vtd-val .vval-badge-main {
    font-size: 15px !important;
  }
  .vtd-act {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .btn-row-action {
    font-size: 10.5px !important;
    padding: 7px 4px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
  }
  .total-box-amount {
    font-size: 26px !important;
  }
  .verdict-badge-main {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   FASE 3: SORTEOS OFICIALES Y CUPONES DE STREAM (GAMING AESTHETICS)
   ========================================================================== */

/* 1. Cupones de descuento en Checkout / Carrito */
.checkout-cupon-box {
  background: rgba(16, 20, 32, 0.85) !important;
  border: 1px dashed rgba(255, 222, 0, 0.4) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 16px 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
}

.cupon-box-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}

.cupon-box-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #FFDE00 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.btn-mis-cupones-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(124, 58, 237, 0.18) !important;
  border: 1px solid rgba(124, 58, 237, 0.5) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #C084FC !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.btn-mis-cupones-pill:hover {
  background: rgba(124, 58, 237, 0.35) !important;
  border-color: #A855F7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45) !important;
  transform: translateY(-1px) !important;
}

.cupon-input-row {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.cupon-input {
  flex: 1 !important;
  min-width: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-family: 'JetBrains Mono', 'Manrope', monospace !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

.cupon-input:focus {
  outline: none !important;
  border-color: #FFDE00 !important;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.3) !important;
}

.btn-seleccionar-cupon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(124, 58, 237, 0.22)) !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  border-radius: 8px !important;
  padding: 0 13px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #00F0FF !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

.btn-seleccionar-cupon:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.35), rgba(124, 58, 237, 0.4)) !important;
  border-color: #00F0FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-aplicar-cupon {
  background: linear-gradient(135deg, #FFDE00, #F5C518) !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.btn-aplicar-cupon:hover {
  background: #FFF066 !important;
  box-shadow: 0 4px 15px rgba(255, 222, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

.btn-quitar-cupon {
  background: rgba(255, 42, 75, 0.15) !important;
  color: #FF2A4B !important;
  border: 1px solid rgba(255, 42, 75, 0.4) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-quitar-cupon:hover {
  background: rgba(255, 42, 75, 0.3) !important;
  border-color: #FF2A4B !important;
}

.cupon-aviso {
  font-size: 12px !important;
  margin-top: 8px !important;
  display: none;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

.cupon-aviso.ok {
  display: block !important;
  color: #00FF88 !important;
}

.cupon-aviso.err {
  display: block !important;
  color: #FF2A4B !important;
}

/* Modal Selector de Mis Cupones Disponibles (Gamer Dark AAA) */
#modalMisCupones.modal-backdrop {
  z-index: 100000 !important;
  background: rgba(4, 6, 11, 0.88) !important;
  backdrop-filter: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.modal.modal-mis-cupones {
  background: linear-gradient(180deg, #121826 0%, #0B0E14 100%) !important;
  border: 1px solid rgba(255, 222, 0, 0.28) !important;
  border-radius: 18px !important;
  max-width: 620px !important;
  width: 100% !important;
  padding: 18px 20px 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 222, 0, 0.1) !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.modal.modal-mis-cupones .modal-actions {
  display: none !important;
}

.mmc-head {
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

.mmc-head-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.mmc-head-badges {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#btnCerrarMisCuponesX.modal-close,
#btnCerrarMisCuponesX.modal-close-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #94A3B8 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

#btnCerrarMisCuponesX.modal-close:hover,
#btnCerrarMisCuponesX.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #EF4444 !important;
}

.mmc-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 222, 0, 0.12) !important;
  border: 1px solid rgba(255, 222, 0, 0.4) !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
}

.mmc-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: clamp(17px, 3.8vw, 22px) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: 0.3px !important;
  text-wrap: balance !important;
  line-height: 1.25 !important;
}

.mmc-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #A1A1AA !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.35 !important;
}

.mmc-user-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(18, 24, 38, 0.75) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 240, 255, 0.18) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  gap: 10px !important;
  margin-top: 6px !important;
  flex-wrap: wrap !important;
  box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.mmc-user-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  min-width: 0 !important;
}

.mmc-user-pill .mup-icon {
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 6px !important;
  color: #00F0FF !important;
  flex-shrink: 0 !important;
}

.mmc-user-pill .mup-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mmc-user-pill .mup-tag {
  color: #94A3B8 !important;
  font-weight: 600 !important;
}

.mmc-user-pill .mup-username {
  color: #00F0FF !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

.mmc-user-stats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mmc-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

.mmc-count-badge.mmc-count-disp {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.45) !important;
  color: #00FF88 !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.15) !important;
}

.mmc-count-badge.mmc-count-disp .mcb-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #00FF88 !important;
  box-shadow: 0 0 6px #00FF88 !important;
  display: inline-block !important;
}

.mmc-count-badge.mmc-count-scrap {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #FBBF24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15) !important;
}

.mmc-guest-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  font-size: 12px !important;
  color: #D1D5DB !important;
  line-height: 1.4 !important;
}

.mgn-link {
  color: #FFDE00 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

.mgn-link:hover {
  color: #FFFFFF !important;
}

.mmc-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 8px 4px 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 222, 0, 0.35) rgba(0, 0, 0, 0.2) !important;
}

.mmc-body::-webkit-scrollbar {
  width: 6px;
}

.mmc-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.mmc-body::-webkit-scrollbar-thumb {
  background: rgba(255, 222, 0, 0.35);
  border-radius: 3px;
}

.mmc-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mmc-section-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.msh-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #00F0FF !important;
  text-transform: uppercase !important;
}

.msh-sub {
  font-size: 11.5px !important;
  color: #71717A !important;
}

.mmc-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 10px !important;
}

.mmc-coupon-card {
  background: rgba(18, 24, 38, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.mmc-coupon-card:hover {
  border-color: rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

.mmc-coupon-card.is-active {
  border-color: rgba(0, 255, 136, 0.6) !important;
  background: rgba(0, 255, 136, 0.06) !important;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.2) !important;
}

.mmc-coupon-card.mmc-card-stream {
  border-color: rgba(124, 58, 237, 0.25) !important;
}

.mmc-coupon-card.mmc-card-stream:hover {
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.2) !important;
}

.mcc-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.mcc-pct-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #000000 !important;
  background: linear-gradient(135deg, #FFDE00, #F59E0B) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
}

.mcc-pct-badge.stream-badge {
  background: linear-gradient(135deg, #00F0FF, #7C3AED) !important;
  color: #FFFFFF !important;
}

.mcc-tag-chip {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #A1A1AA !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

.mcc-code-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  gap: 8px !important;
}

.mcc-code {
  font-family: 'JetBrains Mono', 'Manrope', monospace !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.btn-copy-cupon-mini {
  background: transparent !important;
  border: none !important;
  color: #A1A1AA !important;
  cursor: pointer !important;
  font-size: 13px !important;
  padding: 2px 4px !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

.btn-copy-cupon-mini:hover {
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.1) !important;
}

.btn-copy-cupon-mini.copied {
  color: #00FF88 !important;
  font-weight: 800 !important;
}

.mcc-desc {
  font-size: 12px !important;
  color: #D1D5DB !important;
  line-height: 1.35 !important;
}

.mcc-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  flex-wrap: wrap !important;
}

.mcc-expiry {
  font-size: 11px !important;
  color: #71717A !important;
  font-weight: 600 !important;
}

.btn-mmc-action {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-mmc-select {
  background: linear-gradient(135deg, #FFDE00, #F5C518) !important;
  color: #000000 !important;
}

.btn-mmc-select:hover {
  background: #FFF066 !important;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.5) !important;
  transform: translateY(-1px) !important;
}

.btn-mmc-applied {
  background: rgba(0, 255, 136, 0.15) !important;
  border: 1px solid rgba(0, 255, 136, 0.45) !important;
  color: #00FF88 !important;
  cursor: default !important;
}

.mcc-limits-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 3px 0 !important;
}

.mcc-limit-chip {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  white-space: nowrap !important;
}

.btn-mmc-desencantar {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #FCA5A5 !important;
  border-radius: 6px !important;
  padding: 5px 9px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.btn-mmc-desencantar:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: rgba(239, 68, 68, 0.75) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

.btn-mmc-desencantar:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

.mmc-des-reward {
  color: #FDE047 !important;
  font-weight: 800 !important;
}

.mmc-personal-empty {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

.mpe-icon {
  font-size: 22px !important;
  line-height: 1 !important;
}

.mpe-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 2px !important;
}

.mpe-sub {
  font-size: 12px !important;
  color: #A1A1AA !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
}

.mpe-btn {
  display: inline-flex !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}

.mmc-empty-state, .mmc-loading, .mmc-error-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 32px 16px !important;
  gap: 10px !important;
}

.mmc-spinner {
  width: 32px !important;
  height: 32px !important;
  border: 3px solid rgba(255, 222, 0, 0.2) !important;
  border-top-color: #FFDE00 !important;
  border-radius: 50% !important;
  animation: none !important; /* 0% GPU idle */
}

@keyframes mmcSpin {
  to { transform: rotate(360deg); }
}

.mmc-actions {
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

.nav-forja-pill {
  color: #C084FC !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  background: rgba(124, 58, 237, 0.12) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.nav-forja-pill:hover {
  background: rgba(124, 58, 237, 0.28) !important;
  border-color: #A855F7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45) !important;
  text-decoration: none !important;
}

/* ===== GRUPO 2: FASE UX & PEDAGOGÍA FORJA MTX ===== */

.mmc-guide-accordion {
  margin: 4px 0 8px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.mmc-guide-toggle {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(0, 240, 255, 0.06)) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  min-height: 38px !important;
  transition: all 0.2s ease !important;
  text-align: left !important;
}

.mmc-guide-toggle .mgt-text {
  line-height: 1.35 !important;
  display: inline-block !important;
}

.mmc-guide-toggle:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(0, 240, 255, 0.12)) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
}

.mmc-guide-content {
  background: rgba(11, 14, 20, 0.9) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 12px 14px !important;
  margin-top: -2px !important;
}

.mgc-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.mgc-rule-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: #C084FC !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.mgc-grid p {
  font-size: 11.5px !important;
  color: #CBD5E1 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.mgc-matrix {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mgc-matrix-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FFD700 !important;
  margin-bottom: 6px !important;
  font-family: 'Rajdhani', sans-serif !important;
  text-transform: uppercase !important;
}

.mgc-matrix-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.mgc-chip {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  color: #E2E8F0 !important;
}

.mgc-chip-scrap {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #FBBF24 !important;
}

/* Pestañas Segmentadas del Modal de Cupones */
.mmc-tabs-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 6px 0 10px 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: visible !important;
}

.mmc-tabs-nav::-webkit-scrollbar {
  display: none !important;
}

.mmc-tab-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #94A3B8 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.mmc-tab-btn .mmc-tab-ico {
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.mmc-tab-btn .mmc-tab-txt {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mmc-tab-btn .mmc-tab-pill {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  opacity: 0.9 !important;
  flex-shrink: 0 !important;
}

.mmc-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.mmc-tab-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(0, 240, 255, 0.22) 100%) !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: #00F0FF !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.22), inset 0 0 8px rgba(124, 58, 237, 0.2) !important;
  font-weight: 800 !important;
}

/* Banner de Introducción por Pestaña */
.mmc-tab-intro-banner {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

.mmc-tab-intro-banner.mmc-intro-creadores {
  border-color: rgba(56, 189, 248, 0.25) !important;
}

/* Tarjeta de Chatarra Vencida */
.mcc-card-scrap {
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  background: linear-gradient(145deg, rgba(28, 20, 16, 0.75), rgba(11, 14, 20, 0.98)) !important;
}

.mcc-code-scrap {
  color: #E2E8F0 !important;
  text-decoration: none !important;
  letter-spacing: 1.2px !important;
  font-weight: 700 !important;
}

.mcc-scrap-badge {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.btn-mmc-scrap {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #FDE68A !important;
}

.btn-mmc-scrap:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.3) !important;
  border-color: #F59E0B !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

.btn-mmc-scrap-all {
  transition: all 0.2s ease !important;
}

.btn-mmc-scrap-all:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.6) !important;
  filter: brightness(1.1) !important;
}

.btn-mmc-scrap-all:active:not(:disabled) {
  transform: translateY(0) !important;
}

.creador-badge {
  background: linear-gradient(135deg, #EC4899, #8B5CF6) !important;
  color: #FFFFFF !important;
}

.creador-tag {
  color: #F472B6 !important;
  border-color: rgba(244, 114, 182, 0.3) !important;
}

/* Diálogo Gamer de Confirmación de Desencantamiento */
.mmc-confirm-dialog-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.mmc-confirm-dialog-backdrop.abierto {
  display: flex !important;
}

.mmc-confirm-dialog-card {
  background: #0E131F !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.35) !important;
  border-radius: 14px !important;
  padding: 22px 18px !important;
  max-width: 400px !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.mcd-icon {
  font-size: 36px !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
}

.mcd-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}

.mcd-warning {
  font-size: 12px !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
  margin: 0 0 12px 0 !important;
}

.mcd-coupon-pill {
  font-family: 'JetBrains Mono', 'Manrope', monospace !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px dashed #7C3AED !important;
  color: #C084FC !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}

.mcd-coupon-pill.is-scrap {
  border-color: #F59E0B !important;
  color: #FBBF24 !important;
}

.mcd-rewards-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.mcd-reward-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.mcd-puntos {
  background: rgba(255, 215, 0, 0.15) !important;
  color: #FFD700 !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
}

.mcd-tickets {
  background: rgba(0, 240, 255, 0.15) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
}

.mcd-llave {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #C084FC !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

.mcd-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
}

.btn-confirmar-desencantar-accion {
  background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
}

.btn-confirmar-desencantar-accion:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.6) !important;
}

/* ===== FORJA MTX: EFECTOS SENSORIALES Y ANIMACIONES DE DESINTEGRACIÓN ===== */
@keyframes forjaSparkBurst {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(245, 158, 11, 0);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.9), inset 0 0 20px rgba(255, 222, 0, 0.8);
    filter: brightness(1.6);
  }
  60% {
    transform: scale(0.98);
    box-shadow: 0 0 45px rgba(236, 72, 153, 0.8), inset 0 0 30px rgba(124, 58, 237, 0.9);
    filter: brightness(1.8) contrast(1.2);
  }
  100% {
    transform: scale(0.92);
    opacity: 0.2;
    filter: grayscale(1) brightness(0.6);
  }
}

@keyframes forjaGlowPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.96); }
  50% { opacity: 0.95; transform: scale(1.04); filter: drop-shadow(0 0 15px #FFDE00); }
}

.forja-animating-burn {
  animation: forjaSparkBurst 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
  pointer-events: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.forja-animating-burn::after {
  content: 'FORJANDO...' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.9) 0%, rgba(124, 58, 237, 0.95) 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: 0 0 10px #000, 0 0 20px #FFDE00 !important;
  z-index: 10 !important;
  animation: none !important; /* 0% GPU idle */
}

/* ===== FILTROS RÁPIDOS PESTAÑA DISPONIBLES ===== */
.mmc-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding: 4px 2px 10px 2px !important;
  scrollbar-width: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 8px !important;
}
.mmc-filter-bar::-webkit-scrollbar {
  display: none !important;
}

.mmc-filter-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.mmc-filter-chip:hover {
  background: rgba(255, 222, 0, 0.1) !important;
  border-color: rgba(255, 222, 0, 0.4) !important;
  color: #FFDE00 !important;
}

.mmc-filter-chip.active {
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.2), rgba(245, 158, 11, 0.25)) !important;
  border-color: #FFDE00 !important;
  color: #FFDE00 !important;
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.25) !important;
}

/* Toggle SFX en la cabecera */
.mmc-sfx-toggle {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #E2E8F0 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}
.mmc-sfx-toggle:hover {
  background: rgba(0, 240, 255, 0.1) !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
}
.mmc-sfx-toggle.is-muted {
  opacity: 0.6 !important;
  filter: grayscale(0.8) !important;
}

/* Estilos de Forja en /perfil */
.perfil-lab-callout {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}

.badge-desencantado-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #A1A1AA !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
}

.btn-desencantar-perfil {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #C084FC !important;
  padding: 4px 8px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-desencantar-perfil:hover {
  background: rgba(124, 58, 237, 0.35) !important;
  border-color: #A855F7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.35) !important;
}

.perfil-cupon-chip.is-desencantado {
  opacity: 0.55 !important;
  filter: grayscale(0.5) !important;
}

@media (max-width: 480px) {
  .mgc-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .checkout-cupon-box {
    padding: 12px 10px !important;
  }
  .cupon-box-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .cupon-box-title {
    font-size: 12px !important;
  }
  .btn-mis-cupones-pill {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }
  .cupon-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cupon-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .btn-aplicar-cupon, .btn-quitar-cupon, .btn-seleccionar-cupon {
    width: 100% !important;
    padding: 9px 12px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  .modal.modal-mis-cupones {
    padding: 16px 12px !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
  }
  .mmc-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .mmc-title {
    font-size: clamp(15.5px, 4.2vw, 18px) !important;
    line-height: 1.22 !important;
    text-wrap: balance !important;
  }
  .mmc-tabs-nav {
    gap: 4px !important;
    padding: 3px !important;
    margin: 8px 0 10px 0 !important;
  }
  .mmc-tab-btn {
    padding: 6px 2px !important;
    font-size: 11px !important;
    gap: 2px !important;
    min-height: 38px !important;
  }
  .mmc-tab-btn .mmc-tab-ico {
    font-size: 11px !important;
  }
  .mmc-tab-btn .mmc-tab-pill {
    font-size: 10px !important;
  }
  .mmc-txt-extra {
    display: none !important;
  }
  .mmc-user-bar {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .mmc-user-pill {
    font-size: 12px !important;
  }
  .mmc-count-badge {
    padding: 2px 7px !important;
    font-size: 11px !important;
  }
}

.resumen-descuento {
  color: #00FF88 !important;
}

.resumen-descuento strong {
  color: #00FF88 !important;
}

/* 2. PÁGINA DE SORTEOS OFICIALES Y RULETA STREAM (/sorteos) - GAMING SHOWCASE */
.sorteos-page-wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 24px 20px 80px !important;
}

.sorteos-hero-header {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.sorteo-hero-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 222, 0, 0.1) !important;
  border: 1px solid rgba(255, 222, 0, 0.35) !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 0 15px rgba(255, 222, 0, 0.15) !important;
}

.sorteos-hero-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 25px rgba(255, 222, 0, 0.2) !important;
}

.sorteos-hero-desc {
  max-width: 780px !important;
  margin: 0 auto !important;
  font-size: 15px !important;
  color: #94A3B8 !important;
  line-height: 1.6 !important;
}

/* Featured Card 2-Columns Layout */
.sorteo-featured-card {
  position: relative !important;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.92) 0%, rgba(10, 14, 26, 0.96) 100%) !important;
  border: 1px solid rgba(255, 222, 0, 0.28) !important;
  border-radius: 24px !important;
  padding: 36px 36px 28px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(255, 222, 0, 0.08) !important;
  margin-bottom: 48px !important;
  overflow: hidden !important;
}

.sorteo-card-glow-bg {
  position: absolute !important;
  top: -100px !important;
  right: -100px !important;
  width: 350px !important;
  height: 350px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.12) 0%, rgba(124, 58, 237, 0.06) 50%, transparent 70%) !important;
  pointer-events: none !important;
}

.sorteo-card-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}

/* Columna Izquierda: Showcase Holográfico 3D */
.sorteo-prize-showcase {
  display: flex !important;
  flex-direction: column !important;
  background: rgba(11, 15, 25, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 22px !important;
  position: relative !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
}

.showcase-top-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  z-index: 2 !important;
}

.badge-tier-raro {
  background: rgba(255, 222, 0, 0.15) !important;
  border: 1px solid rgba(255, 222, 0, 0.45) !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.2) !important;
}

.badge-clean-verif {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.35) !important;
  color: #00FF88 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

/* 3D Stage Pedestal */
.sorteo-stage-pedestal {
  position: relative !important;
  width: 100% !important;
  height: 250px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}

.stage-aura-glow {
  position: absolute !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.22) 0%, rgba(124, 58, 237, 0.15) 45%, transparent 70%) !important;
  filter: none !important;
  pointer-events: none !important;
}

.sorteo-premio-img {
  max-width: 90% !important;
  max-height: 200px !important;
  object-fit: contain !important;
  z-index: 2 !important;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.8)) !important;
  animation: none !important; /* 0% GPU idle */
  transition: transform 0.3s ease !important;
}

.sorteo-premio-img:hover {
  transform: scale(1.06) translateY(-4px) !important;
}

@keyframes floatStage {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

.stage-floor-reflection {
  position: absolute !important;
  bottom: 10px !important;
  width: 80% !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(255, 222, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 80%) !important;
  filter: blur(6px) !important;
  pointer-events: none !important;
}

/* Tarjeta de Valor en Trading */
.sorteo-val-display-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 222, 0, 0.35) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

.val-display-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}

.val-display-amount {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #FFDE00 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
}

.pill-alta-demanda {
  background: rgba(255, 42, 75, 0.15) !important;
  color: #FF2A4B !important;
  border: 1px solid rgba(255, 42, 75, 0.4) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
}

.sorteo-premio-meta-info {
  margin-top: auto !important;
}

.sorteo-item-nombre {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}

.sorteo-item-desc {
  font-size: 13px !important;
  color: #94A3B8 !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}

.sorteo-delivery-tag {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #38BDF8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Columna Derecha: Action & Gamification Hub (Twin Glassmorphic Sub-Card) */
.sorteo-action-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background: rgba(11, 15, 25, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px 26px !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
}

.sorteo-event-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 42, 75, 0.15) !important;
  border: 1px solid rgba(255, 42, 75, 0.4) !important;
  color: #FF2A4B !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  width: fit-content !important;
}

.sorteo-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #FF2A4B !important;
  box-shadow: 0 0 8px #FF2A4B !important;
  animation: none !important; /* 0% GPU idle */
}

.sorteo-event-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  line-height: 1.18 !important;
  margin-bottom: 6px !important;
}

.sorteo-event-sub {
  font-size: 13.5px !important;
  color: #94A3B8 !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
}

/* HUD Countdown Digital Clock 4 Boxes */
.sorteo-countdown-wrapper {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 222, 0, 0.2) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 18px !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
}

.countdown-eyebrow {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #FFDE00 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sorteo-countdown-clock {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.cd-hud-card {
  flex: 1 !important;
  min-width: 0 !important;
  background: linear-gradient(180deg, rgba(20, 26, 42, 0.85) 0%, rgba(10, 14, 24, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.cd-hud-card .cd-num {
  font-family: 'JetBrains Mono', 'Manrope', monospace !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #FFDE00 !important;
  display: block !important;
  line-height: 1 !important;
  text-shadow: 0 0 12px rgba(255, 222, 0, 0.35) !important;
  margin-bottom: 5px !important;
}

.cd-hud-card .cd-lbl {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  display: block !important;
}

.cd-hud-sep {
  font-family: 'JetBrains Mono', 'Manrope', monospace !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #FFDE00 !important;
  opacity: 0.55 !important;
  width: 12px !important;
  text-align: center !important;
  margin-top: -4px !important;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseSep {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.2; }
}

/* Stats Box */
.sorteo-stats-box {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(124, 58, 237, 0.1) !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  margin-bottom: 20px !important;
}

.sorteo-stats-box .stat-icon {
  font-size: 26px !important;
  flex-shrink: 0 !important;
}

.sorteo-stats-box .stat-number {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

.sorteo-stats-box .stat-sub {
  font-size: 12.5px !important;
  color: #A78BFA !important;
  margin-top: 2px !important;
}

/* Botones de Acción CTA Masivo */
.sorteo-actions-wrap {
  margin-bottom: 20px !important;
}

.btn-sorteo-action {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 22px !important;
  border-radius: 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
  border: none !important;
}

.btn-sorteo-enter {
  background: linear-gradient(135deg, #FFDE00 0%, #F59E0B 100%) !important;
  color: #000000 !important;
  box-shadow: 0 8px 25px rgba(255, 222, 0, 0.35) !important;
}

.btn-sorteo-enter:hover {
  background: #FFF066 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255, 222, 0, 0.5) !important;
}

.btn-sorteo-login {
  background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 100%) !important;
  color: #0F172A !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25) !important;
}

.btn-sorteo-login:hover {
  background: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.4) !important;
}

.sorteo-login-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #94A3B8 !important;
  text-align: center !important;
  margin-top: 14px !important;
  line-height: 1.4 !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sorteo-inscrito-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.4) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
}

.sorteo-inscrito-box .inscrito-icon {
  font-size: 28px !important;
}

.sorteo-inscrito-box strong {
  display: block !important;
  color: #00FF88 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.sorteo-inscrito-box span {
  font-size: 13px !important;
  color: #E2E8F0 !important;
}

.sorteo-inscrito-box code {
  background: rgba(0, 0, 0, 0.4) !important;
  color: #FFDE00 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

/* Ruleta Stream Button */
.sorteo-stream-launch {
  margin-bottom: 22px !important;
  text-align: center !important;
}

.btn-ruleta-stream {
  width: 100% !important;
  padding: 13px 20px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(99, 102, 241, 0.2) 100%) !important;
  color: #C084FC !important;
  border: 1px solid rgba(124, 58, 237, 0.45) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-ruleta-stream:hover {
  background: rgba(124, 58, 237, 0.4) !important;
  color: #FFFFFF !important;
  border-color: #A855F7 !important;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3) !important;
}

.ruleta-stream-hint {
  display: block !important;
  font-size: 11px !important;
  color: #64748B !important;
  margin-top: 6px !important;
}

/* Participants Feed Section */
.sorteo-feed-section {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

.feed-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.feed-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #00FF88 !important;
  box-shadow: 0 0 6px #00FF88 !important;
}

.feed-header-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.sorteo-avatar-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-height: 80px !important;
  overflow-y: auto !important;
}

.sorteo-user-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  color: #CBD5E1 !important;
}

.user-chip-img {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.sorteo-sin-participantes {
  font-size: 12px !important;
  color: #64748B !important;
  font-style: italic !important;
}

/* 4 Garantías y Reglas */
.sorteo-rules-section {
  margin-bottom: 50px !important;
}

.sorteos-section-head {
  text-align: center !important;
  margin-bottom: 28px !important;
}

.sorteos-section-head .cat-eyebrow {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #FFDE00 !important;
  margin-bottom: 6px !important;
}

.sorteos-section-head h2 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}

.sorteos-section-head p {
  font-size: 14px !important;
  color: #94A3B8 !important;
}

.sorteo-rules-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}

.sorteo-rule-card {
  background: rgba(17, 24, 39, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 22px 18px !important;
  text-align: center !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}

.sorteo-rule-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 222, 0, 0.35) !important;
}

.sorteo-rule-card .rule-icon {
  font-size: 28px !important;
  margin-bottom: 12px !important;
}

.sorteo-rule-card h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}

.sorteo-rule-card p {
  font-size: 12.5px !important;
  color: #94A3B8 !important;
  line-height: 1.5 !important;
}

/* Salón de Ganadores Históricos */
.past-winners-section {
  margin-bottom: 60px !important;
}

.past-sorteos-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}

.past-sorteo-card {
  background: rgba(17, 24, 39, 0.8) !important;
  border: 1px solid rgba(255, 222, 0, 0.2) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.25s ease !important;
}

.past-sorteo-card:hover {
  transform: translateY(-4px) !important;
  border-color: #FFDE00 !important;
}

.past-card-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(255, 222, 0, 0.15) !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.past-card-img img {
  width: 100% !important;
  height: 150px !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
}

.past-card-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 4px !important;
}

.past-card-val {
  font-size: 12px !important;
  color: #94A3B8 !important;
  margin-bottom: 8px !important;
}

.past-card-val strong {
  color: #FFDE00 !important;
}

.past-card-winner {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #00FF88 !important;
}

.sorteos-empty-past {
  text-align: center !important;
  padding: 30px 20px !important;
  background: rgba(17, 24, 39, 0.5) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
}

.empty-past-icon {
  font-size: 36px !important;
  margin-bottom: 8px !important;
}

.empty-past-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 4px !important;
}

.empty-past-sub {
  font-size: 13px !important;
  color: #94A3B8 !important;
}

/* Modal de la Ruleta Stream HUD */
.ruleta-stream-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: none !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.ruleta-stream-backdrop.open,
.ruleta-stream-backdrop[aria-hidden="false"] {
  display: flex !important;
}

.ruleta-stream-dialog {
  position: relative !important;
  width: 100% !important;
  max-width: 680px !important;
  min-height: 520px !important;
  background: linear-gradient(135deg, #101422 0%, #080B12 100%) !important;
  border: 2px solid #FFDE00 !important;
  border-radius: 24px !important;
  box-shadow: 0 0 50px rgba(255, 222, 0, 0.25), 0 25px 60px rgba(0, 0, 0, 0.8) !important;
  padding: 28px !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.ruleta-stream-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 16px !important;
  margin-bottom: 18px !important;
}

.ruleta-brand-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ruleta-live-pulse {
  background: #FF2A4B !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 1px !important;
}

.ruleta-modal-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #FFDE00 !important;
  margin: 0 !important;
}

.ruleta-premio-tag {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

.ruleta-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ruleta-total-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

.btn-ruleta-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

.ruleta-premio-preview {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 222, 0, 0.25) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 20px !important;
}

.ruleta-premio-mini {
  width: 50px !important;
  height: 40px !important;
  object-fit: contain !important;
}

.ruleta-premio-info strong {
  display: block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  color: #FFDE00 !important;
}

.ruleta-premio-info span {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

.ruleta-viewport-wrapper {
  position: relative !important;
  height: 90px !important;
  background: #000000 !important;
  border: 2px solid rgba(255, 222, 0, 0.5) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

.ruleta-needle {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #FF2A4B !important;
  font-size: 14px !important;
  z-index: 10 !important;
  text-shadow: 0 0 8px #FF2A4B !important;
}

.needle-top { top: 2px !important; }
.needle-bottom { bottom: 2px !important; }

.ruleta-viewport {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

.ruleta-reel-track {
  display: flex !important;
  gap: 8px !important;
  padding: 0 20px !important;
  transition: transform 6s cubic-bezier(0.12, 0.8, 0.15, 1) !important;
}

.ruleta-user-slot {
  flex-shrink: 0 !important;
  width: 130px !important;
  height: 65px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
}

.ruleta-user-slot img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  margin-bottom: 4px !important;
}

.ruleta-user-slot span {
  font-size: 11px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  max-width: 110px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ruleta-controls {
  text-align: center !important;
}

.btn-girar-ruleta {
  width: 100% !important;
  padding: 16px 24px !important;
  background: linear-gradient(135deg, #FFDE00 0%, #F59E0B 100%) !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(255, 222, 0, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.btn-girar-ruleta:hover {
  background: #FFF066 !important;
  transform: translateY(-2px) !important;
}

.ruleta-sound-toggle {
  margin-top: 10px !important;
  font-size: 12px !important;
  color: #94A3B8 !important;
}

.confetti-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Winner Celebration Card */
.ruleta-winner-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(12, 16, 28, 0.98) !important;
  backdrop-filter: none !important;
  border-radius: 22px !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ruleta-winner-overlay.visible,
.ruleta-winner-overlay.open {
  display: flex !important;
}

.winner-card-celebrate {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.winner-trophy {
  font-size: 44px !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  animation: none !important; /* 0% GPU idle */
  display: block !important;
}

.winner-eyebrow {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #FFDE00 !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 4px !important;
}

.winner-avatar-wrap img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 3px solid #00FF88 !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.5) !important;
  margin: 10px 0 !important;
  object-fit: cover !important;
}

.winner-username-display {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #00FF88 !important;
  margin-bottom: 4px !important;
}

.winner-prize-awarded {
  font-size: 13px !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}

.winner-prize-awarded strong {
  color: #FFDE00 !important;
}

.winner-congrats {
  font-size: 12px !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}

.winner-actions {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  gap: 10px !important;
}

.btn-copiar-ganador {
  background: #FFDE00 !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 14px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(255, 222, 0, 0.3) !important;
}

.btn-otra-vez {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  width: 100% !important;
  text-align: center !important;
}

/* RESPONSIVE DESIGN (TABLET & MÓVIL) - UNIFIED ZERO-OVERFLOW & ZERO-TRUNCATION */
@media (max-width: 768px) {
  /* 1. Global Box-Sizing & Viewport Guard */
  html, body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  *, *:before, *:after {
    box-sizing: border-box !important;
  }

  .site-main-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  /* 2. Live Stream Ribbon */
  .live-stream-ribbon {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .live-ribbon-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .live-ribbon-sub, .live-ribbon-divider {
    display: none !important;
  }
  .live-pulse-badge {
    padding: 2px 6px !important;
    flex-shrink: 0 !important;
  }
  .live-pulse-text {
    font-size: 10px !important;
  }
  .live-ribbon-title {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .live-ribbon-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .live-stream-btn.btn-twitch,
  .live-stream-btn.btn-youtube {
    display: none !important;
  }
  .live-stream-btn {
    padding: 3px 8px !important;
    font-size: 10.5px !important;
  }

  /* 3. Header */
  .gaming-header {
    height: 52px !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 14, 20, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  }
  .gaming-header .header-search:not(.abierto) {
    display: none !important;
  }
  .gaming-header .header-search.abierto {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: rgba(10, 14, 23, 0.98) !important;
    border-bottom: 2px solid rgba(0, 240, 255, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.85) !important;
  }
  .gaming-header .header-search.abierto input[type="search"] {
    width: 100% !important;
    height: 40px !important;
    font-size: 13.5px !important;
    padding: 0 46px 0 36px !important;
    border-radius: 12px !important;
    background: rgba(22, 28, 45, 0.95) !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    color: #FFFFFF !important;
    display: block !important;
  }
  .gaming-header .header-search.abierto .buscar-sugerencias {
    position: relative !important;
    top: 8px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 100000 !important;
  }
  .gaming-header .header-search.abierto .hs-ico {
    position: absolute !important;
    left: 24px !important;
    top: 30px !important;
    transform: translateY(-50%) !important;
    color: #00F0FF !important;
    display: block !important;
  }
  .gaming-header .header-search.abierto .btn-search-clear,
  .header-search.abierto .btn-search-clear,
  .header-search.abierto #btnSearchClear {
    display: flex !important;
    position: absolute !important;
    right: 24px !important;
    top: 30px !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 50% !important;
    background: rgba(0, 240, 255, 0.25) !important;
    border: 1.5px solid #00F0FF !important;
    color: #00F0FF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 100005 !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.45) !important;
  }
  .gaming-header .header-search.abierto .btn-search-clear svg,
  .header-search.abierto .btn-search-clear svg {
    width: 13px !important;
    height: 13px !important;
    stroke: #00F0FF !important;
    stroke-width: 2.5 !important;
    display: block !important;
    pointer-events: none !important;
  }
  .gaming-header .header-search.abierto .btn-search-clear:hover,
  .gaming-header .header-search.abierto .btn-search-clear:active,
  .header-search.abierto .btn-search-clear:hover,
  .header-search.abierto .btn-search-clear:active {
    background: rgba(0, 240, 255, 0.3) !important;
    border-color: #00F0FF !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.5) !important;
    transform: translateY(-50%) scale(1.08) !important;
  }
  .gaming-header .header-search.abierto .search-kbd-hint {
    display: none !important;
  }
  .gaming-header .gaming-nav {
    display: none !important;
  }
  .gaming-header .brand-sub {
    display: none !important;
  }
  .gaming-header .brand-title {
    font-size: 14.5px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }
  .gaming-header .logo-badge {
    width: 28px !important;
    height: 28px !important;
  }
  .gaming-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .gaming-header .login-btn {
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
  .gaming-header .icon-btn {
    width: 32px !important;
    height: 32px !important;
  }

  /* 4. Sorteos Page Wrap */
  .sorteos-page-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 10px 14px 80px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .sorteos-hero-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
  }
  .sorteo-hero-pill {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    margin-bottom: 6px !important;
  }
  .sorteos-hero-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .sorteos-hero-desc {
    font-size: 12px !important;
    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5. Featured Card & Flex Containment */
  .sorteo-featured-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .sorteo-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .sorteo-prize-showcase {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .showcase-top-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .badge-tier-raro, .badge-clean-verif {
    font-size: 9.5px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }
  .sorteo-stage-pedestal {
    height: 125px !important;
    max-height: 125px !important;
    min-height: 100px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sorteo-premio-img {
    max-height: 110px !important;
    max-width: 80% !important;
    object-fit: contain !important;
  }
  .sorteo-val-display-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .val-display-label {
    font-size: 9px !important;
  }
  .val-display-amount {
    font-size: 16px !important;
  }
  .pill-alta-demanda {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
  }

  /* Critical: Meta info & Description Text wrapping */
  .sorteo-premio-meta-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .sorteo-item-nombre {
    font-size: 17px !important;
    margin-bottom: 3px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
  }
  .sorteo-item-desc {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 4px !important;
  }
  .sorteo-delivery-tag {
    font-size: 10.5px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    line-height: 1.35 !important;
  }

  /* 6. Action Panel (Optimizado UI/UX Rhythm) */
  .sorteo-action-panel {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .sorteo-event-pill {
    align-self: flex-start !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    margin-bottom: 8px !important;
  }
  .sorteo-event-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
  }
  .sorteo-event-sub {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sorteo-countdown-wrapper {
    width: 100% !important;
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }
  .countdown-eyebrow {
    font-size: 10px !important;
    margin-bottom: 10px !important;
    gap: 6px !important;
  }
  .sorteo-countdown-clock {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cd-hud-card {
    padding: 10px 4px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .cd-hud-card .cd-num {
    font-size: 20px !important;
    margin-bottom: 3px !important;
  }
  .cd-hud-card .cd-lbl {
    font-size: 8px !important;
    letter-spacing: 0.5px !important;
  }
  .cd-hud-sep {
    display: none !important;
  }
  .sorteo-stats-box {
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sorteo-stats-box .stat-icon {
    font-size: 22px !important;
  }
  .sorteo-stats-box .stat-number {
    font-size: 13.5px !important;
  }
  .sorteo-stats-box .stat-sub {
    font-size: 11px !important;
  }
  .sorteo-actions-wrap {
    margin-bottom: 20px !important;
    width: 100% !important;
  }
  .btn-sorteo-action {
    width: 100% !important;
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .sorteo-login-hint {
    font-size: 11px !important;
    margin-top: 10px !important;
    padding: 5px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .btn-ruleta-stream {
    padding: 10px 12px !important;
    font-size: 12px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }
  .sorteo-rules-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Modal Ruleta Stream & Ganador Responsive Mobile */
  .ruleta-stream-backdrop {
    padding: 10px !important;
  }
  .ruleta-stream-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px 12px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }
  .ruleta-winner-overlay {
    padding: 14px 10px !important;
    border-radius: 16px !important;
  }
  .winner-card-celebrate {
    width: 100% !important;
    max-width: 100% !important;
  }
  .winner-trophy {
    font-size: 34px !important;
    margin-bottom: 2px !important;
  }
  .winner-eyebrow {
    font-size: 11px !important;
  }
  .winner-avatar-wrap img {
    width: 54px !important;
    height: 54px !important;
    margin: 6px 0 !important;
  }
  .winner-username-display {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }
  .winner-prize-awarded {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }
  .winner-congrats {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }
  .winner-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .btn-copiar-ganador,
  .btn-otra-vez {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   CATÁLOGO GENERAL JAILBREAK (/jailbreak/catalogo) - GAMING SHOWCASE REDESIGN
   ========================================================================== */

.catalogo-main-container {
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 24px 28px 80px !important;
}

/* 1. Hero Header */
.catalogo-hero-header {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, rgba(18, 24, 38, 0.95) 0%, rgba(10, 14, 24, 0.98) 100%) !important;
  border: 1px solid rgba(255, 222, 0, 0.25) !important;
  border-radius: 24px !important;
  padding: 32px 36px 28px !important;
  margin-bottom: 40px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 222, 0, 0.08) !important;
  overflow: visible !important;
}

.catalogo-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #94A3B8 !important;
  margin-bottom: 16px !important;
}

.catalogo-breadcrumbs a {
  color: #38BDF8 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.catalogo-breadcrumbs a:hover {
  color: #FFDE00 !important;
}

.cb-sep {
  opacity: 0.4 !important;
}

.cb-curr {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.catalogo-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 222, 0, 0.12) !important;
  border: 1px solid rgba(255, 222, 0, 0.4) !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 0 15px rgba(255, 222, 0, 0.15) !important;
}

.badge-radar-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #FFDE00 !important;
  box-shadow: 0 0 8px #FFDE00 !important;
  animation: none !important; /* 0% GPU idle */
}

.catalogo-hero-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 12px !important;
  text-shadow: 0 0 30px rgba(255, 222, 0, 0.18) !important;
}

.catalogo-hero-sub {
  font-size: 15px !important;
  color: #94A3B8 !important;
  line-height: 1.6 !important;
  max-width: 920px !important;
  margin: 0 0 24px !important;
}

.catalogo-hero-sub strong {
  color: #FFFFFF !important;
}

/* Control Bar: Filter Chips + Search */
.catalogo-control-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 18px !important;
  margin-top: 20px !important;
  background: rgba(14, 18, 28, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 240, 255, 0.08) !important;
  border-top: 1px solid rgba(0, 240, 255, 0.35) !important;
}

.catalogo-chips-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.cat-chip-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(22, 27, 40, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  color: #A1A1AA !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  height: 38px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  white-space: nowrap !important;
  outline: none !important;
  touch-action: manipulation !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.cat-chip-icon {
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease !important;
}

.cat-chip-text {
  letter-spacing: 0.35px !important;
}

.cat-chip-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

.cat-chip-btn:hover {
  background: rgba(32, 40, 60, 0.95) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

.cat-chip-btn:hover .cat-chip-icon {
  transform: scale(1.15) !important;
}

.cat-chip-btn:hover .cat-chip-badge {
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.12) !important;
}

.cat-chip-btn:active {
  transform: scale(0.97) !important;
}

.cat-chip-btn.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.18) 0%, rgba(124, 58, 237, 0.14) 100%) !important;
  border-color: #FFD700 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.28), inset 0 0 8px rgba(255, 215, 0, 0.08) !important;
}

.cat-chip-btn.active .cat-chip-badge {
  background: rgba(255, 215, 0, 0.22) !important;
  border-color: rgba(255, 215, 0, 0.6) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.35) !important;
}

/* ================================================================
   BUSCADOR GLOBAL REACTIVO DEL HUB (/jailbreak/catalogo)
   ================================================================ */
.catalogo-global-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(11, 14, 20, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 0 12px 0 16px !important;
  height: 42px !important;
  min-height: 42px !important;
  min-width: 260px !important;
  max-width: 520px !important;
  flex: 1 1 340px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.catalogo-global-search:focus-within {
  border-color: #00F0FF;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.32), inset 0 2px 4px rgba(0, 0, 0, 0.35);
  background: #0E131F;
}

.cgs-icon {
  display: inline-flex;
  align-items: center;
  color: #64748B;
  margin-right: 8px;
  flex-shrink: 0;
  transition: color 0.2s ease;
  pointer-events: none;
}

.catalogo-global-search:focus-within .cgs-icon { color: #00F0FF; }

.cgs-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  box-sizing: border-box;
}

.cgs-input::placeholder { color: #64748B; font-size: 13px; }

.cgs-clear {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94A3B8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.cgs-clear:hover { background: rgba(239, 68, 68, 0.25); color: #EF4444; }

.cgs-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  line-height: 1;
  pointer-events: none;
  margin-right: 4px;
}

.cgs-item.keyboard-selected {
  background: rgba(0, 240, 255, 0.12) !important;
  border-left: 3px solid #00F0FF !important;
}

/* DROPDOWN / SPOTLIGHT DEL BUSCADOR GLOBAL */
.cgs-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 340px;
  max-width: 520px;
  background: rgba(11, 14, 20, 0.97);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 240, 255, 0.12);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 9999;
  overflow: hidden;
  animation: cgsDropIn 0.15s ease;
}

@keyframes cgsDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cgs-header {
  padding: 8px 14px 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #64748B;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cgs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
  cursor: pointer;
}

.cgs-item:hover { background: rgba(0, 240, 255, 0.07); }

.cgs-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.cgs-thumb img { width: 100%; height: 100%; object-fit: contain; }

.cgs-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cgs-nombre {
  font-size: 13px;
  font-weight: 700;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cgs-trade {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 600;
}

.cgs-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.cgs-precio {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #FFD700;
}

.cgs-stock { font-size: 11px; font-weight: 700; }
.cgs-stock.in { color: #10B981; }
.cgs-stock.out { color: #64748B; }

.cgs-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #00F0FF;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 240, 255, 0.04);
  transition: background 0.15s ease;
}

.cgs-footer:hover { background: rgba(0, 240, 255, 0.1); }

.cgs-empty {
  padding: 18px 14px;
  text-align: center;
  color: #64748B;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* BARRA UNIFICADA DE CATEGORÍA - FILA DE CHIPS + SELECTOR GAMA */
.cat-controls-unified-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  overflow: visible !important;
}

.cat-tier-selector { flex-shrink: 0; }

.cat-tier-select {
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  color: #F8FAFC;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.cat-tier-select:focus {
  border-color: #A855F7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.cat-tier-select option { background: #0B0E14; color: #F8FAFC; }

.cat-chip-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  color: inherit;
  margin-left: 2px;
}

.cat-chip.active .cat-chip-cnt {
  background: rgba(0, 229, 255, 0.2);
}

/* Responsive buscador global hub */
@media (max-width: 640px) {
  .catalogo-global-search {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 44px !important;
  }
  .cgs-input { font-size: 14px !important; }
  .cgs-dropdown {
    min-width: 0 !important;
    left: -16px !important;
    right: -16px !important;
    max-width: none !important;
    border-radius: 0 0 14px 14px !important;
  }
  .cat-controls-unified-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .cat-tier-selector { width: 100% !important; }
  .cat-tier-select { width: 100% !important; border-radius: 9999px !important; }
  .cat-filter-chips { flex-wrap: nowrap !important; overflow-x: auto !important; }
}

@media (min-width: 641px) and (max-width: 1199px) {
  .catalogo-global-search {
    min-width: 220px !important;
    max-width: 360px !important;
  }
  .cat-controls-unified-row { flex-wrap: nowrap !important; overflow-x: auto !important; }
}

.catalogo-live-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #0B0E14 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  padding: 0 12px 0 14px !important;
  height: 38px !important;
  min-width: 230px !important;
  max-width: 300px !important;
  flex: 1 1 230px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}

.catalogo-live-search:focus-within {
  border-color: #00F0FF !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.28), inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
  background: #0E131F !important;
}

.cls-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748B !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}

.catalogo-live-search:focus-within .cls-icon {
  color: #00F0FF !important;
  opacity: 1 !important;
}

.cls-input {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #FFFFFF !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
}

.cls-input::placeholder {
  color: #64748B !important;
  font-size: 12.5px !important;
}

.cls-clear-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  color: #94A3B8 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s !important;
}

.cls-clear-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #EF4444 !important;
}

/* Estado vacío de filtrado */
.cat-empty-state {
  text-align: center !important;
  padding: 40px 20px !important;
  background: rgba(14, 18, 28, 0.6) !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  margin: 20px 0 40px !important;
  backdrop-filter: none !important;
}

.ces-icon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(255, 222, 0, 0.08) !important;
  border: 1px solid rgba(255, 222, 0, 0.25) !important;
  margin-bottom: 12px !important;
}

.ces-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px !important;
}

.ces-desc {
  font-size: 13.5px !important;
  color: #94A3B8 !important;
  margin: 0 0 16px !important;
}

.ces-desc strong {
  color: #00F0FF !important;
}

.ces-actions-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}

.ces-reset-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%) !important;
  border: 1px solid #FFDE00 !important;
  color: #FFDE00 !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.2) !important;
}

.ces-reset-btn:hover {
  background: #FFDE00 !important;
  color: #0B0E14 !important;
  transform: translateY(-1px) !important;
}

.ces-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(124, 58, 237, 0.2) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.5) !important;
  border-radius: 10px !important;
  color: #00F0FF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2) !important;
}

.ces-search-btn:hover {
  background: #00F0FF !important;
  color: #0B0E14 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4) !important;
}

/* 2. Secciones del Catálogo */
.catalogo-section {
  margin-bottom: 48px !important;
}

.catalogo-bento-grid.is-filtered {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.catalogo-modern-grid.is-filtered {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.cat-section-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.csh-pill {
  display: inline-block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #FFDE00 !important;
  margin-bottom: 4px !important;
}

.csh-pill-purple {
  color: #C084FC !important;
}

.csh-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}

.csh-sub {
  font-size: 13.5px !important;
  color: #8E92A4 !important;
}

/* 3. Bento Grid (Gaming HUD Asymmetric Bento: 2x2 Flagship + 2x1 Featured + 1x1 Tuning) */
.catalogo-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 22px !important;
}

.bento-cat-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 70%),
    linear-gradient(145deg, rgba(16, 22, 36, 0.94) 0%, rgba(10, 14, 24, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 24px 22px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Cyber HUD Top Corner Bevel Accent */
.bento-cat-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.08) 50%) !important;
  border-top-right-radius: 20px !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

/* Dynamic Scanline Shimmer Light Sweep on Hover */
.bento-cat-card::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.08) 50%, transparent 55%) !important;
  transform: rotate(25deg) translateY(-100%) !important;
  pointer-events: none !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-cat-card:hover {
  transform: translateY(-6px) !important;
}

.bento-cat-card:hover::after {
  transform: rotate(25deg) translateY(100%) !important;
}

/* Card Accent Borders & Neon Ambience */
.bcc-vehiculos {
  border-color: rgba(255, 222, 0, 0.32) !important;
}
.bcc-vehiculos:hover {
  border-color: #FFDE00 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 222, 0, 0.28) !important;
}

.bcc-hypers {
  border-color: rgba(124, 58, 237, 0.38) !important;
}
.bcc-hypers:hover {
  border-color: #C084FC !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(124, 58, 237, 0.35) !important;
}

.bcc-texturas {
  border-color: rgba(0, 240, 255, 0.32) !important;
}
.bcc-texturas:hover {
  border-color: #00F0FF !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 240, 255, 0.28) !important;
}

.bcc-llantas {
  border-color: rgba(56, 189, 248, 0.32) !important;
}
.bcc-llantas:hover {
  border-color: #38BDF8 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(56, 189, 248, 0.28) !important;
}

/* Card Header Meta */
.bcc-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.bcc-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.bcc-gold { background: rgba(255, 222, 0, 0.15) !important; color: #FFDE00 !important; border: 1px solid rgba(255, 222, 0, 0.35) !important; }
.bcc-purple { background: rgba(124, 58, 237, 0.2) !important; color: #C084FC !important; border: 1px solid rgba(124, 58, 237, 0.4) !important; }
.bcc-cyan { background: rgba(0, 240, 255, 0.15) !important; color: #00F0FF !important; border: 1px solid rgba(0, 240, 255, 0.35) !important; }
.bcc-blue { background: rgba(56, 189, 248, 0.15) !important; color: #38BDF8 !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; }

.bcc-count {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.5px !important;
}

/* Pedestales Volumétricos Multicapa */
.bcc-img-pedestal {
  position: relative !important;
  height: 155px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
}

.pedestal-glow {
  position: absolute !important;
  width: 135px !important;
  height: 75px !important;
  border-radius: 50% !important;
  filter: none !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

.bento-cat-card:hover .pedestal-glow {
  opacity: 0.7 !important;
  transform: scale(1.15) !important;
}

.pedestal-glow.gold-glow { background: #FFDE00 !important; }
.pedestal-glow.purple-glow { background: #7C3AED !important; }
.pedestal-glow.cyan-glow { background: #00F0FF !important; }
.pedestal-glow.blue-glow { background: #38BDF8 !important; }

/* Anillo holográfico de perspectiva 3D */
.bcc-img-pedestal::after {
  content: "" !important;
  position: absolute !important;
  bottom: 8px !important;
  width: 130px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%) !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

.bcc-vehiculos .bcc-img-pedestal::after { border-color: rgba(255, 222, 0, 0.28) !important; }
.bcc-hypers .bcc-img-pedestal::after { border-color: rgba(124, 58, 237, 0.35) !important; }
.bcc-texturas .bcc-img-pedestal::after { border-color: rgba(0, 240, 255, 0.3) !important; }
.bcc-llantas .bcc-img-pedestal::after { border-color: rgba(56, 189, 248, 0.3) !important; }

.bcc-hero-img {
  max-width: 90% !important;
  max-height: 130px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.85)) !important;
  transition: transform 0.3s ease !important;
  z-index: 2 !important;
}

.bento-cat-card:hover .bcc-hero-img {
  transform: scale(1.08) translateY(-4px) !important;
}

.bcc-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.bcc-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.bcc-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
}

.bcc-hud-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #FFDE00 !important;
  background: rgba(255, 222, 0, 0.12) !important;
  border: 1px solid rgba(255, 222, 0, 0.28) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

.bcc-desc {
  font-size: 12.5px !important;
  color: #8E92A4 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px !important;
}

/* Micro-pills de Telemetría Táctica */
.bcc-telemetry-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 4px 0 12px !important;
}

.bcc-telemetry-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
}

.bento-cat-card:hover .bcc-telemetry-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

/* CTA Gaming Capsule */
.bcc-cta {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  width: fit-content !important;
  margin-top: auto !important;
  transition: all 0.25s ease !important;
}

.bcc-chevron {
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

.bento-cat-card:hover .bcc-chevron {
  transform: translateX(4px) !important;
}

.bcc-cta-gold {
  color: #FFDE00 !important;
  border: 1px solid rgba(255, 222, 0, 0.3) !important;
  background: rgba(255, 222, 0, 0.08) !important;
}
.bcc-vehiculos:hover .bcc-cta-gold {
  background: rgba(255, 222, 0, 0.2) !important;
  border-color: #FFDE00 !important;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.35) !important;
}

.bcc-cta-purple {
  color: #C084FC !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  background: rgba(124, 58, 237, 0.1) !important;
}
.bcc-hypers:hover .bcc-cta-purple {
  background: rgba(124, 58, 237, 0.22) !important;
  border-color: #C084FC !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.35) !important;
}

.bcc-cta-cyan {
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  background: rgba(0, 240, 255, 0.08) !important;
}
.bcc-texturas:hover .bcc-cta-cyan {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35) !important;
}

.bcc-cta-blue {
  color: #38BDF8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  background: rgba(56, 189, 248, 0.08) !important;
}
.bcc-llantas:hover .bcc-cta-blue {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important;
}

/* Asymmetric Bento Desktop Placement (min-width: 1025px) */
@media (min-width: 1025px) {
  .bento-cat-card.bcc-vehiculos {
    grid-column: 1 / span 2 !important;
    grid-row: 1 / span 2 !important;
    padding: 28px 26px !important;
  }
  .bento-cat-card.bcc-vehiculos .bcc-hero-pedestal {
    height: 195px !important;
    margin-bottom: 18px !important;
  }
  .bento-cat-card.bcc-vehiculos .bcc-hero-img {
    max-height: 165px !important;
  }
  .bento-cat-card.bcc-vehiculos .bcc-title {
    font-size: 26px !important;
  }
  .bento-cat-card.bcc-hypers {
    grid-column: 3 / span 2 !important;
    grid-row: 1 / span 1 !important;
  }
  .bcc-hypers-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    flex: 1 !important;
  }
  .bcc-hypers-layout .bcc-img-pedestal {
    width: 160px !important;
    min-width: 160px !important;
    height: 145px !important;
    margin-bottom: 0 !important;
  }
  .bento-cat-card.bcc-texturas {
    grid-column: 3 / span 1 !important;
    grid-row: 2 / span 1 !important;
  }
  .bento-cat-card.bcc-llantas {
    grid-column: 4 / span 1 !important;
    grid-row: 2 / span 1 !important;
  }
}
/* 4. Subgrid (4 Columnas Balanceadas = 8 Cards Simétricas) */
.catalogo-modern-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}

.cat-modern-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(145deg, rgba(16, 21, 33, 0.85) 0%, rgba(10, 13, 22, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 16px 16px 14px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45) !important;
}

.cat-modern-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(124, 58, 237, 0.45) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 20px rgba(124, 58, 237, 0.2) !important;
}

.cm-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #A78BFA !important;
  margin-bottom: 8px !important;
}

.cm-img-wrap {
  position: relative !important;
  height: 110px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 10px !important;
}

.cm-glow-radial {
  position: absolute !important;
  width: 90px !important;
  height: 50px !important;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.25) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.cm-img-wrap img {
  max-width: 85% !important;
  max-height: 90px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)) !important;
  transition: transform 0.25s ease !important;
}

.cat-modern-card:hover .cm-img-wrap img {
  transform: scale(1.08) !important;
}

.cm-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.cm-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px !important;
}

.cm-desc {
  font-size: 11.5px !important;
  color: #8E92A4 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  flex: 1 !important;
}

.cm-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cm-count-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
}

.cm-link {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #FFDE00 !important;
  transition: transform 0.2s ease !important;
}

.cat-modern-card:hover .cm-link {
  transform: translateX(3px) !important;
}

/* ==========================================================================
   CYBERPUNK BENTO GRID — PERSONALIZACIÓN & ARSENAL (#secSubgrid)
   ========================================================================== */

.catalogo-armory-bento {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cat-armory-card {
  --cac-neon: #A855F7;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(145deg, #131826 0%, #0d121c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  padding: 18px 18px 16px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  /* Chamfer táctico militar a 45 grados en esquina superior derecha */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%) !important;
  box-sizing: border-box !important;
}

.cat-armory-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 28px !important;
  height: 28px !important;
  background: linear-gradient(135deg, transparent 48%, var(--cac-neon) 50%, var(--cac-neon) 60%, transparent 62%) !important;
  pointer-events: none !important;
  opacity: 0.75 !important;
  transition: opacity 0.25s ease !important;
}

.cat-armory-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--cac-neon) !important;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 255, 255, 0.05), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
}

.cat-armory-card:hover::before {
  opacity: 1 !important;
}

.cac-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding-right: 14px !important;
}

.cac-slot-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: var(--cac-neon) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
}

.cac-stock-count {
  font-family: 'JetBrains Mono', 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.5px !important;
}

.cac-pedestal {
  position: relative !important;
  height: 105px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  background: radial-gradient(ellipse at center bottom, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.45) 80%) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
}

.cac-glow-aura {
  position: absolute !important;
  width: 110px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--cac-neon) 0%, transparent 70%) !important;
  opacity: 0.22 !important;
  filter: none !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.cat-armory-card:hover .cac-glow-aura {
  opacity: 0.45 !important;
  transform: scale(1.15) !important;
}

.cac-img {
  max-width: 82% !important;
  max-height: 80px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75)) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}

.cat-armory-card:hover .cac-img {
  transform: scale(1.09) translateY(-3px) !important;
}

.cac-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.cac-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.3px !important;
}

.cac-desc {
  font-size: 12px !important;
  color: #94A3B8 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  flex: 1 !important;
}

.cac-chips-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.cac-sample-chip {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #E2E8F0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.cat-armory-card:hover .cac-sample-chip {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.cac-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cac-cta {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--cac-neon) !important;
  letter-spacing: 0.5px !important;
  transition: transform 0.2s ease !important;
}

.cat-armory-card:hover .cac-cta {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   PANORÁMICAS DECORACIÓN & HABITAT (#secHogar)
   ========================================================================== */

.catalogo-hogar-panoramic {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hogar-panoramic-card {
  --hpc-neon: #F59E0B;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.88) 0%, rgba(11, 14, 20, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
}

.hogar-panoramic-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--hpc-neon) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 255, 255, 0.04) !important;
}

.hpc-glow-ambient {
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--hpc-neon) 0%, transparent 70%) !important;
  opacity: 0.12 !important;
  filter: none !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.hogar-panoramic-card:hover .hpc-glow-ambient {
  opacity: 0.25 !important;
}

.hpc-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hpc-slots-wrap {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.hpc-slot-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  color: var(--hpc-neon) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.hpc-stock-pill {
  font-family: 'JetBrains Mono', 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.5px !important;
}

/* Ecualizador de Audio Dinámico CSS */
.hpc-equalizer-wrap {
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  height: 18px !important;
  padding: 2px 6px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(236, 72, 153, 0.25) !important;
}

.eq-bar {
  width: 3px !important;
  background: #EC4899 !important;
  border-radius: 2px !important;
  animation: none !important; /* 0% GPU idle */
}

.eq-bar-1 { height: 6px; animation-duration: 0.8s; }
.eq-bar-2 { height: 14px; animation-duration: 0.5s; animation-delay: 0.15s; }
.eq-bar-3 { height: 10px; animation-duration: 0.7s; animation-delay: 0.3s; }
.eq-bar-4 { height: 16px; animation-duration: 0.6s; animation-delay: 0.1s; }

@keyframes eqBounce {
  0% { height: 3px; }
  50% { height: 16px; }
  100% { height: 6px; }
}

.hpc-main-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  flex: 1 !important;
}

.hpc-pedestal-wrap {
  position: relative !important;
  width: 140px !important;
  min-width: 140px !important;
  height: 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(ellipse at center bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.5) 80%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hpc-pedestal-glow {
  position: absolute !important;
  width: 100px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--hpc-neon) 0%, transparent 70%) !important;
  opacity: 0.25 !important;
  filter: none !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.hogar-panoramic-card:hover .hpc-pedestal-glow {
  opacity: 0.45 !important;
}

.hpc-img {
  max-width: 85% !important;
  max-height: 100px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.75)) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}

.hogar-panoramic-card:hover .hpc-img {
  transform: scale(1.08) translateY(-3px) !important;
}

.hpc-content-col {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.hpc-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px !important;
  letter-spacing: 0.3px !important;
}

.hpc-desc {
  font-size: 12.5px !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
  margin: 0 0 12px !important;
}

.hpc-samples-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.hpc-sample-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #E2E8F0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  letter-spacing: 0.3px !important;
}

.hogar-panoramic-card:hover .hpc-sample-pill {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.hpc-action-row {
  display: flex !important;
  align-items: center !important;
}

.hpc-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: var(--hpc-neon) !important;
  transition: transform 0.2s ease !important;
}

.hogar-panoramic-card:hover .hpc-cta-btn {
  transform: translateX(4px) !important;
}

/* 5. Responsive Mobile & Tablet (Gaming HUD Asymmetric Layouts) */
@media (max-width: 1024px) {
  .catalogo-bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .bento-cat-card.bcc-vehiculos {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  .bento-cat-card.bcc-hypers {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  .bcc-hypers-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .bcc-hypers-layout .bcc-img-pedestal {
    width: 145px !important;
    min-width: 145px !important;
    height: 135px !important;
    margin-bottom: 0 !important;
  }
  .bento-cat-card.bcc-texturas {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
  .bento-cat-card.bcc-llantas {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
  .catalogo-modern-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .catalogo-armory-bento {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .catalogo-hogar-panoramic {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .catalogo-hero-title {
    font-size: 32px !important;
  }
}

@media (max-width: 640px) {
  .catalogo-main-container {
    padding: 16px 14px 60px !important;
  }
  .catalogo-hero-header {
    padding: 20px 16px 18px !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
  }
  .catalogo-hero-title {
    font-size: 24px !important;
  }
  .catalogo-hero-sub {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  .catalogo-chips-bar {
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 2px 2px 6px 2px !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
  }
  .catalogo-chips-bar::-webkit-scrollbar {
    display: none !important;
  }
  .cat-chip-btn {
    flex-shrink: 0 !important;
    font-size: 12.5px !important;
    padding: 6px 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
  }
  .cat-chip-badge {
    height: 17px !important;
    min-width: 19px !important;
    font-size: 10px !important;
    padding: 0 5px !important;
  }
  .catalogo-live-search {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
  }
  .catalogo-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .bento-cat-card.bcc-vehiculos,
  .bento-cat-card.bcc-hypers,
  .bento-cat-card.bcc-texturas,
  .bento-cat-card.bcc-llantas {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
  .bcc-hypers-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .bcc-hypers-layout .bcc-img-pedestal {
    width: 100% !important;
    height: 125px !important;
    margin-bottom: 10px !important;
  }
  .catalogo-modern-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .catalogo-armory-bento {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .catalogo-hogar-panoramic {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .cat-armory-card {
    padding: 14px 14px 12px !important;
  }
  .cac-pedestal {
    height: 105px !important;
  }
  .cac-img {
    max-height: 80px !important;
  }
  .cac-title {
    font-size: 16px !important;
  }
  .hpc-main-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .hpc-pedestal-wrap {
    width: 100% !important;
    min-width: 100% !important;
    height: 115px !important;
  }
  .hpc-title {
    font-size: 18px !important;
  }
  .cat-modern-card {
    padding: 12px 10px 10px !important;
  }
  .cm-img-wrap {
    height: 85px !important;
  }
  .cm-title {
    font-size: 15px !important;
  }
  .cm-desc {
    display: none !important;
  }
}

/* ==========================================================================
   MULTI-CURRENCY SELECTOR (7 MONEDAS LATAM / ES / US)
   ========================================================================== */

.currency-selector-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 95 !important;
}

.currency-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #E2E8F0 !important;
  padding: 6px 11px !important;
  border-radius: 20px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  outline: none !important;
}

.currency-pill-btn:hover {
  background: rgba(0, 255, 136, 0.1) !important;
  border-color: rgba(0, 255, 136, 0.4) !important;
  color: #00FF88 !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2) !important;
}

.curr-flag {
  font-size: 14px !important;
  line-height: 1 !important;
}

.curr-code {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.curr-arrow {
  transition: transform 0.2s ease !important;
  color: #94A3B8 !important;
}

.currency-pill-btn[aria-expanded="true"] .curr-arrow {
  transform: rotate(180deg) !important;
}

.currency-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 220px !important;
  background: rgba(12, 16, 26, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 255, 136, 0.3) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 255, 136, 0.12) !important;
  padding: 8px !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  animation: mtxFadeDown 0.18s ease-out forwards !important;
}

.currency-dropdown[hidden] {
  display: none !important;
}

@keyframes mtxFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.curr-dropdown-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #64748B !important;
  padding: 4px 8px 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 4px !important;
}

.curr-opt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 7px 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: #CBD5E1 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}

.curr-opt:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.curr-opt.active {
  background: rgba(0, 255, 136, 0.15) !important;
  border: 1px solid rgba(0, 255, 136, 0.3) !important;
  color: #00FF88 !important;
  font-weight: 700 !important;
}

.opt-flag {
  font-size: 16px !important;
}

.opt-info {
  display: flex !important;
  flex-direction: column !important;
}

.opt-code {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.opt-name {
  font-size: 10px !important;
  color: #94A3B8 !important;
}

@media (max-width: 700px) {
  .currency-pill-btn {
    padding: 4px 6px !important;
    font-size: 11px !important;
    border-radius: 14px !important;
    gap: 3px !important;
  }
  .currency-dropdown {
    width: 195px !important;
    right: -10px !important;
  }
}

/* ==========================================================================
   MASTER FIX: HEADER & CATÁLOGO MOBILE RESPONSIVE ZERO-OVERFLOW (<= 900px)
   ========================================================================== */

@media (max-width: 900px) {
  /* 0. Cero margen lateral fantasma en el contenedor principal */
  html, body.site-body {
    overflow-x: clip !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .site-main-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  /* 1. HEADER MONOFILA ZERO-OVERFLOW (LOCKED TO VIEWPORT) */
  .gaming-header {
    position: sticky !important;
    top: 0 !important;
    height: 52px !important;
    padding: 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Estrictamente una sola fila */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    overflow: visible !important;
    z-index: 10000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 14, 20, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .gaming-header .header-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    max-width: 170px !important;
    margin: 0 !important;
  }

  .gaming-header .logo-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .brand-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  .gaming-header .brand-badge-shop,
  .gaming-header .brand-sub,
  .gaming-header .header-search:not(.abierto),
  .gaming-header .gaming-nav {
    display: none !important;
  }

  .gaming-header .header-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  .gaming-header .currency-selector-wrap {
    flex-shrink: 0 !important;
  }

  .gaming-header .currency-pill-btn {
    padding: 0 5px !important;
    font-size: 10.5px !important;
    height: 28px !important;
    border-radius: 6px !important;
    gap: 2px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .gaming-header .currency-pill-btn .curr-arrow {
    display: none !important;
  }

  .gaming-header .icon-btn,
  .gaming-header .search-toggle,
  .gaming-header .cart-btn,
  .gaming-header .menu-toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
  }

  .gaming-header .search-toggle {
    color: #FFD700 !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
  }

  .gaming-header .icon-btn svg,
  .gaming-header .search-toggle svg,
  .gaming-header .cart-btn svg,
  .gaming-header .menu-toggle svg {
    width: 14px !important;
    height: 14px !important;
  }

  .gaming-header .header-search.abierto .btn-search-clear,
  .header-search.abierto .btn-search-clear,
  .header-search.abierto #btnSearchClear {
    display: flex !important;
    position: absolute !important;
    right: 24px !important;
    top: 30px !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 50% !important;
    background: rgba(0, 240, 255, 0.25) !important;
    border: 1.5px solid #00F0FF !important;
    color: #00F0FF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 100005 !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.45) !important;
  }

  /* 2. CATÁLOGO HERO HEADER: NO FLATTEN / NO COLLAPSE */
  .catalogo-main-container {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 10px 60px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .catalogo-hero-header {
    display: block !important; /* Jamás flex ni inline */
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 14px !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  .catalogo-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .catalogo-hero-badge {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 9.5px !important;
    letter-spacing: 0.6px !important;
    padding: 3px 8px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    margin-bottom: 10px !important;
  }

  .catalogo-hero-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
    word-break: break-word !important;
  }

  .catalogo-hero-sub {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .catalogo-control-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    margin-top: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .catalogo-chips-bar {
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 2px 2px 4px 2px !important;
    display: flex !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .catalogo-chips-bar::-webkit-scrollbar {
    display: none !important;
  }

  .cat-chip-btn {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 5px 11px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 9999px !important;
  }

  .cat-chip-badge {
    height: 16px !important;
    min-width: 18px !important;
    font-size: 9.5px !important;
    padding: 0 4px !important;
  }

  .catalogo-live-search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
    border-radius: 9999px !important;
  }

  /* 3. SECCIÓN ZONAS DE ÉLITE Y TÍTULOS */
  .csh-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .csh-sub {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* 4. PÁGINAS DE CATEGORÍA Y GRID 2 COLUMNAS */
  .catalogo,
  .categoria-seccion,
  .tabs-head,
  .cat-hint {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px 10px 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   MÉTODOS DE PAGO CYBERPUNK (NEQUI, BANCOLOMBIA, PAYPAL, CRIPTO)
   ========================================================================== */

.modal, .modal-backdrop, .modal *, .modal *:before, .modal *:after {
  box-sizing: border-box !important;
}

.metodos-pago {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.metodo-pago {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: rgba(18, 24, 38, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.metodo-pago.is-hidden {
  display: none !important;
}

.metodo-pago:hover {
  background: rgba(26, 34, 52, 0.85) !important;
  border-color: rgba(0, 255, 136, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.metodo-pago:has(input:checked),
.metodo-pago.checked {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%) !important;
  border-color: #00FF88 !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.18), inset 0 0 10px rgba(0, 255, 136, 0.04) !important;
}

/* Radio button */
.mp-radio-col {
  padding-top: 2px !important;
  flex-shrink: 0 !important;
}

.mp-radio-col input[type="radio"] {
  accent-color: #00FF88 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

.mp-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.mp-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mp-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mp-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}

.mp-nombre {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  color: #FFFFFF !important;
  letter-spacing: 0.3px !important;
}

/* Tags de país / categoría */
.mp-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.mp-tag-co {
  background: rgba(255, 222, 0, 0.12) !important;
  border: 1px solid rgba(255, 222, 0, 0.4) !important;
  color: #FFDE00 !important;
}

.mp-tag-int {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38BDF8 !important;
}

.mp-tag-crypto {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.4) !important;
  color: #00FF88 !important;
}

.mp-desc {
  font-size: 12.5px !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
}

/* Caja de datos para copiar (Nequi, Bancolombia, Binance, TRC20) */
.mp-dato-box {
  background: rgba(10, 14, 24, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mp-dato-lbl {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #64748B !important;
}

.mp-dato-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.mp-dato-code {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #00FF88 !important;
  word-break: break-all !important;
  user-select: all !important;
  flex: 1 1 auto !important;
}

.mp-btn-copiar {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.35) !important;
  color: #00FF88 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.mp-btn-copiar:hover {
  background: #00FF88 !important;
  color: #000000 !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4) !important;
}

.mp-btn-copiar.copied {
  background: #2ECC71 !important;
  color: #FFFFFF !important;
  border-color: #2ECC71 !important;
}

/* Enlace directo PayPal */
.mp-enlace-row {
  margin-top: 4px !important;
}

.mp-enlace-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #0079C1 0%, #00457C 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 121, 193, 0.3) !important;
  transition: all 0.2s ease !important;
}

.mp-enlace-btn:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 4px 18px rgba(0, 121, 193, 0.5) !important;
}

/* Adaptación móvil estricta (<= 768px) */
@media (max-width: 768px) {
  .modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 16px 12px 24px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .checkout-resumen {
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .resumen-fila {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    gap: 8px !important;
  }

  .resumen-total strong {
    font-size: 15px !important;
  }

  .metodos-pago {
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .metodo-pago {
    padding: 10px 8px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mp-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .mp-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .mp-title-wrap {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .mp-nombre {
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mp-tag {
    font-size: 9px !important;
    padding: 2px 5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .mp-desc {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .mp-dato-box {
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .mp-dato-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .mp-dato-code {
    font-size: 12px !important;
    min-width: 0 !important;
    word-break: break-all !important;
    overflow: hidden !important;
  }

  .mp-btn-copiar {
    padding: 3px 7px !important;
    font-size: 10.5px !important;
    flex-shrink: 0 !important;
  }

  .checkout-input {
    font-size: 15px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .checkout-hint {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

.badge-flag, .curr-flag {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif !important;
  font-style: normal !important;
  display: inline-block !important;
}

/* ==========================================================================
   DESKTOP GAMING & ULTRAWIDE ENHANCEMENTS (>= 961px / 1080p, 1440p, Ultrawide)
   ========================================================================== */

@media (min-width: 961px) {
  /* Ancho panorámico y centrado para pantallas grandes y zoom-out */
  .site-main-wrapper {
    width: calc(100% - 76px) !important;
    max-width: 100% !important;
    margin-left: 76px !important;
    margin-right: 0 !important;
  }

  .gaming-header-inner,
  .cat-hero,
  .catalogo-hero,
  .catalogo-main-container,
  .bovedas-main,
  .inicio,
  .sorteos-container,
  .trade-arena {
    max-width: 1332px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ficha de producto: 2 columnas balanceadas sin espacios muertos */
  .item-layout {
    display: grid !important;
    grid-template-columns: minmax(460px, 490px) 1fr !important;
    gap: 36px !important;
    max-width: 1332px !important;
    margin: 0 auto !important;
    padding: 24px 32px 10px !important;
    align-items: start !important;
  }

  .item-col-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
  }

  .item-img-wrap {
    position: relative !important;
    width: 100% !important;
  }

  .item-img {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(124, 58, 237, 0.35) !important;
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.12) 0%, rgba(10, 14, 24, 0.95) 100%) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 240, 255, 0.12) !important;
  }

  .item-img img {
    width: 100% !important;
    height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    padding: 10px !important;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6)) !important;
  }

  .item-left-extra {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .item-left-extra .item-hud-telemetria {
    margin: 0 !important;
  }

  .item-left-extra .item-benefits {
    margin-top: 0 !important;
  }

  /* GPU Acceleration y micro-interacciones suaves */
  .producto-card,
  .cat-card,
  .bridge-card,
  .sorteo-card,
  .bento-card {
    transform: translateZ(0) !important;
    /* will-change removed */
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  }

  .producto-card:hover,
  .cat-card:hover,
  .bridge-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 215, 0, 0.16) !important;
    border-color: rgba(255, 215, 0, 0.45) !important;
  }

  /* Tooltips dinámicos para el Sidebar Dock */
  .sidebar-item {
    position: relative !important;
  }

  .sidebar-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(11, 15, 25, 0.96);
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 215, 0, 0.15);
    white-space: nowrap;
    pointer-events: none;
    z-index: 999;
    letter-spacing: 0.3px;
  }
}

/* ==========================================================================
   MEGA MODERNIZACIÓN: CATEGORY BOTTOM SHEET, 5 BÓVEDAS & MOBILE HOME
   ========================================================================== */

/* REORDENAMIENTO MÓVIL: PORTADA COMPACTA & PRODUCTOS DE INMEDIATO */
@media (max-width: 900px) {
  body > main {
    display: flex !important;
    flex-direction: column !important;
  }
  section.hero-banner-wrap { order: 1 !important; }
  section.home-section.populares-section { order: 2 !important; }
  section.mockup-cards-section { order: 3 !important; }
  section.inicio-streamer-section { order: 4 !important; }
  section.bento-categories { order: 5 !important; }
  section.valores-section { order: 6 !important; }
  section.destacados-section { order: 7 !important; }

  /* Hero compacto en móvil */
  .hero-banner-wrap {
    padding: 10px 12px 6px !important;
  }
  .hero-banner-inner {
    height: auto !important;
    min-height: 180px !important;
    padding: 16px 10px !important;
    border-radius: 16px !important;
  }
  .hero-banner-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }
  .hero-badge {
    font-size: 10px !important;
    letter-spacing: 1px !important;
    padding: 4px 10px !important;
    max-width: 95% !important;
    white-space: nowrap !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
  }
  .hero-jailbreak-title {
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }
  .hero-tagline {
    display: block !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: center !important;
    color: #A6B4C9 !important;
  }
  .hero-categories-ticker {
    display: flex !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
    padding: 8px 12px !important;
    scroll-padding-inline: 12px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .hero-categories-ticker::-webkit-scrollbar {
    display: none !important;
  }
  .hero-categories-ticker .ticker-dot {
    display: none !important;
  }
  .hero-categories-ticker .ticker-pill {
    flex: 0 0 auto !important;
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .hero-categories-ticker .ticker-pill.ticker-highlight {
    background: rgba(255, 222, 0, 0.15) !important;
    border-color: #FFDE00 !important;
    color: #FFDE00 !important;
    font-weight: 800 !important;
  }
}

/* ===== SELECTOR TÁCTIL DE CATEGORÍAS (BOTTOM SHEET TIENDA) ===== */
.category-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.category-sheet-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.category-sheet {
  width: 100%;
  max-width: 540px;
  background: #0E121D;
  border-top: 2px solid #FFDE00;
  border-radius: 24px 24px 0 0;
  padding: 16px 20px 24px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.category-sheet-backdrop.visible .category-sheet {
  transform: translateY(0);
}

.cat-sheet-handle {
  width: 44px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  margin: 0 auto 14px;
}

.cat-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cat-sheet-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  margin: 0;
}

.cat-sheet-sub {
  font-size: 12.5px;
  color: #8E99B0;
  margin: 2px 0 0;
}

.cat-sheet-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.cat-sheet-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.cat-sheet-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.cat-sheet-card:hover, .cat-sheet-card:active {
  background: rgba(255, 222, 0, 0.08);
  border-color: rgba(255, 222, 0, 0.4);
  transform: translateX(4px);
}

.cs-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
}

.cs-info {
  flex: 1;
}

.cs-info strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.3px;
}

.cs-info small {
  font-size: 11.5px;
  color: #8E99B0;
}

.cs-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 222, 0, 0.15);
  color: #FFDE00;
  border: 1px solid rgba(255, 222, 0, 0.3);
  text-transform: uppercase;
}

.cat-sheet-all-btn {
  display: block;
  text-align: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  color: #FFDE00;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.cat-sheet-all-btn:hover {
  background: rgba(255, 222, 0, 0.15);
}

/* ===== ESTILOS DE LAS 5 BÓVEDAS MTX (/bovedas) ===== */
.bovedas-main {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.bovedas-hero {
  text-align: center;
  padding: 30px 20px 24px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, rgba(14, 18, 28, 0) 100%);
  border-radius: 24px;
  margin-bottom: 28px;
  border: 1px solid rgba(255, 215, 0, 0.15);
}

.bovedas-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 222, 0, 0.15);
  color: #FFDE00;
  border: 1px solid rgba(255, 222, 0, 0.35);
  margin-bottom: 12px;
}

.bovedas-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 10px;
  text-shadow: 0 0 20px rgba(255, 222, 0, 0.4);
}

.bovedas-sub {
  font-size: 15px;
  color: #A6B4C9;
  max-width: 620px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

/* Panel de estado del usuario */
.user-vault-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(11, 15, 25, 0.95);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 16px;
  padding: 14px 20px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.uvb-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.uvb-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #FFDE00;
  overflow: hidden;
  background: #000;
}

.uvb-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uvb-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
}

.uvb-stats {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.uvb-pill {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #C8D0E0;
}

.uvb-streak strong {
  color: #FF7700;
}

.uvb-points strong {
  color: #FFDE00;
}

.uvb-input-group {
  display: flex;
  gap: 8px;
}

.uvb-input-group input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  width: 220px;
}

.btn-uvb-login, .btn-uvb-refresh {
  background: #FFDE00;
  color: #0E1017;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-uvb-login:hover {
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.6);
}

/* Desktop: ocultar el dropdown móvil .site-nav */
@media (min-width: 961px) {
  .site-nav {
    display: none !important;
  }
}

/* Grilla de las 5 Bóvedas */
.vaults-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .vaults-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 8px !important;
  }
  .vault-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
}

@media (min-width: 1200px) {
  .vaults-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
  }
  .vault-card {
    padding: 20px 12px !important;
  }
  .vault-name {
    font-size: 19px !important;
  }
  .vault-img-box {
    width: 84px !important;
    height: 84px !important;
  }
  .vault-emoji-icon {
    font-size: 46px !important;
  }
}

.vault-card {
  background: #111522;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.vault-card:hover {
  transform: translateY(-6px);
}

/* Acentos por Tier */
.v-tier-1 { border-color: rgba(205, 127, 50, 0.4); }
.v-tier-1:hover { border-color: #CD7F32; box-shadow: 0 10px 30px rgba(205, 127, 50, 0.2); }
.glow-bronze { background: radial-gradient(circle, rgba(205, 127, 50, 0.3) 0%, transparent 70%); }

.v-tier-2 { border-color: rgba(192, 192, 192, 0.4); }
.v-tier-2:hover { border-color: #C0C0C0; box-shadow: 0 10px 30px rgba(192, 192, 192, 0.25); }
.glow-silver { background: radial-gradient(circle, rgba(192, 192, 192, 0.35) 0%, transparent 70%); }

.v-tier-3 { border-color: rgba(255, 215, 0, 0.4); }
.v-tier-3:hover { border-color: #FFD700; box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3); }
.glow-gold { background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, transparent 70%); }

.v-tier-4 { border-color: rgba(0, 229, 255, 0.4); }
.v-tier-4:hover { border-color: #00E5FF; box-shadow: 0 10px 30px rgba(0, 229, 255, 0.3); }
.glow-diamond { background: radial-gradient(circle, rgba(0, 229, 255, 0.35) 0%, transparent 70%); }

.v-tier-5 {
  border-color: rgba(255, 0, 128, 0.5);
  background: linear-gradient(180deg, #181128 0%, #0E121D 100%);
}
.v-tier-5:hover {
  border-color: #FF007F;
  box-shadow: 0 12px 35px rgba(255, 0, 128, 0.35), 0 0 20px rgba(255, 222, 0, 0.2);
}
.glow-legendary { background: radial-gradient(circle, rgba(255, 0, 128, 0.4) 0%, transparent 70%); }

.vault-tier-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #C8D0E0;
  margin-bottom: 16px;
}

.badge-legendary {
  background: linear-gradient(90deg, #FF007F, #FFDE00);
  color: #0E1017;
  font-weight: 900;
}

.vault-img-box {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.vault-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
}

.vault-emoji-icon {
  font-size: 54px;
  z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.vault-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.vault-unlock-rule {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #FFDE00;
  background: rgba(255, 222, 0, 0.08);
  border: 1px solid rgba(255, 222, 0, 0.2);
  padding: 5px 8px;
  border-radius: 999px;
  margin-bottom: 14px;
  line-height: 1.25;
  white-space: nowrap;
}

.rule-legendary {
  color: #FF007F;
  background: rgba(255, 0, 128, 0.12);
  border-color: rgba(255, 0, 128, 0.3);
}

.vault-loot-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  color: #A6B4C9;
}

.vault-loot-list li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-open-vault {
  width: 100%;
  padding: 12px;
  background: #FFDE00;
  color: #0E1017;
  border: none;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(255, 222, 0, 0.35);
}

.btn-open-vault:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(255, 222, 0, 0.7);
  transform: scale(1.02);
}

.btn-open-vault:disabled, .btn-open-vault.disabled {
  background: rgba(255, 255, 255, 0.12);
  color: #8E99B0;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-legendary-open {
  background: linear-gradient(90deg, #FF007F, #FFDE00);
  color: #0E1017;
  box-shadow: 0 4px 20px rgba(255, 0, 128, 0.4);
}

.vault-cooldown {
  font-size: 11px;
  color: #FF3366;
  margin-top: 8px;
}

/* Modal de Unboxing & Ruleta */
.unboxing-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.unboxing-modal-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.unboxing-modal {
  width: 100%;
  max-width: 640px;
  background: #0D111C;
  border: 2px solid #FFDE00;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 0 40px rgba(255, 222, 0, 0.3);
  box-sizing: border-box;
}

.unboxing-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.unboxing-modal-head h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #FFDE00;
  margin: 0;
}

.btn-close-unboxing {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
}

.unboxing-reel-container {
  width: 100%;
  height: 140px;
  position: relative;
  overflow: hidden;
  background: #080B12;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  margin-bottom: 20px;
}

.unboxing-needle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #FFDE00;
  font-size: 20px;
  z-index: 10;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.unboxing-needle::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 110px;
  background: rgba(255, 222, 0, 0.8);
  box-shadow: 0 0 8px #FFDE00;
}

.unboxing-reel {
  display: flex;
  position: absolute;
  top: 10px;
  left: 0;
  height: 120px;
  /* will-change removed */
}

.reel-item {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  padding: 6px;
  box-sizing: border-box;
}

/* ANTI-SPOILER: winner-card y near-miss-card no tienen estilos durante el giro.
   El highlight se aplica via JS con .reel-item--revealed solo al frenar la aguja (4.7s). */
.reel-item.winner-card {
  /* Sin borde ni fondo especial durante el spin — evita revelar el ganador */
}

/* La clase .reel-item--revealed se inyecta por JS únicamente al finalizar la animación.
   NO usa transform:scale porque .unboxing-reel-container tiene overflow:hidden y clippearía el efecto.
   El impacto visual se logra con borde grueso neón + glow dorado intenso + fondo dorado. */
.reel-item--revealed {
  border: 2px solid #FFDE00 !important;
  background: rgba(255, 222, 0, 0.18) !important;
  box-shadow:
    inset 0 0 14px rgba(255, 222, 0, 0.25),
    0 0 20px rgba(255, 222, 0, 0.6) !important;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
  z-index: 2;
  position: relative;
}

/* Llavero Gamer HUD */
.vault-keys-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px auto 18px auto;
  padding: 8px 18px;
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  max-width: 620px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
}
.vkh-title {
  font-size: 11px;
  font-weight: 800;
  color: #A0AEC0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vkh-capsules {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vkh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}
.vkh-pill:hover {
  transform: translateY(-1px);
}
.vkh-pill.vkh-silver { border-color: rgba(224, 224, 224, 0.4); color: #E0E0E0; }
.vkh-pill.vkh-gold { border-color: rgba(255, 215, 0, 0.4); color: #FFD700; }
.vkh-pill.vkh-diamond { border-color: rgba(0, 229, 255, 0.4); color: #00E5FF; }
.vkh-pill.vkh-supreme { border-color: rgba(255, 51, 102, 0.4); color: #FF3366; }
.vkh-qty {
  font-size: 12px;
  font-weight: 900;
}

/* Botón de Acceso a La Forja en el Llavero HUD */
.btn-open-forge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 136, 0, 0.22) 100%);
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: 30px;
  color: #FFD700;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-open-forge:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.28) 0%, rgba(255, 136, 0, 0.38) 100%);
  border-color: #FFD700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.45);
  transform: translateY(-1px) scale(1.02);
  color: #FFFFFF;
}
.bof-icon {
  font-size: 13px;
}
.bof-text {
  text-transform: uppercase;
}

/* Modal de La Forja de Llaves (Key Fusion) */
.forge-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.88);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10006;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.forge-modal-backdrop.visible {
  opacity: 1;
  visibility: visible;
}
.forge-modal-dialog {
  background: #0B0E14;
  background: linear-gradient(180deg, #0F1322 0%, #0B0E14 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 215, 0, 0.2);
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.forge-modal-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FFD700 0%, #00E5FF 50%, #FF3366 100%);
  pointer-events: none;
}
.forge-modal-head {
  padding: 18px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.forge-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.forge-modal-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
}
.forge-modal-sub {
  font-size: 12px;
  color: #A0AEC0;
  margin: 0;
}
.btn-close-forge {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #A0AEC0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.btn-close-forge:hover {
  color: #FFFFFF;
  border-color: #FF3366;
  background: rgba(255, 51, 102, 0.15);
}
.forge-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  box-sizing: border-box;
}
.forge-recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}
.forge-card {
  position: relative;
  background: rgba(16, 21, 34, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.28s ease;
  overflow: hidden;
}
.forge-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.forge-card.f-card-gold {
  border-color: rgba(255, 215, 0, 0.3);
}
.forge-card.f-card-gold:hover {
  border-color: #FFD700;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.22);
}
.forge-card.f-card-diamond {
  border-color: rgba(0, 229, 255, 0.3);
}
.forge-card.f-card-diamond:hover {
  border-color: #00E5FF;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.22);
}
.forge-card.f-card-locked {
  border-color: rgba(255, 51, 102, 0.25);
  background: rgba(18, 14, 24, 0.75);
}
.fc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fc-tier-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 20px;
}
.f-card-gold .fc-tier-badge {
  background: rgba(255, 215, 0, 0.15);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.35);
}
.f-card-diamond .fc-tier-badge {
  background: rgba(0, 229, 255, 0.15);
  color: #00E5FF;
  border: 1px solid rgba(0, 229, 255, 0.35);
}
.fc-tier-badge.badge-mythic {
  background: rgba(255, 51, 102, 0.18);
  color: #FF3366;
  border: 1px solid rgba(255, 51, 102, 0.4);
}
.fc-icon {
  font-size: 26px;
}
.fc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}
.fc-desc {
  font-size: 11px;
  color: #A0AEC0;
  line-height: 1.4;
  margin: 0 0 14px 0;
  min-height: 32px;
}
.fc-requirements {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-req-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.fc-req-label {
  color: #A0AEC0;
  font-weight: 600;
}
.fc-req-val {
  font-weight: 700;
  color: #FFFFFF;
}
.fc-req-val.req-ok {
  color: #00FF88;
}
.fc-req-val.req-ko {
  color: #FF5555;
}
.btn-forge-action {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.22s ease;
  border: none;
  margin-top: auto;
}
.btn-forge-gold {
  background: linear-gradient(135deg, #FFD700 0%, #FF8800 100%);
  color: #0B0E14;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.3);
}
.btn-forge-gold:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
  transform: translateY(-1px);
}
.btn-forge-diamond {
  background: linear-gradient(135deg, #00E5FF 0%, #0077FF 100%);
  color: #0B0E14;
  box-shadow: 0 4px 14px rgba(0, 229, 255, 0.3);
}
.btn-forge-diamond:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(0, 229, 255, 0.5);
  transform: translateY(-1px);
}
.btn-forge-locked {
  background: rgba(255, 255, 255, 0.05);
  color: #718096;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: not-allowed;
}
.fc-lock-notice {
  background: rgba(255, 51, 102, 0.08);
  border: 1px solid rgba(255, 51, 102, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  color: #CBD5E0;
  margin-bottom: 14px;
}
.fc-lock-notice strong {
  color: #FF3366;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.fc-lock-notice p {
  margin: 6px 0 4px 0;
  font-size: 10px;
  color: #A0AEC0;
}
.fcl-list {
  margin: 4px 0 0 0;
  padding-left: 16px;
  font-size: 10px;
  color: #E2E8F0;
  line-height: 1.5;
}
.forge-feedback-msg {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  animation: fadeIn 0.3s ease;
}
.forge-msg-success {
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: #00FF88;
}
.forge-msg-error {
  background: rgba(255, 51, 102, 0.12);
  border: 1px solid rgba(255, 51, 102, 0.4);
  color: #FF6688;
}

/* Barra de Piedad (Gamer Pity Progress) */
.vault-pity-box {
  width: 100%;
  margin: 10px 0 14px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-sizing: border-box;
}
.vpb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #A0AEC0;
  margin-bottom: 5px;
  font-weight: 600;
}
.vpb-pct {
  color: #00E5FF;
  font-weight: 800;
}
.vpb-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.vpb-fill {
  height: 100%;
  background: linear-gradient(90deg, #00E5FF, #7928CA);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.vpb-hint {
  font-size: 10px;
  color: #718096;
  text-align: right;
  margin-top: 4px;
}

/* Botón de Apertura 50 MTX en Tier 1 */
.btn-vault-bronze-paid {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.2), rgba(255, 100, 0, 0.3)) !important;
  border-color: #FFAA00 !important;
  color: #FFDD55 !important;
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.35) !important;
}
.btn-vault-bronze-paid:hover {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.35), rgba(255, 100, 0, 0.5)) !important;
  box-shadow: 0 0 18px rgba(255, 170, 0, 0.5) !important;
}

/* Destacado de Gran Premio */
.vlp-tag.vlp-highlight {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: rgba(255, 215, 0, 0.5) !important;
  color: #FFD700 !important;
  font-weight: 800 !important;
}

.reel-item-icon {
  font-size: 38px;
  margin-bottom: 4px;
}

.reel-item-name {
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

/* Tarjeta de resultado unboxing */
.unboxing-result-card {
  text-align: center;
  padding: 20px;
  background: rgba(255, 222, 0, 0.06);
  border: 1px solid rgba(255, 222, 0, 0.3);
  border-radius: 16px;
  animation: popIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.result-badge-rarity {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 12px;
  background: #FFDE00;
  color: #0E1017;
  border-radius: 999px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.result-icon-huge {
  font-size: 54px;
  margin-bottom: 8px;
}

.result-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px;
}

.result-desc {
  font-size: 13.5px;
  color: #A6B4C9;
  margin: 0 0 16px;
}

.result-coupon-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed #FFDE00;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}

.result-coupon-box span {
  display: block;
  font-size: 12px;
  color: #8E99B0;
  margin-bottom: 4px;
}

.result-coupon-box strong {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: 800;
  color: #FFDE00;
  letter-spacing: 2px;
  padding: 6px 14px;
  background: rgba(255, 222, 0, 0.12);
  border-radius: 8px;
  cursor: pointer;
}

.result-coupon-box small {
  display: block;
  font-size: 11px;
  color: #8E99B0;
  margin-top: 4px;
}

.btn-claim-loot {
  background: #FFDE00;
  color: #0E1017;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 12px 28px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 222, 0, 0.4);
  transition: all 0.2s ease;
}

.btn-claim-loot:hover {
  transform: scale(1.04);
}

/* Botón compartir en calculadora de trade */
.btn-share-trade {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.2) 0%, rgba(0, 229, 255, 0.05) 100%);
  border: 1px solid rgba(0, 229, 255, 0.5);
  color: #00E5FF;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-share-trade:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.25);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}

.btn-share-trade:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== MARQUESINA NEÓN DE DROPS EN VIVO & PRUEBA SOCIAL ===== */
.live-drops-ticker {
  background: rgba(9, 12, 20, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 215, 0, 0.22);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ticker-label {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.ticker-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFDE00;
  box-shadow: 0 0 10px #FFDE00;
  animation: none !important; /* 0% GPU idle */
}

@keyframes dotPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.ticker-live-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #FFDE00;
  letter-spacing: 0.8px;
}

.ticker-track-wrap {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px;
}

.ticker-track {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* will-change removed */
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1;
  color: #C8D0E0;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  height: 100%;
}

.ti-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}

.ti-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.tag-bronze { background: rgba(205, 127, 50, 0.2); color: #CD7F32; border: 1px solid rgba(205, 127, 50, 0.4); }
.tag-silver { background: rgba(192, 192, 192, 0.2); color: #E0E0E0; border: 1px solid rgba(192, 192, 192, 0.4); }
.tag-gold { background: rgba(255, 215, 0, 0.2); color: #FFD700; border: 1px solid rgba(255, 215, 0, 0.4); }
.tag-diamond { background: rgba(0, 229, 255, 0.2); color: #00E5FF; border: 1px solid rgba(0, 229, 255, 0.4); }
.tag-legendary { background: linear-gradient(90deg, #FF007F, #FFDE00); color: #0E1017; font-weight: 900; }
.tag-shop { background: rgba(0, 255, 102, 0.15); color: #00FF66; border: 1px solid rgba(0, 255, 102, 0.3); }

.ti-user {
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.ti-text {
  color: #A6B4C9;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.ti-time {
  font-size: 11px;
  color: #6B7A99;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.ticker-cta-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 222, 0, 0.12);
  border: 1px solid rgba(255, 222, 0, 0.35);
  color: #FFDE00;
  padding: 4px 10px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ticker-cta-text-full {
  display: inline;
}

.ticker-cta-text-compact {
  display: none;
}

.ticker-cta-btn:hover {
  background: #FFDE00;
  color: #0E1017;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.5);
}

@media (max-width: 680px) {
  .live-drops-ticker {
    padding: 0 8px;
    height: 34px;
    gap: 6px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  .ticker-label {
    display: none !important;
  }
  .ti-tag, .ti-time {
    display: none !important;
  }
  .ticker-track-wrap {
    margin: 0 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .ticker-track {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ticker-item {
    font-size: 11px !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .ti-icon {
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }
  .ti-user {
    max-width: 95px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .ti-text {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .ticker-cta-btn {
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ticker-cta-text-full {
    display: none !important;
  }
  .ticker-cta-text-compact {
    display: inline !important;
    line-height: 1 !important;
  }
}

/* ==========================================================================
   NAVEGACIÓN DESTACADA BÓVEDAS & CANJEAR EN HEADER
   ========================================================================== */
.nav-bovedas-pill {
  background: rgba(255, 215, 0, 0.15) !important;
  border: 1px solid rgba(255, 215, 0, 0.45) !important;
  color: #FFD700 !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
  transition: all 0.2s ease !important;
}

.nav-bovedas-pill:hover,
.nav-bovedas-pill.active {
  background: #FFD700 !important;
  color: #0E1017 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.6) !important;
}

.btn-canjear-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: #00E5FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-canjear-pill:hover {
  background: #00E5FF;
  color: #0E1017;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}

.user-pill-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 24px;
}

.user-pill-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #FFF;
}

.user-pill-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #FFD700;
  object-fit: cover;
}

.user-pill-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #FFD700;
}

.btn-logout-mini {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.2s;
}

.btn-logout-mini:hover {
  color: #FF3366;
}

/* ==========================================================================
   RANKING PODIO OLÍMPICO & TABLA TOP 100
   ========================================================================== */
.inicio-ranking-section {
  max-width: 1240px;
  margin: 40px auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.ranked-header-box,
.arena-ranked-header {
  text-align: center;
  margin-bottom: 18px;
  position: relative;
}

.arena-header-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.arena-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

.arena-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseDotLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.arena-season-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #FFD700;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

.ranked-badge {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #FFD700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ranked-title,
.arena-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  color: #FFF;
  margin: 10px 0 6px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ranked-sub,
.arena-sub {
  color: #9EABBC;
  font-size: 14.5px;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
}

.arena-sub strong {
  color: #E2E8F0;
}

/* ===== TELEMETRÍA GAMER DE LA ARENA (4 Bento Micro-Stats) ===== */
.arena-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 100%;
  width: 100%;
  margin: 22px auto 28px auto;
  box-sizing: border-box;
}

.atg-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 18, 28, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
}

.atg-pill:hover {
  transform: translateY(-2px);
}

.atg-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.atg-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

.atg-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atg-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #8E9BAE;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Micro-stats variantes temáticas */
.atg-players .atg-ico {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
}
.atg-players:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.18);
}

.atg-prize .atg-ico {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #FFD700;
}
.atg-prize .atg-val {
  color: #FFD700;
}
.atg-prize:hover {
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.18);
}

.atg-streak .atg-ico {
  background: rgba(255, 158, 0, 0.12);
  border: 1px solid rgba(255, 158, 0, 0.3);
  color: #FF9E00;
}
.atg-streak .atg-val {
  color: #FFAA00;
}
.atg-streak:hover {
  border-color: rgba(255, 158, 0, 0.45);
  box-shadow: 0 0 16px rgba(255, 158, 0, 0.18);
}

.atg-rules .atg-ico {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #A855F7;
}
.atg-rules .atg-val {
  color: #00FF88;
}
.atg-rules:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.18);
}

/* ===== PODIO OLÍMPICO GAMER (TOP 3) ===== */
.podio-olimpico-container {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  align-items: end;
  gap: 20px;
  margin-top: 14px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.podio-card {
  background: rgba(14, 18, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 14px 14px 14px;
  text-align: center;
  position: relative;
  backdrop-filter: none !important;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  gap: 8px;
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.28s ease, filter 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  box-sizing: border-box;
  overflow: visible;
}

.podio-card.podio-dimmed {
  opacity: 0.25 !important;
  filter: grayscale(0.7) !important;
  pointer-events: none !important;
  transform: scale(0.97) !important;
}

.podio-card.podio-highlight {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.6) !important;
  border-color: #00F0FF !important;
  z-index: 5 !important;
}

.podio-card.podio-card-me {
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
  border-color: #FFD700 !important;
}

.podio-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
}

.silver-card-glow {
  box-shadow: inset 0 0 25px rgba(203, 213, 225, 0.06);
}

.gold-card-glow {
  box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.08);
}

.bronze-card-glow {
  box-shadow: inset 0 0 25px rgba(205, 127, 50, 0.06);
}

.podio-card:hover {
  transform: translateY(-4px);
}

.podio-gold {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.14) 0%, rgba(14, 18, 28, 0.98) 100%);
  border: 1.5px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 38px rgba(255, 215, 0, 0.22), inset 0 0 20px rgba(255, 215, 0, 0.06);
  padding-top: 22px;
  padding-bottom: 16px;
  margin-top: -4px;
  z-index: 2;
}

.podio-gold:hover {
  box-shadow: 0 0 45px rgba(255, 215, 0, 0.28), inset 0 0 25px rgba(255, 215, 0, 0.08);
  border-color: #FFD700;
}

.podio-silver {
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.08) 0%, rgba(14, 18, 28, 0.95) 100%);
  border: 1.5px solid rgba(203, 213, 225, 0.35);
  box-shadow: 0 0 25px rgba(203, 213, 225, 0.1);
  margin-top: 0;
}

.podio-silver:hover {
  box-shadow: 0 0 35px rgba(203, 213, 225, 0.2);
  border-color: #E2E8F0;
}

.podio-bronze {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.08) 0%, rgba(14, 18, 28, 0.95) 100%);
  border: 1.5px solid rgba(205, 127, 50, 0.35);
  box-shadow: 0 0 25px rgba(205, 127, 50, 0.1);
  margin-top: 20px;
}

.podio-bronze:hover {
  box-shadow: 0 0 35px rgba(205, 127, 50, 0.2);
  border-color: #CD7F32;
}

.podio-crown {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  animation: none !important; /* 0% GPU idle */
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
  z-index: 5;
}

@keyframes floatCrown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

.podio-medal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.podio-medal {
  font-size: 22px;
  line-height: 1;
}

.podio-metal-pill {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.gold-metal-pill {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.22), rgba(255, 180, 0, 0.22));
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

.silver-metal-pill {
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.16), rgba(148, 163, 184, 0.16));
  color: #E2E8F0;
  border: 1px solid rgba(226, 232, 240, 0.35);
  box-shadow: 0 0 10px rgba(226, 232, 240, 0.12);
}

.bronze-metal-pill {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), rgba(217, 119, 6, 0.16));
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.12);
}

.podio-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px auto;
  display: block;
  text-decoration: none;
  z-index: 1;
}

.podio-gold .podio-avatar-wrap {
  width: 86px;
  height: 86px;
}

.podio-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.podio-avatar-silver img {
  border: 2.5px solid #CBD5E1;
  box-shadow: 0 0 15px rgba(203, 213, 225, 0.35);
}

.podio-avatar-gold img {
  border: 3px solid #FFD700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.podio-avatar-bronze img {
  border: 2.5px solid #CD7F32;
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.35);
}

.podio-rank-tag {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  z-index: 2;
}

.podio-tag-gold {
  background: #FFD700;
  color: #0B0E14;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.podio-tag-silver {
  background: #CBD5E1;
  color: #0B0E14;
  box-shadow: 0 0 8px rgba(203, 213, 225, 0.4);
}

.podio-tag-bronze {
  background: #CD7F32;
  color: #FFF;
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.4);
}

/* ===== SHOWCASE CON PEDESTAL GAMER 3D (AVATARES DE CUERPO ENTERO TOP 3) ===== */
.podio-avatar-stage-3d .podio-rank-tag {
  display: none !important;
}

.podio-avatar-wrap.podio-avatar-stage-3d,
.podio-gold .podio-avatar-wrap.podio-avatar-stage-3d,
.podio-silver .podio-avatar-wrap.podio-avatar-stage-3d,
.podio-bronze .podio-avatar-wrap.podio-avatar-stage-3d {
  width: 100% !important;
}

.podio-avatar-wrap.podio-avatar-stage-3d {
  width: 100%;
  max-width: 190px;
  height: 205px;
  margin: 0 auto 12px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
  text-decoration: none;
  perspective: 600px;
}

.podio-gold .podio-avatar-wrap.podio-avatar-stage-3d {
  max-width: 260px;
  height: 240px;
  margin-bottom: 18px;
}

.podio-silver .podio-avatar-wrap.podio-avatar-stage-3d {
  max-width: 220px;
  height: 215px;
  margin-bottom: 14px;
}

.podio-bronze .podio-avatar-wrap.podio-avatar-stage-3d {
  max-width: 190px;
  height: 205px;
  margin-bottom: 12px;
}

/* Aura resplandeciente neón de fondo según metal */
.podio-stage-aura {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: none;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulsePodioAura {
  0% { transform: translateX(-50%) scale(0.95); opacity: 0.75; }
  100% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

.stage-aura-gold {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.38) 0%, rgba(255, 180, 0, 0.15) 50%, transparent 75%);
}

.stage-aura-silver {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(226, 232, 240, 0.32) 0%, rgba(148, 163, 184, 0.12) 50%, transparent 75%);
}

.stage-aura-bronze {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(205, 127, 50, 0.32) 0%, rgba(217, 119, 6, 0.12) 50%, transparent 75%);
}

/* Contenedor del personaje Roblox 3D erguido */
.podio-character-stage {
  position: relative;
  width: 100%;
  height: 175px;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  z-index: 3;
}

.podio-gold .podio-character-stage {
  height: 210px;
}

.podio-silver .podio-character-stage {
  height: 185px;
}

.podio-bronze .podio-character-stage {
  height: 175px;
}

/* Personaje de cuerpo entero: anula estilos circulares heredados */
.podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 165px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: -16px !important;
  position: relative !important;
  z-index: 3 !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-height: 200px !important;
  margin-bottom: -24px !important;
}

.podio-silver .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-height: 175px !important;
}

.podio-bronze .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-height: 165px !important;
}

.podio-char-gold {
  filter: drop-shadow(0 6px 18px rgba(255, 215, 0, 0.55)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

.podio-char-silver {
  filter: drop-shadow(0 5px 16px rgba(203, 213, 225, 0.45)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

.podio-char-bronze {
  filter: drop-shadow(0 5px 16px rgba(205, 127, 50, 0.45)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

.podio-avatar-wrap.podio-avatar-stage-3d:hover img.podio-char-full {
  transform: translateY(-6px) scale(1.06);
}

/* Pedestal Gamer 3D con plataforma y pilares neón */
.podio-pedestal-3d {
  position: relative;
  width: 100%;
  max-width: 160px;
  margin-top: -10px;
  z-index: 2;
  box-sizing: border-box;
}

.podio-gold .podio-pedestal-3d {
  max-width: 220px;
  margin-top: -16px;
}

.podio-silver .podio-pedestal-3d {
  max-width: 185px;
  margin-top: -12px;
}

.podio-bronze .podio-pedestal-3d {
  max-width: 160px;
  margin-top: -10px;
}

.pedestal-top-surface {
  width: 100%;
  height: 16px;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  transform: rotateX(25deg);
}

.pedestal-gold .pedestal-top-surface {
  height: 22px;
  background: radial-gradient(ellipse at center, #FFE259 0%, #D4A017 50%, #4D3300 100%);
  border: 1.5px solid #FFD700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.6), inset 0 2px 6px rgba(255, 255, 255, 0.5);
}

.pedestal-silver .pedestal-top-surface {
  height: 18px;
  background: radial-gradient(ellipse at center, #FFFFFF 0%, #94A3B8 50%, #1E293B 100%);
  border: 1.5px solid #CBD5E1;
  box-shadow: 0 0 14px rgba(203, 213, 225, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.6);
}

.pedestal-bronze .pedestal-top-surface {
  height: 16px;
  background: radial-gradient(ellipse at center, #FDBA74 0%, #B45309 50%, #3B1604 100%);
  border: 1.5px solid #CD7F32;
  box-shadow: 0 0 14px rgba(205, 127, 50, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.4);
}

.pedestal-pillar {
  width: 92%;
  margin: -8px auto 0 auto;
  height: 22px;
  border-radius: 0 0 10px 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.pedestal-gold .pedestal-pillar {
  height: 36px;
  background: linear-gradient(180deg, #D4A017 0%, #7A5300 60%, #1E1500 100%);
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-top: none;
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.25), inset 0 0 10px rgba(255, 215, 0, 0.2);
}

.pedestal-silver .pedestal-pillar {
  height: 28px;
  background: linear-gradient(180deg, #64748B 0%, #334155 60%, #0F172A 100%);
  border: 1px solid rgba(203, 213, 225, 0.4);
  border-top: none;
  box-shadow: 0 6px 16px rgba(203, 213, 225, 0.2), inset 0 0 8px rgba(203, 213, 225, 0.15);
}

.pedestal-bronze .pedestal-pillar {
  height: 22px;
  background: linear-gradient(180deg, #92400E 0%, #451A03 60%, #1C0A02 100%);
  border: 1px solid rgba(205, 127, 50, 0.4);
  border-top: none;
  box-shadow: 0 6px 16px rgba(205, 127, 50, 0.2), inset 0 0 8px rgba(205, 127, 50, 0.15);
}

.pedestal-ambient-glow {
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: #FFF;
  opacity: 0.7;
  filter: blur(1px);
}

.pedestal-rank-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #FFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  z-index: 2;
}

.pedestal-gold .pedestal-rank-tag {
  color: #FFE259;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
}

.podio-player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 8px 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.podio-username {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFF;
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.3px;
  transition: color 0.15s ease;
  text-align: center;
  word-break: break-word;
}

.gold-name {
  font-size: 20px;
  color: #FFD700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
}

.podio-score {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #00FF88;
  margin-bottom: 3px;
}

.gold-score {
  font-size: 17px;
  color: #00FF88;
}

.podio-score-lbl {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

.podio-streak-tag {
  font-size: 12px;
  color: #FF9E00;
  font-weight: 700;
  margin-bottom: 6px;
}

.gold-streak {
  color: #FFAA00;
}

.podio-metrics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
  line-height: 1.35;
  padding: 2px 0;
}

.pm-score {
  font-size: 15px;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 0.4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pm-score.gold-score {
  font-size: 16px;
  color: #00FF88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.35);
}

.pm-dot {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.pm-streak {
  font-size: 13.5px;
  font-weight: 700;
  color: #FF9E00;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pm-streak.gold-streak {
  font-size: 14px;
  color: #FFAA00;
  text-shadow: 0 0 8px rgba(255, 170, 0, 0.35);
}

.podio-gap-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 2px auto 0 auto;
  line-height: 1.3;
  letter-spacing: 0.4px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

.podio-gap-silver {
  background: rgba(203, 213, 225, 0.1);
  color: #E2E8F0;
  border: 1px solid rgba(203, 213, 225, 0.25);
  box-shadow: 0 0 8px rgba(203, 213, 225, 0.08);
}

.podio-gap-gold {
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
}

.podio-gap-bronze {
  background: rgba(245, 158, 11, 0.1);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.08);
}

/* ==========================================================================
   CAJA DE RECOMPENSAS BENTO (PODIO PREMIOS)
   ========================================================================== */
.podio-prizes-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.silver-prizes {
  border-color: rgba(203, 213, 225, 0.2);
  background: rgba(14, 18, 28, 0.65);
}

.gold-prizes {
  border-color: rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.03);
}

.bronze-prizes {
  border-color: rgba(205, 127, 50, 0.2);
  background: rgba(14, 18, 28, 0.65);
}

.ppb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 2px;
}

.ppb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.ppb-title-gold {
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.ppb-title-silver {
  color: #E2E8F0;
}

.ppb-title-bronze {
  color: #F59E0B;
}

.ppb-chips-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.ppb-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: #CBD5E1;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ppb-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.ppb-chip-ico {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.ppb-chip-txt {
  font-weight: 600;
  color: #E2E8F0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   MINI-SHOWCASE HORIZONTAL COMPACTO (VEHÍCULO EN CUSTODIA - TOP 1)
   ========================================================================== */
.custodia-premio-card-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(10, 14, 22, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.38);
  border-radius: 10px;
  padding: 4px 8px;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.12), inset 0 0 12px rgba(255, 215, 0, 0.04);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
  margin-bottom: 2px;
}

.custodia-premio-card-mini:hover {
  transform: translateY(-2px);
  border-color: #FFD700;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.25), inset 0 0 16px rgba(255, 215, 0, 0.08);
}

.cpc-mini-thumb {
  width: 68px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
  padding: 2px;
  box-sizing: border-box;
}

.cpc-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.35));
  transition: transform 0.25s ease;
}

.custodia-premio-card-mini:hover .cpc-mini-thumb img {
  transform: scale(1.08);
}

.cpc-mini-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.cpc-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap;
}

.cpc-mini-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.4px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpc-mini-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 255, 136, 0.14);
  color: #00FF88;
  border: 1px solid rgba(0, 255, 136, 0.35);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.cpc-mini-action {
  display: flex;
  align-items: center;
}

.cpc-mini-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  padding: 2px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.custodia-premio-card-mini:hover .cpc-mini-btn {
  background: #FFD700;
  color: #0B0E14;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* ==========================================================================
   TARJETA DEL VEHÍCULO EN CUSTODIA (LEGACY / FULL BENTO)
   ========================================================================== */
.custodia-premio-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(10, 14, 22, 0.95) 100%);
  border: 1.5px solid rgba(255, 215, 0, 0.45);
  border-radius: 10px;
  padding: 10px 8px;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.14);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  text-decoration: none;
  display: block;
}

.custodia-premio-card:hover {
  transform: translateY(-2px);
  border-color: #FFD700;
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.3);
}

.cpc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

.cpc-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cpc-edition-tag {
  font-size: 9px;
  font-weight: 800;
  background: rgba(255, 215, 0, 0.2);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.cpc-img img {
  width: 100%;
  max-width: 120px;
  height: 55px;
  object-fit: contain;
  margin: 2px auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.35));
  transition: transform 0.25s ease;
}

.custodia-premio-card:hover .cpc-img img {
  transform: scale(1.06);
}

.cpc-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  margin-top: 2px;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.cpc-val {
  font-size: 11px;
  color: #00FF88;
  font-weight: 800;
  margin-top: 2px;
}

.cpc-link-hint {
  font-size: 9.5px;
  color: #FFD700;
  font-weight: 700;
  margin-top: 4px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.custodia-premio-card:hover .cpc-link-hint {
  opacity: 1;
  text-decoration: underline;
}

/* Badges de bots y jugadores en podio y tabla */
.podio-bot-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.2);
  color: #CBD5E1;
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: inline-block;
  margin-top: 2px;
}
.podio-player-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  display: inline-block;
  margin-top: 2px;
}
.podio-player-tag.crown-tag {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.25));
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.podio-player-tag.elite-tag {
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.2), rgba(148, 163, 184, 0.2));
  color: #E2E8F0;
  border: 1px solid rgba(226, 232, 240, 0.5);
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.25);
}
.podio-player-tag.master-tag {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}
.rr-creator-tag {
  font-size: 9.5px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.25), rgba(254, 44, 85, 0.25));
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  margin-left: 6px;
  letter-spacing: 0.4px;
}
.rr-streamer-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.22);
  color: #C4B5FD;
  border: 1px solid rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.3);
  margin-left: 6px;
  letter-spacing: 0.3px;
}
.rr-rank-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.3px;
}
.rr-rank-tag.top10 {
  background: rgba(239, 68, 68, 0.18);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.rr-rank-tag.diamond {
  background: rgba(0, 240, 255, 0.18);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
}
.rr-rank-tag.gold {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.rr-rank-tag.silver {
  background: rgba(148, 163, 184, 0.15);
  color: #CBD5E1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* ==========================================================================
   SECCIÓN RECOMPENSAS POR DIVISIONES (#4 AL #100) - GAMER BENTO AAA
   ========================================================================== */
.arena-tiers-incentive-bar {
  background: linear-gradient(180deg, rgba(18, 22, 34, 0.95) 0%, rgba(14, 18, 28, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  width: 100%;
}

.atib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.atib-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #FFD700;
  letter-spacing: 0.5px;
}

.atib-sub {
  font-size: 12.5px;
  color: #8E9BAE;
  font-weight: 500;
}

.atib-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.atib-card {
  background: #121622;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.atib-card:hover {
  transform: translateY(-2px);
}

.atib-card:active {
  transform: scale(0.985);
}

/* Glow específico de cada Tier */
.atib-card.atib-top10,
.atib-top10 {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.08);
  background: radial-gradient(circle at top right, rgba(0, 240, 255, 0.06) 0%, #121622 70%);
}
.atib-card.atib-top10:hover,
.atib-top10:hover {
  border-color: #00F0FF;
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.25);
}

.atib-card.atib-diamond,
.atib-diamond {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 4px 18px rgba(167, 139, 250, 0.08);
  background: radial-gradient(circle at top right, rgba(167, 139, 250, 0.06) 0%, #121622 70%);
}
.atib-card.atib-diamond:hover,
.atib-diamond:hover {
  border-color: #A78BFA;
  box-shadow: 0 6px 24px rgba(167, 139, 250, 0.25);
}

.atib-card.atib-gold,
.atib-gold {
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 215, 0, 0.08);
  background: radial-gradient(circle at top right, rgba(255, 215, 0, 0.06) 0%, #121622 70%);
}
.atib-card.atib-gold:hover,
.atib-gold:hover {
  border-color: #FFD700;
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.25);
}

.atib-card.atib-silver,
.atib-silver {
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 4px 16px rgba(148, 163, 184, 0.05);
  background: radial-gradient(circle at top right, rgba(148, 163, 184, 0.06) 0%, #121622 70%);
}
.atib-card.atib-silver:hover,
.atib-silver:hover {
  border-color: #CBD5E1;
  box-shadow: 0 6px 20px rgba(148, 163, 184, 0.18);
}

/* Tarjeta activa por selección de filtro */
.atib-card.active-filter {
  border-color: #00F0FF;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
}
.atib-card.active-filter.atib-top10 {
  border-color: #00F0FF;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.45);
}
.atib-card.active-filter.atib-diamond {
  border-color: #A78BFA;
  box-shadow: 0 0 24px rgba(167, 139, 250, 0.45);
}
.atib-card.active-filter.atib-gold {
  border-color: #FFD700;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.45);
}
.atib-card.active-filter.atib-silver {
  border-color: #CBD5E1;
  box-shadow: 0 0 24px rgba(203, 213, 225, 0.4);
}

.atib-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.atib-tier-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.top10-badge {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.45);
}

.diamond-badge {
  background: rgba(167, 139, 250, 0.15);
  color: #C4B5FD;
  border: 1px solid rgba(167, 139, 250, 0.45);
}

.gold-badge {
  background: rgba(255, 215, 0, 0.15);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.45);
}

.silver-badge {
  background: rgba(148, 163, 184, 0.15);
  color: #E2E8F0;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.atib-division {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

.atib-rewards,
.atib-chips-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.atib-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: #CBD5E1;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.atib-chip-ico {
  font-size: 12px;
  flex-shrink: 0;
}

.atib-chip-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  min-width: 0;
  display: block;
}

/* ==========================================================================
   CONTROLES & FILTROS DE LA TABLA (#4 AL #100) - GAMER DARK
   ========================================================================== */
.ranking-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.rcb-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 380px;
  min-width: 200px;
  box-sizing: border-box;
}

.rcb-icon {
  position: absolute;
  left: 12px;
  font-size: 13px;
  color: #64748B;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcb-input {
  width: 100%;
  background: #0E121C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 9px 34px 9px 36px;
  color: #F8FAFC;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.rcb-input::-webkit-search-decoration,
.rcb-input::-webkit-search-cancel-button,
.rcb-input::-webkit-search-results-button,
.rcb-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

.rcb-input:focus {
  background: #121622;
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.rcb-input::placeholder {
  color: #64748B;
  font-size: 12.5px;
}

.rcb-clear-btn {
  position: absolute;
  right: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #94A3B8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.rcb-clear-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #EF4444;
}

.rcb-filters-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.rank-filter-btn {
  background: #0E121C;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 14px;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rank-filter-btn:hover {
  background: #151A26;
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  transform: translateY(-1px);
}

.rank-filter-btn:active {
  transform: scale(0.96);
}

.rank-filter-btn.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(0, 240, 255, 0.05));
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.rank-filter-btn.rank-btn-me {
  border-color: rgba(255, 215, 0, 0.35);
  color: #FFD700;
}

.rank-filter-btn.rank-btn-me:hover,
.rank-filter-btn.rank-btn-me.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 215, 0, 0.05));
  border-color: #FFD700;
  color: #FFD700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}

.rcb-status-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.rcb-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
  user-select: none;
}

/* ==========================================================================
   CUADRO BENTO DESLIZABLE #4 AL #100 - GAMER DARK
   ========================================================================== */
/* ======================================================================
   RANKING TABLE — DISEÑO PRO 2026
   Inspirado en tablas de League of Legends, Fortnite Comp y tops Awwwards
   ====================================================================== */

.ranking-scroll-box {
  background: linear-gradient(180deg, rgba(10,13,22,0.98) 0%, rgba(14,18,28,0.96) 100%);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 20px 60px rgba(0,0,0,0.6),
    0 0 80px rgba(124,58,237,0.06);
  position: relative;
}
.ranking-scroll-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7C3AED, #00F0FF, #7C3AED, transparent);
  opacity: 0.8;
}

/* Header de columnas */
.rsb-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 64px 1fr 100px 120px 110px;
  align-items: center;
  padding: 13px 20px;
  background: #0b0e17;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(148,163,184,0.7);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,240,255,0.15);
  box-sizing: border-box;
  backdrop-filter: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rsb-header:hover {
  background: #0f1422;
  border-bottom-color: rgba(0,240,255,0.3);
}
.rsb-col-pos  { text-align: center; }
.rsb-col-user { text-align: left; padding-left: 4px; }
.rsb-col-streak { text-align: center; }
.rsb-col-gap  { text-align: center; }
.rsb-col-pts  { text-align: right; }

/* Lista scroll */
.rsb-list-wrap {
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,0.3) transparent;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.rsb-list-wrap::-webkit-scrollbar { width: 3px; }
.rsb-list-wrap::-webkit-scrollbar-track { background: transparent; }
.rsb-list-wrap::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,0.4);
  border-radius: 99px;
}

/* ── FILA BASE ── */
.ranking-row {
  display: grid;
  grid-template-columns: 64px 1fr 100px 120px 110px;
  align-items: center;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px;
  box-sizing: border-box;
  position: relative;
  transition:
    background 0.22s ease,
    transform 0.22s cubic-bezier(0.23,1,0.32,1),
    box-shadow 0.22s ease;
  cursor: pointer;
}
.ranking-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* Hover general */
.ranking-row:hover {
  background: rgba(255,255,255,0.035);
  transform: translateX(3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.ranking-row:hover::before { opacity: 1; }

/* Tier: Top 10 — Cyan eléctrico */
.ranking-row.tier-top10::before { background: #00F0FF; }
.ranking-row.tier-top10:hover {
  background: rgba(0,240,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(0,240,255,0.08);
}

/* Tier: Diamond — Púrpura */
.ranking-row.tier-diamond::before { background: #A78BFA; }
.ranking-row.tier-diamond:hover {
  background: rgba(167,139,250,0.04);
  box-shadow: inset 0 0 0 1px rgba(167,139,250,0.08);
}

/* Tier: Gold — Dorado */
.ranking-row.tier-gold::before { background: #FFD700; }
.ranking-row.tier-gold:hover {
  background: rgba(255,215,0,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,215,0,0.08);
}

/* Tier: Silver */
.ranking-row.tier-silver::before { background: #94A3B8; }

/* Fila del usuario actual */
.ranking-me-row {
  background: rgba(255,215,0,0.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,215,0,0.15) !important;
}
.ranking-me-row::before { background: #FFD700 !important; opacity: 1 !important; }

/* Fila creador */
.ranking-row.tr-creador {
  background: linear-gradient(90deg, rgba(255,215,0,0.1), rgba(255,215,0,0.02)) !important;
}
.ranking-row.tr-creador::before { background: #FFD700; opacity: 1; }

.ranking-row.ranking-row-hidden,
.ranking-row[hidden],
.ranking-row[style*="display: none"] { display: none !important; }

/* ── COLUMNA POSICIÓN ── */
.rr-pos-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-pos {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: rgba(100,116,139,0.7);
  line-height: 1;
  min-width: 32px;
  text-align: center;
}
.rr-pos.pos-top10  { color: #00F0FF;  text-shadow: 0 0 12px rgba(0,240,255,0.5); font-size: 17px; }
.rr-pos.pos-diamond{ color: #C4B5FD;  text-shadow: 0 0 10px rgba(167,139,250,0.4); }
.rr-pos.pos-gold   { color: #FFD700;  text-shadow: 0 0 10px rgba(255,215,0,0.4); }
.rr-pos.pos-silver { color: #94A3B8; }

/* ── COLUMNA USUARIO ── */
.rr-user {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.rr-user-link {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  border-radius: 10px;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background 0.2s ease;
}
.rr-user-link:hover { background: rgba(0,240,255,0.07); }
.rr-user-link:hover .rr-name {
  color: #00F0FF;
  text-shadow: 0 0 10px rgba(0,240,255,0.5);
}
.rr-user-link:hover .rr-avatar-frame {
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(0,240,255,0.5);
  border-color: rgba(0,240,255,0.8);
}

/* Avatar frame */
.rr-avatar-frame {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #0E1320;
  border: 2px solid rgba(255,255,255,0.1);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.rr-avatar-frame.pos-top10  { border-color: rgba(0,240,255,0.55); box-shadow: 0 0 8px rgba(0,240,255,0.2); }
.rr-avatar-frame.pos-diamond{ border-color: rgba(167,139,250,0.5); }
.rr-avatar-frame.pos-gold   { border-color: rgba(255,215,0,0.55); box-shadow: 0 0 8px rgba(255,215,0,0.2); }
.rr-avatar-frame.pos-silver { border-color: rgba(203,213,225,0.3); }
.rr-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Info de usuario */
.rr-user-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rr-user-primary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.rr-name {
  font-weight: 700;
  font-size: 13.5px;
  color: #E2E8F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  letter-spacing: 0.1px;
}
.rr-desk-badge { display: inline-flex; align-items: center; flex-shrink: 0; }
.rr-mob-subline { display: none; }

/* ── COLUMNA RACHA ── */
.rr-streak-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.streak-fire-high {
  background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(255,140,0,0.18));
  color: #FF8C00;
  border: 1px solid rgba(255,140,0,0.4);
  box-shadow: 0 0 10px rgba(255,140,0,0.2);
}
.streak-fire-mid {
  background: rgba(255,158,0,0.12);
  color: #FF9E00;
  border: 1px solid rgba(255,158,0,0.35);
}
.streak-low {
  background: rgba(100,116,139,0.1);
  color: #64748B;
  border: 1px solid rgba(100,116,139,0.15);
}

/* ── COLUMNA DIFERENCIA ── */
.rr-gap-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-gap-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0,240,255,0.08);
  color: #00F0FF;
  border: 1px solid rgba(0,240,255,0.2);
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.rr-gap-target { font-size: 10px; opacity: 0.7; font-weight: 600; }
.rr-gap-tied {
  background: rgba(100,116,139,0.08);
  color: #64748B;
  border-color: rgba(100,116,139,0.15);
}

/* ── COLUMNA PUNTOS ── */
.rr-points-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.rr-points {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #00FF88;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(0,255,136,0.3);
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.rr-pts-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.5px;
}

.pulse-highlight {
  animation: pulseRankMe 2s ease-in-out;
}
@keyframes pulseRankMe {
  0% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); background: rgba(255, 215, 0, 0.22); }
  100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
}

.ranking-empty-state {
  text-align: center;
  padding: 36px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin: 16px;
}

.res-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}

.res-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #FFF;
  margin-bottom: 4px;
}

.res-sub {
  font-size: 12.5px;
  color: #8E9BAE;
  margin: 0;
}

.btn-empty-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.12);
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}
.btn-empty-clear:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00F0FF;
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}
.btn-empty-clear:active {
  transform: scale(0.97);
}

.res-link {
  color: #FFD700;
  text-decoration: underline;
}

.podio-avatar-wrap.podio-user-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.podio-avatar-wrap.podio-avatar-stage-3d.podio-user-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin: 0 auto !important;
}

.podio-avatar-wrap.podio-user-link:hover {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.5));
}

.podio-gold .podio-avatar-wrap.podio-user-link:hover {
  filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.7));
}

.podio-username-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  cursor: pointer;
}

.podio-username-link:hover .podio-username {
  color: #00F0FF;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.podio-gold .podio-username-link:hover .podio-username {
  color: #FFF;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.9);
}

.gsb-winner-link {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.gsb-winner-link:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
}

.gsb-winner-title-link:hover .gsb-winner-name {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.rr-me-badge {
  background: #FFD700;
  color: #0E1017;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
}

.rr-streak {
  color: #FF9E00;
  font-weight: 700;
  font-size: 12.5px;
}

.rr-points {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  color: #00FF88;
  font-size: 14px;
}

/* ==========================================================================
   BANNER INFERIOR CTA DE CONVERSIÓN - ARENA CLASIFICATORIA (BENTO GAMER DARK AAA)
   ========================================================================== */
.arena-footer-cta {
  position: relative;
  margin-top: 28px;
  padding: 28px 32px;
  background: radial-gradient(circle at 88% 18%, rgba(0, 240, 255, 0.08) 0%, transparent 46%),
              radial-gradient(circle at 12% 82%, rgba(255, 215, 0, 0.09) 0%, transparent 44%),
              linear-gradient(135deg, rgba(18, 24, 38, 0.95) 0%, rgba(11, 14, 20, 0.98) 100%),
              #0B0E14;
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 215, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.arena-footer-cta:hover {
  border-color: rgba(255, 215, 0, 0.38);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.72), 0 0 32px rgba(255, 215, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.afc-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

.afc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #FFD700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
  user-select: none;
}

.afc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #F5F5F7;
  margin: 0;
  line-height: 1.28;
  letter-spacing: 0.3px;
}

.afc-sub {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #94A3B8;
  margin: 0;
  line-height: 1.55;
  max-width: 820px;
}

.afc-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
  width: 100%;
}

.afc-btn-vault,
.afc-btn-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
  position: relative;
  overflow: hidden;
  min-height: 46px;
  animation: none !important;
}

/* Desactivar cualquier destello o animación estridente */
.afc-btn-vault::before,
.afc-btn-vault::after,
.afc-btn-shop::before,
.afc-btn-shop::after {
  display: none !important;
  animation: none !important;
  content: none !important;
}

.afc-btn-vault {
  background: linear-gradient(135deg, #FFD700 0%, #FF9E00 100%);
  color: #0B0E14 !important;
  border: 1px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
}

.afc-btn-vault:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.45);
  filter: brightness(1.05);
}

.afc-btn-vault:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.afc-btn-shop {
  background: rgba(0, 240, 255, 0.08);
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.afc-btn-shop:hover {
  background: rgba(0, 240, 255, 0.16);
  border-color: rgba(0, 240, 255, 0.7);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.3);
}

.afc-btn-shop:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.2);
}

.afc-btn-icon {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  line-height: 1;
}

.afc-btn-arrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 900;
  transition: transform 0.2s ease;
}

.afc-btn-vault:hover .afc-btn-arrow,
.afc-btn-shop:hover .afc-btn-arrow {
  transform: translateX(4px);
}

@media (min-width: 769px) and (max-width: 1024px) {
  .arena-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .podio-olimpico-container {
    grid-template-columns: 1fr 1.15fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }
  .podio-card {
    padding: 16px 10px !important;
  }
  .podio-gold {
    padding-top: 22px !important;
  }
  .podio-avatar-wrap {
    width: 62px !important;
    height: 62px !important;
  }
  .podio-gold .podio-avatar-wrap {
    width: 74px !important;
    height: 74px !important;
  }
  .podio-avatar-wrap.podio-avatar-stage-3d {
    max-width: 160px !important;
    height: 190px !important;
    margin-bottom: 10px !important;
  }
  .podio-silver .podio-avatar-wrap.podio-avatar-stage-3d {
    max-width: 180px !important;
    height: 215px !important;
    margin-bottom: 12px !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d {
    max-width: 210px !important;
    height: 250px !important;
    margin-bottom: 14px !important;
  }
  .podio-character-stage {
    height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .podio-silver .podio-character-stage {
    height: 185px !important;
  }
  .podio-gold .podio-character-stage {
    height: 220px !important;
  }
  .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 150px !important;
  }
  .podio-silver .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 175px !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 210px !important;
  }
  .podio-pedestal-3d {
    max-width: 135px !important;
  }
  .podio-silver .podio-pedestal-3d {
    max-width: 150px !important;
  }
  .podio-gold .podio-pedestal-3d {
    max-width: 175px !important;
  }
  .ppb-chips-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  .ppb-chip {
    font-size: 10.5px !important;
    padding: 3px 6px !important;
  }
}

@media (max-width: 768px) {
  .podio-olimpico-container {
    display: grid !important;
    grid-template-columns: 1fr 1.14fr 1fr !important;
    align-items: end !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 26px !important;
    overflow: visible !important;
  }
  .podio-card {
    padding: 12px 5px 10px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .podio-gold {
    order: initial !important;
    padding: 16px 6px 12px !important;
    padding-top: 26px !important;
    border-radius: 14px !important;
    border-width: 2px !important;
    transform: translateY(-6px);
    overflow: visible !important;
  }
  .podio-crown {
    font-size: 18px !important;
    top: -14px !important;
  }
  .podio-medal-wrap {
    gap: 2px !important;
    margin-bottom: 3px !important;
  }
  .podio-medal {
    font-size: 14px !important;
  }
  .podio-metal-pill {
    font-size: 8px !important;
    padding: 1px 4px !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }
  .podio-avatar-wrap {
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 5px !important;
  }
  .podio-gold .podio-avatar-wrap {
    width: 54px !important;
    height: 54px !important;
  }
  .podio-avatar-wrap.podio-avatar-stage-3d {
    width: 100% !important;
    max-width: 110px !important;
    height: 145px !important;
    margin: 0 auto 6px !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d {
    max-width: 125px !important;
    height: 168px !important;
  }
  .podio-character-stage {
    height: 125px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .podio-gold .podio-character-stage {
    height: 145px !important;
  }
  .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 120px !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 140px !important;
  }
  .podio-stage-aura {
    width: 100px !important;
    height: 100px !important;
  }
  .podio-pedestal-3d {
    max-width: 95px !important;
    margin-top: -6px !important;
  }
  .podio-gold .podio-pedestal-3d {
    max-width: 110px !important;
    margin-top: -8px !important;
  }
  .pedestal-top-surface {
    height: 12px !important;
  }
  .pedestal-pillar {
    height: 16px !important;
    margin-top: -6px !important;
  }
  .pedestal-rank-tag {
    font-size: 9px !important;
  }
  .podio-rank-tag {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    bottom: -4px !important;
    letter-spacing: 0 !important;
  }
  .podio-player-info {
    margin: 3px 0 5px 0 !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  .podio-username {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 1px !important;
  }
  .podio-metrics-row {
    flex-direction: column !important;
    gap: 1px !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }
  .pm-score {
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  .pm-dot {
    display: none !important;
  }
  .pm-streak {
    font-size: 9.5px !important;
    font-weight: 700 !important;
  }
  .podio-gap-tag {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    margin: 2px auto 0 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .podio-prizes-box {
    padding: 5px 3px !important;
    gap: 3px !important;
    margin-top: 4px !important;
    border-radius: 8px !important;
  }
  .ppb-header {
    padding-bottom: 2px !important;
    margin-bottom: 1px !important;
  }
  .ppb-title {
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }
  .cpc-mini-thumb {
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
  }
  .custodia-premio-card-mini .cpc-mini-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .cpc-mini-title {
    font-size: 11px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .cpc-mini-badge {
    font-size: 8.5px !important;
    padding: 1px 3px !important;
  }
  .cpc-mini-action {
    display: none !important;
  }
  .custodia-premio-card-mini {
    padding: 3px 4px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }
  .ppb-chips-list {
    gap: 2px !important;
  }
  .ppb-chip,
  .silver-prizes .ppb-chip,
  .bronze-prizes .ppb-chip,
  .gold-prizes .ppb-chip {
    display: flex !important;
    padding: 2px 4px !important;
    gap: 3px !important;
    font-size: 7.5px !important;
    min-width: 0 !important;
  }
  .ppb-chip-ico {
    font-size: 9.5px !important;
  }
  .ppb-chip-txt {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
  }

  /* Telemetría Bento en 2x2 para celular */
  .arena-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 12px auto 0 auto !important;
    max-width: 100% !important;
  }
  .atg-pill {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }
  .atg-ico {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .atg-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
  .atg-val {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .atg-lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .arena-tiers-incentive-bar {
    padding: 14px 12px;
    margin-bottom: 18px;
  }
  .atib-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .atib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ranking-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .rcb-search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .rcb-filters-rail {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 8px;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .rcb-filters-rail::-webkit-scrollbar {
    display: none;
  }
  .rank-filter-btn {
    flex-shrink: 0;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12.5px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .rcb-status-wrap {
    justify-content: flex-end;
    width: 100%;
    margin-top: -4px;
  }
  .rsb-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0b0e17;
    border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  }
  .rsb-header,
  .ranking-row {
    grid-template-columns: 42px minmax(0, 1fr) 95px;
    padding: 8px 12px;
    gap: 8px;
  }
  .ranking-row.ranking-row-hidden,
  .ranking-row[hidden],
  .ranking-row[style*="display: none"] {
    display: none !important;
  }
  .rsb-col-streak,
  .rr-streak-col,
  .rsb-col-gap,
  .rr-gap-col,
  .rr-desk-badge {
    display: none !important;
  }
  .rr-mob-subline {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  .rr-mob-badge {
    display: inline-flex !important;
  }
  .rr-mob-badge .rr-rank-tag,
  .rr-mob-badge .rr-creator-tag,
  .rr-mob-badge .rr-streamer-tag {
    display: inline-flex !important;
    font-size: 8.5px !important;
    padding: 1px 5px !important;
    margin-left: 0 !important;
  }
  .rr-mob-streak {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #FF9E00 !important;
    display: inline-flex !important;
  }
  .rr-mob-gap {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #00F0FF !important;
    display: inline-flex !important;
  }

  .arena-footer-cta {
    padding: 22px 18px;
    margin-top: 20px;
    border-radius: 14px;
  }

  .afc-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .afc-sub {
    font-size: 13px;
    line-height: 1.5;
  }

  .afc-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .afc-btn-vault,
  .afc-btn-shop {
    width: 100%;
    padding: 12px 16px;
    font-size: 13.5px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .podio-avatar-wrap.podio-avatar-stage-3d {
    width: 100% !important;
    max-width: 120px !important;
    height: 165px !important;
    margin: 0 auto 6px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d {
    width: 100% !important;
    max-width: 145px !important;
    height: 195px !important;
    margin: 0 auto 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .podio-character-stage {
    width: 100% !important;
    height: 145px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 auto !important;
  }
  .podio-gold .podio-character-stage {
    height: 175px !important;
  }
  .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: -12px !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 170px !important;
    margin-bottom: -16px !important;
  }
  .podio-pedestal-3d {
    max-width: 78px !important;
    margin-top: -5px !important;
  }
  .podio-gold .podio-pedestal-3d {
    max-width: 92px !important;
    margin-top: -7px !important;
  }
  .pedestal-top-surface {
    height: 10px !important;
  }
  .pedestal-pillar {
    height: 14px !important;
    margin-top: -5px !important;
  }
  .pedestal-rank-tag {
    font-size: 8px !important;
  }

  .arena-footer-cta {
    padding: 18px 14px;
  }

  .afc-badge {
    font-size: 10.5px;
    padding: 3px 10px;
  }

  .afc-title {
    font-size: 16.5px;
  }

  .afc-sub {
    font-size: 12.5px;
  }
}

@media (max-width: 390px) {
  .podio-avatar-wrap.podio-avatar-stage-3d {
    width: 100% !important;
    max-width: 110px !important;
    height: 155px !important;
    margin: 0 auto 6px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d {
    width: 100% !important;
    max-width: 135px !important;
    height: 180px !important;
    margin: 0 auto 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .podio-character-stage {
    width: 100% !important;
    height: 135px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 auto !important;
  }
  .podio-gold .podio-character-stage {
    height: 160px !important;
  }
  .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 130px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: -10px !important;
  }
  .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 155px !important;
    margin-bottom: -14px !important;
  }
  .podio-pedestal-3d {
    max-width: 72px !important;
  }
  .podio-gold .podio-pedestal-3d {
    max-width: 84px !important;
  }
}

/* ==========================================================================
   BANNER HERO BÓVEDAS EN PORTADA (BENTO DARK GAMER AAA)
   ========================================================================== */
.inicio-bovedas-banner-section {
  max-width: 1240px;
  margin: 32px auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.bovedas-callout-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 14% 30%, rgba(255, 215, 0, 0.08) 0%, rgba(255, 170, 0, 0.02) 42%, #0B0E14 85%), #0B0E14;
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 215, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
  gap: 24px;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bovedas-callout-card:hover {
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.72), 0 0 32px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bovedas-callout-card .bcc-content {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.bovedas-callout-card .bcc-desc {
  flex: none !important;
  margin: 0 auto 16px auto !important;
  max-width: 680px !important;
  text-align: center !important;
}

.bovedas-callout-card .bcc-tiers-track {
  margin: 4px auto 20px auto !important;
  justify-content: center !important;
  width: 100% !important;
}

.bovedas-callout-card .bcc-actions-row {
  margin-top: 0 !important;
  justify-content: center !important;
}

.bcc-content {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
}

/* Badges Superiores: Píldoras Gamer con Backdrop Blur */
.bcc-badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bcc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bcc-badge-free {
  color: #00FF88;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.35);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}

.bcc-badge-free:hover {
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.35);
  transform: translateY(-1px);
}

.bcc-badge-streak {
  color: #FFDE00;
  background: rgba(255, 222, 0, 0.1);
  border: 1px solid rgba(255, 222, 0, 0.35);
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.2);
}

.bcc-badge-streak:hover {
  box-shadow: 0 0 18px rgba(255, 222, 0, 0.35);
  transform: translateY(-1px);
}

.bcc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 900;
  color: #FFFFFF;
  margin: 6px 0 8px 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.bcc-desc {
  color: #A6B4C9;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 560px;
  margin-bottom: 16px;
}

.bcc-desc strong {
  color: #FFDE00;
  font-weight: 700;
}

/* Botones de Acción */
.bcc-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-bcc-gold,
.btn-bcc {
  background: linear-gradient(135deg, #FFE066 0%, #FFD700 50%, #E5AC00 100%) !important;
  background-color: #FFD700 !important;
  color: #0B0E14 !important;
  border: 1px solid rgba(255, 240, 130, 0.5) !important;
  border-radius: 12px !important;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px;
  padding: 12px 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  min-height: 46px;
  box-shadow: 0 4px 18px rgba(255, 215, 0, 0.32), 0 0 12px rgba(255, 215, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-bcc-gold:hover,
.btn-bcc:hover {
  background: linear-gradient(135deg, #FFF088 0%, #FFE033 50%, #FFB700 100%) !important;
  box-shadow: 0 6px 26px rgba(255, 215, 0, 0.55), 0 0 24px rgba(255, 215, 0, 0.45) !important;
  transform: translateY(-2px);
  color: #000000 !important;
}

.btn-bcc-gold:active,
.btn-bcc:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.btn-bcc-secondary,
.btn-bcc-cal {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.4px;
  padding: 12px 20px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  min-height: 46px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-bcc-secondary:hover,
.btn-bcc-cal:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 222, 0, 0.45) !important;
  color: #FFDE00 !important;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.2);
  transform: translateY(-1px);
}

.btn-bcc-secondary:active,
.btn-bcc-cal:active {
  transform: translateY(1px);
}

/* Track de los 5 Tiers de Bóvedas */
.bcc-tiers-track,
.bcc-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: initial;
}

.bcc-tier-capsule {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: rgba(18, 22, 34, 0.75);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.bcc-tier-capsule:hover {
  transform: translateY(-2px) scale(1.03);
}

.bcc-tier-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bcc-tier-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Tiers individuales con bordes correspondientes, colores y resplandor */
.bcc-tier-capsule.tier-comun {
  border-color: rgba(205, 127, 50, 0.45);
  color: #E0A96D;
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.12);
}
.bcc-tier-capsule.tier-comun:hover {
  border-color: rgba(205, 127, 50, 0.85);
  box-shadow: 0 0 16px rgba(205, 127, 50, 0.3);
}

.bcc-tier-capsule.tier-plata {
  border-color: rgba(192, 192, 192, 0.45);
  color: #E2E8F0;
  box-shadow: 0 0 10px rgba(226, 232, 240, 0.12);
}
.bcc-tier-capsule.tier-plata:hover {
  border-color: rgba(226, 232, 240, 0.85);
  box-shadow: 0 0 16px rgba(226, 232, 240, 0.35);
}

.bcc-tier-capsule.tier-oro {
  border-color: rgba(255, 215, 0, 0.5);
  color: #FFD700;
  background: rgba(255, 215, 0, 0.08);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.16);
}
.bcc-tier-capsule.tier-oro:hover {
  border-color: rgba(255, 215, 0, 0.95);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.45);
}

.bcc-tier-capsule.tier-diamante {
  border-color: rgba(0, 229, 255, 0.5);
  color: #00E5FF;
  background: rgba(0, 229, 255, 0.06);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.18);
}
.bcc-tier-capsule.tier-diamante:hover {
  border-color: rgba(0, 229, 255, 0.95);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
}

.bcc-tier-capsule.tier-suprema {
  border-color: rgba(168, 85, 247, 0.55);
  color: #C084FC;
  background: rgba(168, 85, 247, 0.08);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
}
.bcc-tier-capsule.tier-suprema:hover {
  border-color: rgba(192, 132, 252, 0.95);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.5);
}

/* ==========================================================================
   PÁGINA MI PERFIL GAMER & PROTOCOLO 3 CANDADOS
   ========================================================================== */
.perfil-page-container {
  width: 100%;
  max-width: 1240px;
  margin: 30px auto;
  padding: 0 24px 60px 24px;
  box-sizing: border-box;
}

.perfil-hero-card {
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  backdrop-filter: none !important;
  margin-bottom: 30px;
}

.phc-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.phc-avatar-frame {
  position: relative;
  width: 80px;
  height: 80px;
}

.phc-avatar-frame img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #FFD700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.4);
}

.phc-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #00FF88;
  color: #0E1017;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
}

.phc-badge {
  font-size: 11px;
  font-weight: 800;
  color: #FFD700;
  letter-spacing: 0.5px;
}

.phc-username {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 900;
  color: #FFF;
  margin: 4px 0 2px 0;
}

.phc-sub {
  color: #6B7A99;
  font-size: 13px;
  margin: 0;
}

.phc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
}

.phc-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 16px;
}

.stat-ico {
  font-size: 26px;
}

.stat-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFF;
  display: block;
}

.stat-lbl {
  font-size: 11.5px;
  color: #6B7A99;
}

/* Badges de Ligas Competitivas Ranked */
.badge-liga {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: middle;
}
.badge-liga.liga-oro {
  background: rgba(255, 215, 0, 0.15);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
.badge-liga.liga-podio {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}
.badge-liga.liga-elite {
  background: rgba(255, 112, 67, 0.15);
  color: #FF7043;
  border: 1px solid rgba(255, 112, 67, 0.45);
  box-shadow: 0 0 10px rgba(255, 112, 67, 0.2);
}
.badge-liga.liga-maestro {
  background: rgba(168, 85, 247, 0.15);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}
.badge-liga.liga-retador {
  background: rgba(148, 163, 184, 0.15);
  color: #94A3B8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.phc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.perfil-tabs-wrapper {
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.perfil-tabs-nav {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
}

.pt-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6B7A99;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.pt-btn.active {
  color: #FFD700;
  border-bottom-color: #FFD700;
  background: rgba(255, 215, 0, 0.04);
}

.pt-content,
.perfil-tab-content {
  display: none;
  padding: 24px;
}

.pt-content.active,
.perfil-tab-content.active {
  display: block;
}

.tab-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #FFF;
  margin: 0 0 6px 0;
}

.tab-sub {
  color: #9EABBC;
  font-size: 13.5px;
  margin-bottom: 20px;
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: break-word;
}

.tab-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  width: 100%;
}

.empty-drops-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 26px 16px;
  text-align: center;
  margin: 15px 0;
  box-sizing: border-box;
}

.empty-drops-box .empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.empty-drops-box h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 8px 0;
}

.empty-drops-box p {
  font-size: 12.5px;
  color: #8F9CAE;
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}

.empty-drops-box .btn {
  margin-top: 14px;
}

.empty-garaje-box {
  background: #0B0E14 !important;
  background: linear-gradient(180deg, #111726 0%, #0B0E14 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.empty-garaje-box .empty-icon {
  font-size: 42px;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.35));
}

.perfil-drops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.perfil-drop-card {
  background: #0B0E14;
  background: linear-gradient(180deg, #111726 0%, #0B0E14 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
}

.perfil-drop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
}

/* Sutil Glow y Acentos según Tier */
.perfil-drop-card.pdc-tier-1 {
  border-color: rgba(148, 163, 184, 0.22);
}
.perfil-drop-card.pdc-tier-1:hover {
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(148, 163, 184, 0.12);
}

.perfil-drop-card.pdc-tier-2 {
  border-color: rgba(0, 240, 255, 0.25);
}
.perfil-drop-card.pdc-tier-2:hover {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 240, 255, 0.16);
}

.perfil-drop-card.pdc-tier-3 {
  border-color: rgba(255, 215, 0, 0.28);
}
.perfil-drop-card.pdc-tier-3:hover {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.18);
}

.perfil-drop-card.pdc-tier-4 {
  border-color: rgba(168, 85, 247, 0.32);
}
.perfil-drop-card.pdc-tier-4:hover {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(168, 85, 247, 0.2);
}

.perfil-drop-card.pdc-tier-5 {
  border-color: rgba(0, 255, 136, 0.35);
}
.perfil-drop-card.pdc-tier-5:hover {
  border-color: rgba(0, 255, 136, 0.65);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 255, 136, 0.22);
}

.perfil-drop-card.pendiente {
  border-color: rgba(255, 215, 0, 0.3);
}

.perfil-drop-card.entregado {
  border-color: rgba(0, 255, 136, 0.25);
  opacity: 0.92;
  background: linear-gradient(180deg, #0d141e 0%, #090c12 100%);
}

.pdc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pdc-tier {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #CBD5E1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pdc-tier-badge-1 {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.3);
}

.pdc-tier-badge-2 {
  background: rgba(0, 240, 255, 0.1);
  color: #00F0FF;
  border-color: rgba(0, 240, 255, 0.3);
}

.pdc-tier-badge-3 {
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
  border-color: rgba(255, 215, 0, 0.35);
}

.pdc-tier-badge-4 {
  background: rgba(168, 85, 247, 0.12);
  color: #C084FC;
  border-color: rgba(168, 85, 247, 0.35);
}

.pdc-tier-badge-5 {
  background: rgba(0, 255, 136, 0.12);
  color: #00FF88;
  border-color: rgba(0, 255, 136, 0.35);
}

.pdc-status {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pdc-status .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.status-ok {
  color: #00FF88;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.25);
}

.status-ok .status-dot {
  background: #00FF88;
  box-shadow: 0 0 6px #00FF88;
}

.status-pending {
  color: #FFB703;
  background: rgba(255, 183, 3, 0.1);
  border: 1px solid rgba(255, 183, 3, 0.25);
}

.status-pending .status-dot {
  background: #FFB703;
  box-shadow: 0 0 6px #FFB703;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pdc-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.pdc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 12px 0;
  line-height: 1.35;
  letter-spacing: 0.3px;
  word-break: break-word;
}

.pdc-security {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.pdc-code-row,
.pdc-pin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.pdc-code-row {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.16);
}

.pdc-pin-row {
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.16);
}

.pdc-lbl {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.pdc-claim-val {
  color: #FFD700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
  word-break: break-all;
}

.pdc-pin-val {
  color: #00FF88;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
  word-break: break-all;
}

.pdc-pin-tip {
  display: block;
  font-size: 11px;
  color: #64748B;
  margin-top: 2px;
  line-height: 1.35;
}

.pdc-actions {
  margin-top: 4px;
}

.btn-discord-claim {
  background: #5865F2 !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 1px solid #5865F2 !important;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.btn-discord-claim:hover {
  background: #4752C4 !important;
  border-color: #4752C4 !important;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.4);
  transform: translateY(-1px);
}

.btn-discord-claim:active {
  transform: translateY(0);
}

.pdc-discord-svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.pdc-entregado-msg {
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: #00FF88;
  text-align: center;
  box-sizing: border-box;
  word-break: break-word;
}

.pdc-entregado-check {
  font-weight: 800;
  margin-right: 4px;
}

.perfil-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.perfil-table th,
.perfil-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.perfil-table th {
  color: #6B7A99;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.shield-explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.shield-info-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.sib-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.shield-info-box h4 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  color: #FFF;
  margin: 0 0 6px 0;
}

.shield-info-box p {
  color: #9EABBC;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   MOBILE RESPONSIVE POLISH & OVERFLOW PREVENTION (VIEWPORT <= 768px / 600px)
   ========================================================================== */
.site-nav:not(.abierto) {
  display: none !important;
}

@media (max-width: 768px) {
  .site-main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  /* 1. Ribbon superior de Stream: cero desbordamiento y botones externos ocultos en móvil */
  .live-stream-ribbon {
    padding: 6px 12px !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .live-stream-ribbon .live-ribbon-actions,
  .live-stream-ribbon .live-stream-btn,
  .live-stream-ribbon .live-ribbon-sub,
  .live-stream-ribbon .live-ribbon-divider {
    display: none !important;
  }
  .live-pulse-text {
    font-size: 11px !important;
  }
  .live-ribbon-title {
    font-size: 12px !important;
  }

  /* 2. Cabecera móvil (<= 900px): Brand compacto y acciones 100% visibles */
  .gaming-header {
    position: sticky !important;
    top: 0 !important;
    height: 52px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 10000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 14, 20, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  }
  .gaming-header .header-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    max-width: 170px !important;
    margin: 0 !important;
  }
  .gaming-header .logo-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    border-radius: 8px !important;
    padding: 0 !important;
  }
  .gaming-header .brand-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    max-width: none !important;
  }
  .gaming-header .brand-badge-shop,
  .gaming-header .brand-sub {
    display: none !important;
  }
  .gaming-header .header-search:not(.abierto),
  .gaming-header .gaming-nav {
    display: none !important;
  }
  .gaming-header .header-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 140px !important;
  }

  /* Acciones en móvil (<= 900px):
     1. Lupa dorada para buscar productos
     2. Selector de moneda COP
     3. Menú hamburguesa (Comunidad & Herramientas)
     (El carrito de compras vive en la barra dock inferior táctil permanente) */
  .gaming-header .search-toggle {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 215, 0, 0.12) !important;
    border: 1px solid rgba(255, 215, 0, 0.45) !important;
    color: #FFD700 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .gaming-header .search-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }

  .gaming-header .currency-selector-wrap {
    flex-shrink: 0 !important;
    display: inline-flex !important;
  }
  .gaming-header .currency-pill-btn {
    padding: 0 6px !important;
    height: 32px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    gap: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
  }
  .gaming-header .currency-pill-btn .curr-arrow {
    display: none !important;
  }

  .gaming-header .menu-toggle {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .gaming-header .menu-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }

  .gaming-header .cart-btn {
    display: none !important;
  }

  /* 3. Hero Categories Ticker: slider táctil horizontal fluido con snap */
  .hero-categories-ticker {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-categories-ticker::-webkit-scrollbar {
    display: none !important;
  }
  .hero-categories-ticker .ticker-pill {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }
  .hero-categories-ticker .ticker-dot {
    display: none !important;
  }
}

/* Login gamer unauthenticated state en /perfil */
.perfil-login-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.perfil-login-card {
  max-width: 580px;
  width: 100%;
  background: rgba(14, 18, 28, 0.94);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  padding: 36px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.1);
  backdrop-filter: none !important;
  text-align: center;
}
.plc-badge {
  display: inline-block;
  font-family: var(--fuente-gaming);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.plc-title {
  font-family: var(--fuente-gaming);
  font-size: 26px;
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.plc-desc {
  font-size: 13.5px;
  color: #8C96A8;
  line-height: 1.5;
  margin-bottom: 24px;
}
.plc-form {
  max-width: 400px;
  margin: 0 auto 28px;
}
.plc-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0 14px;
  margin-bottom: 12px;
  transition: all 0.2s;
}
.plc-input-wrap:focus-within {
  border-color: #FFD700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
  background: rgba(255, 255, 255, 0.08);
}
.plc-at {
  font-size: 18px;
  font-weight: 800;
  color: #FFD700;
  margin-right: 6px;
}
.plc-input {
  width: 100%;
  height: 44px;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}
.plc-btn {
  width: 100%;
  height: 46px;
  font-size: 15px;
  font-weight: 900;
  border-radius: 12px;
}
.plc-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}
@media (max-width: 500px) {
  .plc-features-grid {
    grid-template-columns: 1fr;
  }
}
.plc-feat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pfc-icon {
  font-size: 18px;
}
.plc-feat-card strong {
  font-size: 12.5px;
  color: #E2E8F0;
}
.plc-feat-card small {
  font-size: 11px;
  color: #64748B;
}

/* ============================================================
   MODAL GAMER DE AVISO Y REQUISITOS DE BÓVEDA (#vaultNoticeBackdrop)
   Bordes Neón Cyberpunk (#FF0055 / #FFB800), Dark Glass & Responsive
   ============================================================ */
.vault-notice-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 13, 0.88);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
  box-sizing: border-box;
}

.vault-notice-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.vault-notice-modal {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(155deg, rgba(17, 24, 39, 0.96) 0%, rgba(11, 14, 23, 0.98) 100%);
  border: 2px solid #FF0055;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(255, 0, 85, 0.35), 0 0 70px rgba(255, 184, 0, 0.15), 0 25px 60px rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  overflow: hidden;
  transform: scale(0.92) translateY(14px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.vault-notice-backdrop.visible .vault-notice-modal {
  transform: scale(1) translateY(0);
}

.vn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
  background: rgba(255, 0, 85, 0.15);
  color: #FF3366;
  border: 1px solid rgba(255, 0, 85, 0.4);
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.2);
}

.btn-close-notice {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

.btn-close-notice:hover {
  background: rgba(255, 0, 85, 0.25);
  color: #FFFFFF;
  border-color: #FF0055;
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
}

.vn-modal-body {
  padding: 24px 22px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.vn-icon-glow {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 85, 0.3) 0%, rgba(13, 17, 28, 0.7) 70%);
  border: 2px solid #FF0055;
  box-shadow: 0 0 25px rgba(255, 0, 85, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  animation: none !important; /* 0% GPU idle */
}

@keyframes vnPulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.4);
    border-color: #FF0055;
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 184, 0, 0.6);
    border-color: #FFB800;
  }
}

.vn-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #FFFFFF;
  margin: 0 0 8px 0;
  text-shadow: 0 0 16px rgba(255, 0, 85, 0.3);
}

.vn-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #94A3B8;
  margin: 0 0 20px 0;
  max-width: 400px;
}

.vn-reqs-container {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.vn-req-card {
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid rgba(255, 184, 0, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.vn-req-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.vn-req-title {
  font-size: 12px;
  font-weight: 600;
  color: #E2E8F0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vn-req-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #FFB800;
}

.vn-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vn-progress-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.vn-bar-streak {
  background: linear-gradient(90deg, #FF3366, #FF6B00);
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
}

.vn-bar-points {
  background: linear-gradient(90deg, #FFB800, #FFDE00);
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.6);
}

.vn-tip-box {
  background: rgba(0, 229, 255, 0.06);
  border: 1px dashed rgba(0, 229, 255, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: #7DD3FC;
  text-align: left;
}

.vn-actions {
  width: 100%;
  margin-top: 4px;
}

.btn-vault-notice-action {
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg, #FF0055 0%, #FFB800 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(255, 0, 85, 0.4);
  transition: all 0.2s ease;
}

.btn-vault-notice-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 184, 0, 0.5);
}

.btn-vault-notice-action:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255, 0, 85, 0.4);
}

@media (max-width: 480px) {
  .vault-notice-backdrop {
    padding: 12px;
  }
  .vault-notice-modal {
    max-width: 100%;
    border-radius: 16px;
  }
  .vn-modal-header {
    padding: 12px 16px 10px;
  }
  .vn-modal-body {
    padding: 18px 16px 16px;
  }
  .vn-title {
    font-size: 19px;
  }
  .vn-desc {
    font-size: 12.5px;
    margin-bottom: 16px;
  }
  .vn-icon-glow {
    width: 56px;
    height: 56px;
    font-size: 26px;
    margin-bottom: 12px;
  }
  .btn-vault-notice-action {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ===== GAMIFICACIÓN Y PERFIL: INSIGNIAS, LOGROS & PIN ===== */
.perfil-badges-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.badge-item-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.badge-item-pill:hover {
  transform: translateY(-2px);
}

.badge-item-pill.oro {
  border-color: #FFD700;
  color: #FFD700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.08);
}

.badge-item-pill.cian {
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.08);
}

.badge-item-pill.amatista {
  border-color: #A855F7;
  color: #C084FC;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.08);
}

.badge-item-pill.esmeralda {
  border-color: #10B981;
  color: #34D399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

/* Cuadrículas de Insignias y Logros */
.insignias-grid, .logros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.insignia-card {
  background: rgba(15, 21, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.insignia-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}

.insignia-card.oro {
  border-left: 4px solid #FFD700;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.12);
}

.insignia-card.cian {
  border-left: 4px solid #00F0FF;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.12);
}

.insignia-card.amatista {
  border-left: 4px solid #A855F7;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.12);
}

.insignia-card.esmeralda {
  border-left: 4px solid #10B981;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12);
}

.ins-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ins-details {
  flex: 1;
}

.ins-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ins-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFF;
  margin: 0;
}

.ins-tag {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ins-desc {
  font-size: 12px;
  color: #94A3B8;
  margin: 4px 0 8px 0;
  line-height: 1.4;
}

.ins-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748B;
}

/* Tarjeta de Logro */
/* ==========================================================================
   SISTEMA DE LOGROS & GAMIFICACIÓN ADICTIVA (Gamer Dark Bento)
   ========================================================================== */

.logros-system-wrapper {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  margin-top: 10px;
}

/* 1. Mastery HUD & Radar Bento */
.logros-mastery-hud {
  background: rgba(15, 21, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.logros-mastery-hud::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFD700, #A855F7, #00F0FF, #00FF88);
}

.lmh-header-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}

.lmh-hunter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lmh-hunter-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #FFD700;
  padding: 8px 16px;
  border-radius: 12px;
  width: fit-content;
}

.lmh-hunter-icon {
  font-size: 28px;
  line-height: 1;
}

.lmh-hunter-info {
  display: flex;
  flex-direction: column;
}

.lmh-tier-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lmh-hunter-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #FFF;
  margin: 0;
  line-height: 1.1;
}

.lmh-global-prog {
  width: 100%;
  max-width: 440px;
}

.lmh-prog-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #94A3B8;
  margin-bottom: 6px;
}

.lmh-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.lmh-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #00FF88);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.lmh-next-tier-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  color: #CBD5E1;
}

.lmh-next-reward-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.12);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.lmh-rewards-card {
  display: flex;
  gap: 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 18px;
}

.lmh-reward-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lrs-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.lrs-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.lrs-val.ganados {
  color: #00FF88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.lrs-val.potencial {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Radar de Categorías */
.lmh-categories-radar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.lmh-cat-chip {
  background: rgba(11, 14, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  user-select: none;
}

.lmh-cat-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.05);
}

.lmh-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 6px;
}

.lmh-cat-pct {
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
}

.lmh-cat-bar-bg {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}

.lmh-cat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00F0FF, #A855F7);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.lmh-cat-sub {
  font-size: 10.5px;
  color: #64748B;
  text-align: right;
}

/* Hitos de Colección Roadmap */
.logros-milestones-track {
  background: linear-gradient(135deg, rgba(15, 21, 33, 0.9), rgba(11, 14, 20, 0.95));
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.lmt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lmt-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lmt-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #FFD700;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lmt-hint {
  font-size: 11.5px;
  color: #94A3B8;
}

.lmt-progress-pill {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
  letter-spacing: 0.5px;
}

.lmt-nodes-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.lmt-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 21, 33, 0.7);
  font-size: 11px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  box-sizing: border-box;
}

.lmt-node:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 0, 0.35);
}

.lmt-node.alcanzado {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(15, 21, 33, 0.95));
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.12);
}

.lmt-node-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 215, 0, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lmt-node-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lmt-node-desc {
  font-size: 10px;
  font-weight: 700;
  color: #38BDF8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lmt-node-premio {
  font-weight: 700;
  color: #FFF;
  font-size: 11.5px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

.lmt-node-check {
  font-weight: 900;
  font-size: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lmt-node.alcanzado .lmt-node-check {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.lmt-node.pendiente .lmt-node-check {
  background: rgba(255, 255, 255, 0.04);
  color: #64748B;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 2. Sección Casi Listos (Dopamine Loop) */
.logros-casi-listos-section {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(168, 85, 247, 0.06), rgba(15, 21, 33, 0.9));
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 24px rgba(0, 240, 255, 0.08);
}

.lcls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lcls-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFF;
  margin: 0;
}

.lcls-sub {
  font-size: 12.5px;
  color: #94A3B8;
  margin: 2px 0 0 0;
}

.lcls-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
  letter-spacing: 0.5px;
}

.lcls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.casi-listo-card {
  background: rgba(11, 14, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, border-color 0.2s;
}

.casi-listo-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.4);
}

.clc-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.clc-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.clc-info {
  flex: 1;
  min-width: 0;
}

.clc-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.clc-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.clc-tier-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.clc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clc-reward {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
  white-space: nowrap;
}

.clc-rarity {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.clc-desc {
  font-size: 12px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.35;
}

.clc-prog-wrap {
  width: 100%;
}

.clc-prog-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #94A3B8;
  margin-bottom: 4px;
}

.clc-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.clc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00F0FF, #00FF88);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 3. Navegación por Categorías & Filtros */
.logros-nav-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logros-categories-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.logros-categories-nav::-webkit-scrollbar {
  display: none;
}

.lcn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 21, 33, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-height: 40px;
}

.lcn-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.2);
}

.lcn-pill.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: #00F0FF;
  color: #FFF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.lcn-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFF;
}

.lcn-pill.active .lcn-badge {
  background: #00F0FF;
  color: #000;
}

.lcn-pill.highlight-sagas {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.08);
  color: #FFD700;
}

.lcn-pill.highlight-sagas.active {
  background: rgba(255, 215, 0, 0.2);
  border-color: #FFD700;
  color: #FFF;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
}

.lcn-pill.highlight-sagas.active .lcn-badge {
  background: #FFD700;
  color: #000;
}

/* Filtros Secundarios y Buscador */
.logros-filter-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(11, 14, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
}

.lfc-search-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.lfc-search-ico {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: #64748B;
  pointer-events: none;
}

.lfc-search-input {
  width: 100%;
  background: rgba(15, 21, 33, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 36px 10px 36px;
  color: #FFF;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lfc-search-input:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.lfc-clear-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
}

.lfc-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.lfc-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lfc-group-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  margin-right: 2px;
}

.lfc-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lfc-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFF;
}

.lfc-chip.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFF;
}

/* 4. Tarjetas Bento de Logro */
.logros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.logro-card {
  background: rgba(15, 21, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.logro-card:hover {
  transform: translateY(-3px);
}

/* Rarezas & Glows */
.logro-card.rarity-comun {
  border-left: 3px solid #94A3B8;
}

.logro-card.rarity-raro {
  border-left: 3px solid #00F0FF;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.08);
}

.logro-card.rarity-epico {
  border-left: 3px solid #A855F7;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.12);
}

.logro-card.rarity-legendario {
  border-left: 3px solid #FFD700;
  box-shadow: 0 4px 24px rgba(255, 215, 0, 0.16);
}

/* Estados */
.logro-card.completado {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 21, 33, 0.95));
}

.logro-card.progreso {
  border-color: rgba(0, 240, 255, 0.25);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.04), rgba(15, 21, 33, 0.92));
}

.logro-card.bloqueado {
  opacity: 0.75;
}

.logro-card.bloqueado:hover {
  opacity: 0.95;
}

.logro-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.logro-emoji {
  line-height: 1;
}

.logro-check-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10B981;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

.logro-lock-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  padding: 1px;
}

.logro-details {
  flex: 1;
  min-width: 0;
}

.logro-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.logro-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFF;
  margin: 0;
  line-height: 1.2;
}

.logro-reward-pill {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
  white-space: nowrap;
}

.logro-meta-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.logro-tag-rareza {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  letter-spacing: 0.5px;
}

.logro-tag-cat {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #94A3B8;
}

.logro-tag-fecha {
  font-size: 9.5px;
  color: #10B981;
}

.logro-tag-tier {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.logro-tag-saga {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 215, 0, 0.1);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.logro-reward-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px 0;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

.lrtr-label {
  font-size: 10px;
  color: #64748B;
  font-weight: 700;
}

.lrtr-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #00F0FF;
}

.logro-date-foot {
  font-size: 10px;
  color: #10B981;
  margin-top: 4px;
  font-weight: 700;
}

.logro-desc {
  font-size: 12px;
  color: #94A3B8;
  margin: 4px 0 10px 0;
  line-height: 1.4;
}

.logro-prog-wrap {
  width: 100%;
}

.logro-prog-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #64748B;
  margin-bottom: 4px;
}

.logro-pct-text {
  font-weight: 700;
  color: #00F0FF;
}

.logro-card.completado .logro-pct-text {
  color: #10B981;
}

.logro-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.logro-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00F0FF, #00FF88);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.logro-card.completado .logro-bar-fill {
  background: #10B981;
}

/* 5. Vista de Sagas & Cadenas de Misiones (Bento Questlines) */
.logros-sagas-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.lsc-header-banner {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 240, 255, 0.08), rgba(15, 21, 33, 0.9));
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 14px;
  padding: 16px 20px;
}

.lsc-main-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #FFD700;
  margin: 0;
}

.lsc-main-sub {
  font-size: 12.5px;
  color: #94A3B8;
  margin: 4px 0 0 0;
}

.lsc-sagas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.logro-saga-card {
  background: rgba(15, 21, 33, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.logro-saga-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.logro-saga-card.saga-completada {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 21, 33, 0.95));
}

.lsc-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.lsc-saga-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.lsc-saga-titles {
  flex: 1;
  min-width: 0;
}

.lsc-saga-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.lsc-saga-cat-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #94A3B8;
}

.lsc-saga-master-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.lsc-saga-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  color: #FFF;
  margin: 0;
  line-height: 1.2;
}

.lsc-saga-desc {
  font-size: 11.5px;
  color: #94A3B8;
  margin: 3px 0 0 0;
  line-height: 1.35;
}

.lsc-saga-prog-wrap {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lsc-saga-prog-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #94A3B8;
}

.lsc-saga-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.lsc-saga-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00F0FF, #00FF88);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.lsc-saga-points-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #64748B;
}

.lsc-saga-steps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.lsc-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 11.5px;
  transition: background 0.15s;
}

.lsc-step-item.step-done {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.lsc-step-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lsc-step-item.step-done .lsc-step-num {
  background: #10B981;
  color: #000;
  font-weight: 900;
}

.lsc-step-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lsc-step-title {
  font-weight: 700;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lsc-step-sub {
  font-size: 10px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lsc-step-pts {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #FFD700;
  white-space: nowrap;
}

/* Módulo de Seguridad y PIN */
.seguridad-pin-card {
  background: rgba(15, 21, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  max-width: 580px;
  margin-top: 14px;
}

.spc-status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.spc-status-banner.activo {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
}

.spc-status-banner.alerta {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #FBBF24;
}

.spc-form-group {
  margin-bottom: 16px;
}

.spc-label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #E2E8F0;
  margin-bottom: 6px;
}

.spc-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
  letter-spacing: 4px;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.spc-input:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.spc-tip {
  font-size: 12px;
  color: #64748B;
  margin-top: 6px;
}

/* Canje de Códigos */
.canjear-box {
  background: rgba(15, 21, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  max-width: 580px;
  margin-top: 14px;
}

.canjear-flex {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

.canjear-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  background: #0d1527;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFD700;
  letter-spacing: 1px;
  outline: none;
  text-transform: uppercase;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.canjear-input::placeholder {
  color: #64748B;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.canjear-input:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
  background: #0f1c35;
}

.canjear-flex #btnCanjearAccion,
.canjear-flex .btn-canjear-accion {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  background: linear-gradient(160deg, #7C3AED, #8B5CF6);
  border: 1px solid #8B5CF6;
  color: #FFFFFF;
  transition: all 0.2s ease;
}

.canjear-flex #btnCanjearAccion:hover,
.canjear-flex .btn-canjear-accion:hover {
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
  border-color: #A78BFA;
  transform: translateY(-1px);
}

.canjear-flex #btnCanjearAccion:active,
.canjear-flex .btn-canjear-accion:active {
  transform: translateY(0);
}

/* ==========================================================================
   PERFIL PÚBLICO GAMER (Showcase 360 Bento)
   ========================================================================== */
.public-hero-card {
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.08), inset 0 0 20px rgba(0, 240, 255, 0.03);
}

.public-hero-username {
  color: #FFF;
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.public-trofeos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.public-trofeo-card {
  background: rgba(15, 21, 33, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.public-trofeo-card:hover {
  transform: translateY(-3px);
  border-color: #FFD700;
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.15);
}

.ptc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ptc-tier-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 215, 0, 0.15);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.ptc-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.ptc-status-pill.entregado {
  background: rgba(0, 255, 136, 0.15);
  color: #00FF88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.ptc-status-pill.proceso {
  background: rgba(255, 184, 0, 0.15);
  color: #FFB800;
  border: 1px solid rgba(255, 184, 0, 0.3);
}

.ptc-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ptc-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ptc-info {
  flex: 1;
}

.ptc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFF;
  margin: 0 0 2px 0;
}

.ptc-date {
  font-size: 11px;
  color: #64748B;
}

.ptc-footer {
  font-size: 11px;
  color: #00F0FF;
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

.public-testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.public-testimonio-card {
  background: rgba(15, 21, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.public-testimonio-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 0, 0.3);
}

.ptest-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ptest-stars {
  font-size: 14px;
  color: #FFD700;
  letter-spacing: 2px;
}

.ptest-date {
  font-size: 11px;
  color: #64748B;
}

.ptest-comment {
  font-size: 13px;
  color: #CBD5E1;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

.ptest-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  font-size: 11px;
}

.ptest-product {
  color: #94A3B8;
}

.ptest-badge {
  color: #00FF88;
  font-weight: 700;
}

.public-perfil-cta {
  position: relative;
  margin-top: 36px;
  padding: 32px 24px;
  background: linear-gradient(135deg, rgba(14, 18, 28, 0.95), rgba(20, 26, 42, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.ppc-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.18), transparent 70%);
  pointer-events: none;
}

.ppc-badge {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.ppc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #FFF;
  margin: 0 0 8px 0;
}

.ppc-desc {
  font-size: 14px;
  color: #94A3B8;
  max-width: 540px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

.ppc-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  /* === SISTEMA DE LOGROS & GAMIFICACIÓN RESPONSIVE MÓVIL (360px - 390px) === */
  .logros-system-wrapper {
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }
  .logros-mastery-hud {
    padding: 14px 12px !important;
    gap: 14px !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .lmh-header-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .lmh-hunter-badge {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
  }
  .lmh-global-prog {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .lmh-rewards-card {
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .lmh-reward-stat {
    min-width: 0 !important;
  }
  .lrs-val {
    font-size: 16px !important;
    white-space: nowrap !important;
  }
  /* Radar de Categorías en Móvil: Carrusel horizontal con scroll snap */
  .lmh-categories-radar {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 2px 2px 6px 2px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  .lmh-categories-radar::-webkit-scrollbar {
    display: none !important;
  }
  .lmh-cat-chip {
    flex: 0 0 135px !important;
    min-width: 130px !important;
    scroll-snap-align: start !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }
  /* Hitos de Colección MTX: Track Horizontal Snap Gamer Dark (Cero desbordamiento) */
  .logros-milestones-track {
    padding: 12px !important;
    border-radius: 12px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .lmt-header {
    gap: 6px !important;
  }
  .lmt-title {
    font-size: 14px !important;
  }
  .lmt-hint {
    font-size: 10.5px !important;
  }
  .lmt-nodes-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 4px 2px 8px 2px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 240, 255, 0.35) rgba(11, 14, 20, 0.6) !important;
  }
  .lmt-nodes-grid::-webkit-scrollbar {
    height: 4px !important;
  }
  .lmt-nodes-grid::-webkit-scrollbar-track {
    background: rgba(11, 14, 20, 0.8) !important;
    border-radius: 999px !important;
  }
  .lmt-nodes-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #FFD700, #00F0FF) !important;
    border-radius: 999px !important;
  }
  .lmt-node {
    flex: 0 0 205px !important;
    min-width: 190px !important;
    max-width: 220px !important;
    scroll-snap-align: start !important;
    padding: 9px 11px !important;
    box-sizing: border-box !important;
  }
  .lmt-node-premio {
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  /* Sección Casi Listos en Móvil */
  .logros-casi-listos-section {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .lcls-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .casi-listo-card {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Barra de Navegación y Filtros de Logros */
  .logros-nav-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }
  .logros-categories-nav {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 2px 2px 6px 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  .logros-categories-nav::-webkit-scrollbar {
    display: none !important;
  }
  .lcn-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .logros-filter-controls {
    padding: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .lfc-search-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .lfc-search-input {
    width: 100% !important;
    font-size: 16px !important; /* Previene auto-zoom en iOS */
    padding: 10px 36px 10px 34px !important;
    box-sizing: border-box !important;
  }
  .lfc-pills-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .lfc-group {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }
  .lfc-group::-webkit-scrollbar {
    display: none !important;
  }
  .lfc-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
  /* Bento Tarjetas de Logros */
  .insignias-grid, .logros-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .logro-card {
    padding: 12px 14px !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Sagas en Móvil */
  .lsc-sagas-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .logro-saga-card {
    padding: 14px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .canjear-flex {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  .canjear-flex .canjear-input {
    width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Previene auto-zoom en Safari iOS */
    padding: 12px 14px !important;
    text-align: center;
  }
  .canjear-flex #btnCanjearAccion,
  .canjear-flex .btn-canjear-accion {
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* task-01: css(perfil-container-and-hero-mobile) */
  .perfil-page-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 12px auto 80px auto !important;
    padding: 0 12px 95px 12px !important;
    padding-bottom: 95px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .perfil-hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 16px 10px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    overflow: hidden !important;
  }

  /* task-02: css(user-info-mobile-center) */
  .phc-left {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
  .phc-avatar-frame {
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto !important;
  }
  .phc-user-info {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .phc-username {
    font-size: clamp(20px, 5vw, 24px) !important;
    text-align: center !important;
    word-break: break-word !important;
    margin: 4px 0 2px 0 !important;
    width: 100% !important;
  }
  .phc-sub {
    font-size: 12px !important;
    text-align: center !important;
    color: #6B7A99 !important;
  }
  .perfil-badges-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
    width: 100% !important;
  }
  .badge-item-pill {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* task-03: css(stats-grid-mobile-768) */
  .phc-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .phc-stats-grid > .phc-stat:nth-child(5) {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
  .phc-stat {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .stat-ico {
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }
  .stat-meta {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
    text-align: left !important;
  }
  .stat-val {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .stat-lbl {
    font-size: 9.5px !important;
    color: #6B7A99 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* task-04: css(actions-and-tabs-mobile) */
  .phc-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .phc-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
  }
  .perfil-tabs-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
  }
  .perfil-tabs-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }
  .perfil-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }
  .pt-btn {
    font-size: 12.5px !important;
    padding: 12px 14px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .pt-content,
  .perfil-tab-content {
    padding: 14px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* task-05: css(bento-and-compras-mobile) */
  .perfil-bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .perfil-bento-card {
    width: 100% !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }
  .perfil-compras-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .perfil-compra-card {
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  .pcc-actions-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pcc-actions-row .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* task-03: css(stats-grid-2-columns) */
@media (max-width: 680px) {
  .perfil-page-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 12px auto 80px auto !important;
    padding: 0 12px 95px 12px !important;
    padding-bottom: 95px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .tab-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .tab-sub {
    line-height: 1.5 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .empty-drops-box {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 26px 16px !important;
    text-align: center !important;
    margin: 15px 0 !important;
  }
  .empty-drops-box .empty-icon {
    font-size: 36px !important;
    margin-bottom: 8px !important;
  }
  .empty-drops-box h3 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #FFF !important;
    margin: 0 0 8px 0 !important;
  }
  .empty-drops-box p {
    font-size: 12.5px !important;
    color: #8F9CAE !important;
    line-height: 1.5 !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .empty-drops-box .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .perfil-hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 16px 10px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    overflow: hidden !important;
  }
  .phc-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .phc-stats-grid > .phc-stat:nth-child(5) {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
  .phc-stat {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .stat-ico {
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }
  .stat-meta {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
    text-align: left !important;
  }
  .stat-val {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .stat-lbl {
    font-size: 9.5px !important;
    color: #6B7A99 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
}

@media (max-width: 600px) {
  .perfil-page-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 12px auto 80px auto !important;
    padding: 0 12px 95px 12px !important;
    padding-bottom: 95px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .perfil-hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 16px 10px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   FASE FINAL: VARIANT SELECTOR, WHATSAPP EXPRESS, RESTOCK & NEON TOASTS
   ========================================================================== */

/* 1. SELECTOR DE VARIANTES CLEAN VS DUPED (task-15) */
.variant-selector-wrap {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(18, 24, 38, 0.7);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 12px;
  backdrop-filter: none;
}

/* Sello y Banner Clean Only (Gamer Premium) */
.vcb-badge,
.variant-clean-only-banner {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #00F0FF !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.variant-clean-only-banner {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.variant-clean-only-banner .vcb-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.vcb-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.35) !important;
}

.variant-clean-only-banner .vcb-stock {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.variant-clean-only-banner .vcb-stock.in-stock {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.variant-clean-only-banner .vcb-stock.out-stock {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.variant-clean-only-banner .vcb-desc {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: #94A3B8 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}
.variant-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
}
.vsh-label {
  color: #94A3B8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vsh-hint {
  color: #00F0FF;
  font-size: 0.82rem;
}
.variant-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.variant-pill-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(11, 14, 20, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.variant-pill-btn:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(18, 24, 38, 0.95);
  transform: translateY(-1px);
}
.variant-pill-btn.active {
  border-color: #00F0FF;
  background: radial-gradient(circle at top left, rgba(0, 240, 255, 0.15), rgba(11, 14, 20, 0.95));
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.1);
}
.vpb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.vpb-badge {
  font-weight: 800;
  font-size: 0.88rem;
  color: #F8FAFC;
}
.vpb-tag-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.vpb-tag-badge.in-stock {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.vpb-tag-badge.out-stock {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.vpb-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vpb-price {
  font-weight: 900;
  font-size: 1.05rem;
  color: #FFD700;
}
.vpb-sub {
  font-size: 0.72rem;
  color: #94A3B8;
}

/* 2. CHECKOUT WHATSAPP EXPRESS (task-14) */
.whatsapp-express-box {
  margin: 16px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(11, 14, 20, 0.95) 100%);
  border: 1.5px solid rgba(37, 211, 102, 0.4);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.12);
}
.wa-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.wa-box-icon {
  font-size: 1.4rem;
}
.wa-box-titles strong {
  display: block;
  font-size: 0.95rem;
  color: #25D366;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.wa-box-titles small {
  font-size: 0.78rem;
  color: #94A3B8;
}
.wa-buttons-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
}
.btn-whatsapp-direct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #25D366;
  color: #0B0E14;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-direct:hover {
  background: #20BA56;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(37, 211, 102, 0.45);
}
.btn-copy-wa-msg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #F8FAFC;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-copy-wa-msg:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #00F0FF;
  color: #00F0FF;
}

/* 3. ALERTAS DE RESTOCK (task-16) */
.btn-restock-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(0, 240, 255, 0.25));
  border: 1.5px solid #00F0FF;
  color: #00F0FF;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-restock-trigger:hover {
  background: #00F0FF;
  color: #0B0E14;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}
.modal-restock {
  max-width: 440px;
  background: #0B0E14;
  border: 1.5px solid #00F0FF;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.25);
}
.modal-restock-head {
  text-align: center;
  margin-bottom: 16px;
}
.restock-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid #00F0FF;
  border-radius: 20px;
  color: #00F0FF;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* 4. GAMER NEON TOAST (task-14 feedback) */
.gamer-neon-toast {
  border-color: #00F0FF !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 10px rgba(0, 240, 255, 0.15) !important;
}

/* Destello dorado al sincronizar llaves de bóveda en el HUD tras desencantar */
.keys-updated {
  animation: keyFlash 0.9s ease-in-out !important;
  color: #FFD700 !important;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.9) !important;
}

@keyframes keyFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)); }
  100% { transform: scale(1); }
}

/* 5. ESCUDOS EN BÓVEDAS (task-22) */
.uvb-shields {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
}

.uvb-keys {
  background: rgba(255, 222, 0, 0.12);
  border: 1px solid rgba(255, 222, 0, 0.35);
  color: #FFDE00;
}
.uvb-keys strong {
  color: #FFDE00;
}

@media (max-width: 520px) {
  .variant-pills-grid {
    grid-template-columns: 1fr;
  }
  .wa-buttons-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ADVANCED ECONOMY & BENTO UI (THEMOROTEX REDESIGN)
   ========================================================================== */

/* Bento Profile Grid */
.perfil-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: 15px;
}
.perfil-bento-card {
  background: rgba(18, 24, 38, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.perfil-bento-card:hover {
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.pbc-span-4 { grid-column: span 4; }
.pbc-span-6 { grid-column: span 6; }
.pbc-span-8 { grid-column: span 8; }
.pbc-span-12 { grid-column: span 12; }

@media (max-width: 960px) {
  .pbc-span-4, .pbc-span-6, .pbc-span-8 { grid-column: span 12; }
}

.pbc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.pbc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFF;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pbc-badge-pill {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.12);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.25);
}

/* ===== CUPONES & FORJA EN PERFIL (GAMER NEON DESIGN) ===== */
.perfil-cupones-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 440px !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
}

.perfil-cupones-grid::-webkit-scrollbar {
  width: 5px;
}
.perfil-cupones-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}
.perfil-cupones-grid::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.45);
  border-radius: 999px;
}

.perfil-coupon-ticket {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(10, 14, 23, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 4px solid #7C3AED !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.perfil-coupon-ticket.pcc-card-active {
  border-left-color: #00F0FF !important;
  border-color: rgba(0, 240, 255, 0.2) !important;
}
.perfil-coupon-ticket.pcc-card-active:hover {
  border-color: rgba(0, 240, 255, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.12) !important;
}

.perfil-coupon-ticket.pcc-card-scrap {
  border-left-color: #F59E0B !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  background: linear-gradient(135deg, rgba(28, 20, 14, 0.85), rgba(11, 14, 20, 0.98)) !important;
}

.perfil-coupon-ticket.pcc-card-recycled {
  border-left-color: #6B7280 !important;
  border-color: rgba(107, 114, 128, 0.2) !important;
  opacity: 0.65 !important;
}

.perfil-coupon-ticket.pcc-card-used {
  border-left-color: #10B981 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  opacity: 0.7 !important;
}

.pct-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.pcc-tag-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.pcc-tag-badge.tag-active {
  background: rgba(0, 240, 255, 0.12) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
}

.pcc-tag-badge.tag-scrap {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.pcc-tag-badge.tag-recycled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.pcc-tag-badge.tag-used {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.pct-expiry-badge {
  font-size: 11px !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
}

.pct-expiry-badge.is-exp {
  color: #EF4444 !important;
  font-weight: 700 !important;
}

.pct-code-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  gap: 10px !important;
}

.pct-code-wrap {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.pct-code-val {
  font-family: 'JetBrains Mono', 'Manrope', monospace !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 1.2px !important;
  white-space: nowrap !important;
}

.pct-code-val.is-burned {
  text-decoration: line-through !important;
  color: #6B7280 !important;
}

.btn-pct-copy {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #E2E8F0 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.btn-pct-copy:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.btn-pct-copy.copied {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10B981 !important;
  color: #34D399 !important;
}

.pct-desc-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.pct-desc-text {
  font-size: 12px !important;
  color: #CBD5E1 !important;
}

.pct-limit-chip {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #FBBF24 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.pct-bottom-bar {
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.btn-pcc-action {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-pcc-desencantar {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(236, 72, 153, 0.3)) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.25) !important;
}

.btn-pcc-desencantar:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(236, 72, 153, 0.5)) !important;
  border-color: #C084FC !important;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.45) !important;
  transform: translateY(-1px) !important;
}

.btn-pcc-scrap {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(220, 38, 38, 0.2)) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  color: #FDE68A !important;
}

.btn-pcc-scrap:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(220, 38, 38, 0.35)) !important;
  border-color: #F59E0B !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
  transform: translateY(-1px) !important;
}

.pcc-action-reward {
  font-size: 11px !important;
  font-weight: 700 !important;
  opacity: 0.9 !important;
}

.pcc-status-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.pcc-status-pill.pill-recycled {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

.pcc-status-pill.pill-used {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #34D399 !important;
}

/* Sorteos Ticket Box */
.sorteo-tickets-wallet-box {
  background: rgba(14, 22, 38, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 15px 0;
  box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.05);
}
.stwb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.stwb-icon {
  font-size: 1.8rem;
}
.stwb-header strong {
  color: #FFF;
  font-size: 0.95rem;
  display: block;
}
.stwb-header p {
  color: #94A3B8;
  font-size: 0.82rem;
  margin: 2px 0 0 0;
}
.stwb-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sorteo-feedback {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 8px;
  line-height: 1.4;
  transition: all 0.2s ease;
}
.sorteo-feedback.ok {
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.35);
  color: #00FF88;
}
.sorteo-feedback.err {
  background: rgba(255, 42, 75, 0.12);
  border: 1px solid rgba(255, 42, 75, 0.35);
  color: #FF4A6B;
}
.sorteo-feedback.info {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
}

/* Catalog Clean / Duped Stock Bar */
.stock-clean-duped-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px 0;
  flex-wrap: wrap;
}
.badge-stock-clean {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.35);
  color: #00FF88;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.badge-stock-duped {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.35);
  color: #FFB800;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
/* ==========================================================================
   MÓDULO HÍBRIDO DE PAGOS Y COMPROBANTES 24/7 (THEMOROTEX VIP)
   ========================================================================== */
.order-tracking-wrap {
  max-width: 860px;
  margin: 30px auto 60px auto;
  padding: 0 16px;
}
.order-card-vip {
  background: linear-gradient(170deg, rgba(20, 24, 38, 0.92), rgba(11, 14, 21, 0.98));
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(124, 58, 237, 0.15);
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
}
.order-card-vip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7C3AED, #00F0FF, #10B981, #FFD700);
}

.order-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.order-title-box h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.order-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.45);
  padding: 6px 14px;
  border-radius: 9999px;
  color: #00F0FF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.order-code-badge:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

/* Stepper 4 Pasos */
.order-stepper-wrap {
  margin: 24px 0 32px 0;
}
.order-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
}
@media (max-width: 680px) {
  .order-stepper {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
.stepper-step {
  background: rgba(15, 18, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}
.stepper-step.active {
  background: rgba(124, 58, 237, 0.15);
  border-color: #7C3AED;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.25);
}
.stepper-step.completed {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}
.stepper-step.highlight-cyan {
  background: rgba(0, 240, 255, 0.12);
  border-color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}
.stepper-step.highlight-emerald {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10B981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #A1A1AA;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px auto;
  transition: all 0.3s;
}
.stepper-step.active .step-num {
  background: #7C3AED;
  color: #FFF;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}
.stepper-step.completed .step-num {
  background: #10B981;
  color: #FFF;
}
.stepper-step.highlight-cyan .step-num {
  background: #00F0FF;
  color: #0B0B0F;
}
.step-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #F5F5F7;
  display: block;
}
.step-sub {
  font-size: 0.72rem;
  color: #71717A;
  display: block;
  margin-top: 2px;
}
.stepper-step.active .step-sub,
.stepper-step.highlight-cyan .step-sub {
  color: #00F0FF;
}

/* Expiration Countdown Banner */
.order-timer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 24px;
}
.order-timer-banner.expired {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}
.order-timer-banner.approved {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.45);
}
.timer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FBBF24;
  font-size: 0.9rem;
}
.order-timer-banner.expired .timer-info {
  color: #F87171;
}
.order-timer-banner.approved .timer-info {
  color: #34D399;
}
.timer-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
}

/* Banking Capsules */
.bank-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFF;
  margin: 20px 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bank-capsules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.bank-pill {
  background: rgba(14, 18, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s;
}
.bank-pill:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(20, 26, 40, 0.95);
}
.bank-pill-info {
  display: flex;
  flex-direction: column;
}
.bank-name {
  font-weight: 800;
  font-size: 0.85rem;
  color: #00F0FF;
  letter-spacing: 0.5px;
}
.bank-data {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFF;
  margin: 2px 0;
}
.bank-titular {
  font-size: 0.75rem;
  color: #71717A;
}
.btn-copy-mini {
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: #A78BFA;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-copy-mini:hover {
  background: #7C3AED;
  color: #FFF;
}

/* Receipt Upload Dropzone (Punto 4 Interactivo Gamer Dark) */
.receipt-upload-box {
  background: #0B0E14;
  border: 2px dashed rgba(0, 240, 255, 0.35);
  border-radius: 18px;
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 24px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.receipt-upload-box:hover, .receipt-upload-box.dragover {
  border-color: #00F0FF;
  background: rgba(0, 240, 255, 0.05);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.2), inset 0 0 15px rgba(0, 240, 255, 0.06);
  transform: translateY(-2px);
}
.receipt-upload-box.dragover {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
}

.dz-icon-wrap {
  font-size: 2.4rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(0, 240, 255, 0.3));
}

.dz-prompt-title {
  color: #F8FAFC;
  font-size: 1.1rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: block;
}

.dz-prompt-sub {
  color: #94A3B8;
  font-size: 0.86rem;
  margin: 6px 0 14px 0;
}

.dz-prompt-sub kbd {
  background: #1E293B;
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.78rem;
  font-family: monospace;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.dz-cta-row {
  margin: 10px 0 12px 0;
}

.btn-dz-browse {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid #00F0FF;
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dz-browse:hover {
  background: #00F0FF;
  color: #0B0E14;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.dz-formats-pill {
  display: inline-block;
  font-size: 0.74rem;
  color: #64748B;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 6px;
}

/* Vista previa de Dropzone */
.receipt-preview-wrap {
  margin-top: 0;
  display: none;
}

.dz-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.receipt-preview-wrap img {
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #00F0FF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 240, 255, 0.25);
}

.dz-preview-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.dz-preview-status {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
}

.dz-file-name {
  color: #F8FAFC;
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
  word-break: break-all;
}

.btn-dz-remove {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #EF4444;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 4px;
}

.btn-dz-remove:hover {
  background: #EF4444;
  color: #FFF;
}

/* 1-Click WhatsApp Button */
.btn-whatsapp-vip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: all 0.2s;
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}
.btn-whatsapp-vip:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
  color: #FFF;
}

/* ==========================================================================
   OPTIMIZACIÓN DE VENTAS, LÓGICA Y CONVERSIÓN 4X (THEMOROTEX TEST)
   ========================================================================== */

/* 1. Global Currency Switcher & 7-Countries Modal (task-03) */
.currency-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(18, 24, 38, 0.85);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 9999px;
  padding: 2px;
  gap: 2px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.currency-toggle:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.btn-currency-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(24, 24, 32, 0.85);
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 6px 12px;
  color: #F5F5F7;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 38px;
  user-select: none;
  white-space: nowrap;
}

.btn-currency-selector:hover {
  background: rgba(35, 35, 48, 0.95);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.btn-currency-selector #currFlag {
  font-size: 1.15rem;
  line-height: 1;
}

.btn-currency-selector #currCode {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #F5F5F7;
}

.btn-currency-selector .curr-arrow {
  font-size: 0.72rem;
  color: #00F0FF;
  transition: transform 0.2s ease;
  margin-left: 2px;
}

.btn-currency-selector:hover .curr-arrow {
  transform: translateY(1px);
}

.curr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 5px 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #A1A1AA;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
}

.curr-btn:hover {
  color: #FFFFFF;
}

.curr-btn.active {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transform: scale(1.02);
}

/* Modal Multidivisa de 7 Países */
.modal-monedas {
  max-width: 620px;
  width: 95%;
  background: #121219;
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 32px rgba(124, 58, 237, 0.25);
  padding: 24px;
  position: relative;
}

.modal-monedas-header {
  text-align: center;
  margin-bottom: 20px;
}

.modal-monedas-header h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #F5F5F7;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal-monedas-sub {
  font-size: 0.9rem;
  color: #A1A1AA;
  margin: 0 0 12px 0;
}

.modal-monedas-search-wrap {
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

.modal-monedas-search-input {
  width: 100%;
  background: rgba(11, 14, 20, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  padding: 10px 16px;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.modal-monedas-search-input:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
  background: rgba(11, 14, 20, 0.98);
}

.modal-monedas-search-input::placeholder {
  color: #64748B;
}

.currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #00F0FF #181820;
}

.currency-grid::-webkit-scrollbar {
  width: 6px;
}

.currency-grid::-webkit-scrollbar-track {
  background: #181820;
  border-radius: 8px;
}

.currency-grid::-webkit-scrollbar-thumb {
  background: #00F0FF;
  border-radius: 8px;
}

.currency-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background: #181820;
  border: 1px solid #292933;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 94px;
  position: relative;
  overflow: hidden;
  color: #F5F5F7;
  width: 100%;
}

.currency-card:hover {
  border-color: rgba(124, 58, 237, 0.65);
  background: rgba(30, 30, 42, 0.95);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
  transform: translateY(-2px);
}

.currency-card.selected,
.currency-card.active {
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.25) 0%, rgba(24, 24, 32, 0.95) 100%);
  border-color: #00F0FF;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 12px rgba(0, 240, 255, 0.08);
}

.currency-card.selected::after,
.currency-card.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #00F0FF;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.currency-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  width: 100%;
}

.currency-flag {
  font-size: 1.45rem;
  line-height: 1;
}

.currency-code {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #F5F5F7;
  letter-spacing: 0.5px;
}

.currency-country {
  font-size: 0.82rem;
  color: #A1A1AA;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 6px;
}

.currency-rate {
  font-size: 0.74rem;
  color: #71717A;
  font-family: 'JetBrains Mono', monospace;
  margin-top: auto;
  transition: color 0.2s ease;
}

.currency-card.selected .currency-rate,
.currency-card:hover .currency-rate {
  color: #00F0FF;
}

@media (max-width: 600px) {
  .currency-toggle {
    padding: 2px;
  }
  .btn-currency-selector {
    padding: 4px 10px;
    font-size: 0.84rem;
    min-height: 44px;
  }
  .curr-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  .currency-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .currency-card {
    padding: 12px 10px;
    min-height: 84px;
  }
  .currency-flag {
    font-size: 1.25rem;
  }
  .currency-code {
    font-size: 1rem;
  }
  .currency-country {
    font-size: 0.76rem;
  }
}

/* 2. Social Proof Toast Engine (task-02) */
#socialProofContainer,
.social-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: auto;
}

.social-proof-toast {
  pointer-events: auto;
  position: relative;
  background: rgba(15, 18, 28, 0.95);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.22);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.social-proof-toast:hover {
  border-color: #00F0FF;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 240, 255, 0.35);
}

/* Reubicación de Social Proof Toast en /valores para no tapar acciones */
@media (min-width: 961px) {
  body:has(.valores-page-wrap) #socialProofContainer,
  body:has(.valores-page-wrap) .social-toast-container {
    left: 96px !important;
    right: auto !important;
    bottom: 24px !important;
  }
}

@media (max-width: 640px) {
  #socialProofContainer,
  .social-toast-container {
    bottom: 80px;
    right: 16px;
    left: auto;
    max-width: 330px;
    width: calc(100vw - 32px);
  }
}

/* 3. QR Modal & Buttons (task-03) */
.btn-ver-qr,
.mp-btn-qr {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-ver-qr:hover,
.mp-btn-qr:hover {
  background: #00F0FF;
  color: #0B0E14;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.modal-qr {
  max-width: 420px;
  background: #111622;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 32px rgba(0, 240, 255, 0.25);
}

.modal-qr-header {
  text-align: center;
  margin-bottom: 16px;
}

.qr-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid #00F0FF;
  border-radius: 9999px;
  color: #00F0FF;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.qr-card-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 14px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  margin-bottom: 14px;
}

/* 4. Cart Upsell Banner (task-04) */
.cart-upsell-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(0, 240, 255, 0.15));
  border: 1px solid rgba(124, 58, 237, 0.5);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.2);
}

.upsell-text-wrap {
  flex: 1;
}

.upsell-badge {
  display: inline-block;
  background: linear-gradient(135deg, #7C3AED, #8B5CF6);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.upsell-p {
  margin: 2px 0 0 0;
  font-size: 0.88rem;
  color: #F5F5F7;
  line-height: 1.35;
}

.upsell-p strong {
  color: #00FF88;
  font-weight: 800;
}

.btn-upsell-add {
  background: linear-gradient(135deg, #10B981, #059669);
  border: 1px solid #10B981;
  color: #FFFFFF;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.btn-upsell-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
  background: #10B981;
}

/* ==========================================================================
   SOPORTE DUAL (WHATSAPP & DISCORD) Y TRANQUILIDAD DEL CLIENTE (task-02, task-05)
   ========================================================================== */

.dual-support-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .dual-support-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.btn-discord-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #5865F2, #4752C4);
  color: #FFFFFF;
  border: 1px solid rgba(88, 101, 242, 0.5);
  border-radius: 12px;
  padding: 14px 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.35);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.btn-discord-vip:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(88, 101, 242, 0.55);
  background: linear-gradient(135deg, #677BC4, #5865F2);
  color: #FFF;
}

.stock-reserved-card {
  background: rgba(0, 240, 255, 0.07);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.stock-reserved-card .reserved-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.stock-reserved-card .reserved-text {
  font-size: 0.92rem;
  color: #E4E4E7;
  line-height: 1.4;
}

.stock-reserved-card .reserved-text strong {
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.5px;
}

.radar-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 9999px;
  padding: 2px 8px;
  margin-top: 4px;
}

.radar-dot {
  width: 7px;
  height: 7px;
  background-color: #00F0FF;
  border-radius: 50%;
  box-shadow: 0 0 8px #00F0FF;
  animation: none !important; /* 0% GPU idle */
}

/* ==========================================================================
   PESTAÑA 'MIS COMPRAS' EN PERFIL & RESEÑAS DISCORD (task-02)
   ========================================================================== */

.perfil-compras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.perfil-compra-card {
  background: rgba(24, 24, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.perfil-compra-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.pcc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pcc-code-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcc-code-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: #00F0FF;
}

.pcc-date {
  font-size: 0.78rem;
  color: #71717A;
}

.pcc-status-msg {
  font-size: 0.84rem;
  color: #A1A1AA;
  margin: 0;
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #7C3AED;
}

.pcc-product-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 10px 12px;
}

.pcc-prod-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pcc-prod-info {
  flex: 1;
  min-width: 0;
}

.pcc-prod-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #F5F5F7;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcc-price-box {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.pcc-price-cop {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #00FF88;
}

.pcc-price-usd {
  font-size: 0.82rem;
  color: #00F0FF;
}

.pcc-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Badges de Estado de Compra */
.badge-pendiente {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-verificando {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-pagado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-entregado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(124, 58, 237, 0.18);
  color: #A78BFA;
  border: 1px solid rgba(124, 58, 237, 0.4);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-expirado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-rechazado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-resena-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Modal de Reseñas / Testimonios */
.modal-resena {
  max-width: 480px;
  background: #181820;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(124, 58, 237, 0.2);
  padding: 24px;
}

.modal-resena-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.modal-resena-header h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #FFD700;
  margin: 0;
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: #71717A;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.btn-close-modal:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.1);
}

.resena-item-info {
  font-size: 0.9rem;
  color: #A1A1AA;
  margin: 0 0 14px 0;
}

.resena-item-info strong {
  color: #F5F5F7;
}

.resena-item-info code {
  color: #00F0FF;
  font-family: 'JetBrains Mono', monospace;
}

.resena-lbl {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #A1A1AA;
  margin-bottom: 6px;
}

.stars-selector {
  display: inline-flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.star-btn {
  font-size: 26px;
  cursor: pointer;
  opacity: 0.3;
  transition: transform 0.15s ease, opacity 0.15s ease;
  user-select: none;
}

.star-btn.active {
  opacity: 1;
  transform: scale(1.1);
}

.star-btn:hover {
  transform: scale(1.25);
}

.resena-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #0d1527;
  border: 1px solid #292933;
  border-radius: 10px;
  color: #F5F5F7;
  padding: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.resena-textarea:focus {
  outline: none;
  border-color: #7C3AED;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.25);
}

/* ==========================================================================
   BANDEJA DE NOTIFICACIONES GAMER (INBOX)
   ========================================================================== */

.notif-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notif-btn {
  position: relative;
  background: #181820;
  border: 1px solid #292933;
  border-radius: 12px;
  color: #F5F5F7;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  user-select: none;
}

.notif-btn:hover {
  background: #1e1e28;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.35);
  color: #00F0FF;
}

.notif-btn.has-unread {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.notif-svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.notif-btn:hover .notif-svg {
  transform: rotate(15deg) scale(1.05);
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FF4B2B;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9999px;
  text-align: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(255, 75, 43, 0.7);
  animation: none !important; /* 0% GPU idle */
  box-sizing: border-box;
  pointer-events: none;
}

@keyframes pulseNotif {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 75, 43, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
  }
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #181820;
  border: 1px solid #292933;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(124, 58, 237, 0.25);
  z-index: 1050;
  backdrop-filter: none !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  white-space: normal !important;
  box-sizing: border-box;
}

.notif-dropdown,
.notif-dropdown * {
  box-sizing: border-box;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #292933;
  background: #121219;
  flex-shrink: 0;
}

.notif-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #F5F5F7;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-mark-all-read {
  background: transparent;
  border: 1px solid #292933;
  color: #A1A1AA;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-mark-all-read:hover {
  color: #00F0FF;
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
}

.notif-list {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.notif-list::-webkit-scrollbar {
  width: 5px;
}

.notif-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.notif-list::-webkit-scrollbar-thumb {
  background: #292933;
  border-radius: 4px;
}

.notif-list::-webkit-scrollbar-thumb:hover {
  background: #7C3AED;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(18, 18, 25, 0.65);
  border: 1px solid #292933;
  border-radius: 12px;
  text-decoration: none;
  color: #F5F5F7;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  white-space: normal !important;
  width: 100%;
}

.notif-item:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.notif-item.unread {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.5);
  border-left: 3px solid #7C3AED;
}

.notif-item-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: normal !important;
}

.notif-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #F5F5F7;
  margin-bottom: 4px;
  line-height: 1.35;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

.notif-item.unread .notif-item-title {
  color: #00F0FF;
}

.notif-item-msg {
  font-size: 12px;
  color: #A1A1AA;
  line-height: 1.45;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

.notif-item-time {
  font-size: 10px;
  color: #71717A;
  margin-top: 5px;
  display: block;
  white-space: normal !important;
}

.notif-empty {
  padding: 36px 16px;
  text-align: center;
  color: #71717A;
  font-size: 13px;
}

.notif-footer {
  padding: 10px 16px;
  border-top: 1px solid #292933;
  background: #121219;
  text-align: center;
  flex-shrink: 0;
}

.notif-perfil-link {
  color: #00F0FF;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.notif-perfil-link:hover {
  color: #8B5CF6;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .notif-dropdown {
    position: fixed;
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    max-height: calc(100vh - 80px);
  }
  .notif-list {
    max-height: calc(100vh - 170px);
  }
}

/* ============================================================
   BARRA DE CONFIANZA GAMER HERO (.hero-trust-bar)
   ============================================================ */
.hero-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px 0;
}

.hero-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 9px 16px;
  border-radius: 12px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  transition: all 0.25s ease;
}

.hero-trust-pill:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.15);
}

.trust-pill-icon {
  font-size: 18px;
  line-height: 1;
}

.trust-pill-text {
  display: flex;
  flex-direction: column;
}

.trust-pill-title {
  font-size: 12px;
  font-weight: 800;
  color: #FFF;
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  letter-spacing: 0.3px;
}

.trust-pill-sub {
  font-size: 10px;
  color: #8E9BAE;
}

/* ============================================================
   SECCIÓN DE PACKS GAMER VIP EN INICIO (.inicio-packs-section)
   ============================================================ */
.inicio-packs-section {
  padding: 30px 16px;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

.packs-section-header {
  text-align: center;
  margin-bottom: 24px;
}

.packs-section-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 900;
  color: #FFF;
  letter-spacing: 0.8px;
  margin: 4px 0 8px 0;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
}

.packs-section-sub {
  font-size: 13px;
  color: #8E9BAE;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.5;
}

.packs-bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.pack-bento-card {
  position: relative;
  background: linear-gradient(165deg, rgba(23, 27, 40, 0.95) 0%, rgba(13, 16, 26, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  cursor: pointer;
}

.pack-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 105, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 175, 105, 0.2);
}

.pack-bento-card.pack-featured {
  border-color: rgba(212, 175, 105, 0.4);
  background: linear-gradient(165deg, rgba(28, 30, 48, 0.95) 0%, rgba(15, 16, 28, 0.98) 100%);
}

.pack-img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-badge-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
  margin-bottom: 0;
}

.pack-pill-gold {
  font-size: 10px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.4);
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  backdrop-filter: none;
}

.pack-pill-hot {
  font-size: 10px;
  font-weight: 800;
  color: #FF3366;
  background: rgba(255, 51, 102, 0.15);
  border: 1px solid rgba(255, 51, 102, 0.4);
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  backdrop-filter: none;
}

.pack-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pack-bento-card:hover .pack-img-wrap img {
  transform: scale(1.05);
}

.pack-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pack-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 19px;
  font-weight: 800;
  color: #FFF;
  margin: 0 0 6px 0;
  line-height: 1.25;
  min-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.pack-desc {
  font-size: 12px;
  color: #8E9BAE;
  line-height: 1.45;
  margin: 0 0 12px 0;
  min-height: 52px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pack-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  min-height: 60px;
  align-content: flex-start;
}

.pack-feat-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #C0C8D6;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-pricing-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.pack-price-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
}

.pack-price-lbl {
  font-size: 11px;
  color: #8E9BAE;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.pack-price-val {
  font-size: 21px;
  font-weight: 900;
  color: #00F0FF;
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  line-height: 1.15;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.pack-actions-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.btn-abrir-pack,
.btn-view-pack {
  width: 100%;
  padding: 10px 6px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
  text-decoration: none;
  min-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-abrir-pack:hover,
.btn-view-pack:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00F0FF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
  color: #FFF;
}

.pack-actions-group .btn-buy-pack {
  width: 100%;
  padding: 10px 8px;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: #FFF;
  border: 1px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  line-height: 1.2;
  text-decoration: none;
  min-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-actions-group .btn-buy-pack:hover {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
  border-color: #8B5CF6;
  transform: translateY(-2px);
}

/* Adaptación en pantallas de escritorio / laptops medianas */
@media (max-width: 1200px) and (min-width: 769px) {
  .pack-actions-group .btn-abrir-pack,
  .pack-actions-group .btn-view-pack {
    font-size: 0.76rem;
    padding: 9px 4px;
  }
  .pack-actions-group .btn-buy-pack {
    font-size: 0.82rem;
    padding: 9px 6px;
  }
}

/* ============================================================
   ADAPTACIÓN RESPONSIVE 2X2 PARA MÓVILES (360px - 768px)
   ============================================================ */
@media (max-width: 768px) {
  .inicio-packs-section {
    padding: 20px 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }
  .packs-section-header {
    margin-bottom: 16px !important;
    padding: 0 4px !important;
  }
  .packs-section-title {
    font-size: 19px !important;
    letter-spacing: 0.5px !important;
  }
  .packs-section-sub {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
  .packs-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .pack-bento-card {
    padding: 10px 8px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .pack-img-wrap {
    height: 96px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    position: relative !important;
  }
  .pack-badge-top {
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    pointer-events: none !important;
  }
  .pack-pill-gold,
  .pack-pill-hot {
    font-size: 7.5px !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
  }
  .pack-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .pack-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    margin: 0 0 3px 0 !important;
    min-height: 32px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
    color: #FFF !important;
  }
  .pack-desc {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    color: #8E9BAE !important;
    margin: 0 0 6px 0 !important;
    min-height: 24px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .pack-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
    min-height: 32px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    align-content: flex-start !important;
  }
  .pack-feat-tag {
    font-size: 8px !important;
    font-weight: 600 !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    gap: 2px !important;
    line-height: 1.15 !important;
  }
  .pack-pricing-row {
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pack-price-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .pack-price-lbl {
    font-size: 8px !important;
    color: #8E9BAE !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
  }
  .pack-price-val {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #00F0FF !important;
    font-family: var(--fuente-titulo, 'Rajdhani', sans-serif) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .pack-actions-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pack-actions-group .btn-abrir-pack,
  .pack-actions-group .btn-view-pack {
    width: 100% !important;
    padding: 6px 3px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    color: #00F0FF !important;
    background: rgba(0, 240, 255, 0.08) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .pack-actions-group .btn-buy-pack {
    width: 100% !important;
    padding: 6px 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
    color: #FFF !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Pantallas compactas (360px - 380px) */
@media (max-width: 380px) {
  .inicio-packs-section {
    padding: 16px 4px !important;
  }
  .packs-bento-grid {
    gap: 6px !important;
  }
  .pack-bento-card {
    padding: 8px 5px !important;
    border-radius: 12px !important;
  }
  .pack-img-wrap {
    height: 88px !important;
    border-radius: 8px !important;
  }
  .pack-title {
    font-size: 12px !important;
    min-height: 28px !important;
  }
  .pack-desc {
    font-size: 9px !important;
    min-height: 22px !important;
  }
  .pack-price-val {
    font-size: 13.5px !important;
  }
  .pack-actions-group .btn-abrir-pack,
  .pack-actions-group .btn-view-pack {
    font-size: 9px !important;
    padding: 5px 2px !important;
    min-height: 26px !important;
  }
  .pack-actions-group .btn-buy-pack {
    font-size: 10px !important;
    padding: 5px 2px !important;
    min-height: 28px !important;
  }
}

/* ============================================================
   MODAL DE DETALLE Y LOADOUT DE PACK GAMER VIP (.modal-pack-detail)
   ============================================================ */
.modal-pack-detail {
  max-width: 860px !important;
  width: 95% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  background: linear-gradient(165deg, #131824 0%, #0B0E14 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 240, 255, 0.15) !important;
  border-radius: 20px !important;
  padding: 24px !important;
}

.modal-pack-header {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.modal-pack-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.pack-pill-save {
  font-size: 11px;
  font-weight: 800;
  color: #00FF88;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.modal-pack-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 900;
  color: #FFF;
  margin: 0;
  letter-spacing: 0.5px;
}

.modal-pack-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .modal-pack-grid {
    grid-template-columns: 1fr;
  }
}

.modal-pack-hero-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
}

.mph-img-wrap {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 12px;
}

.mph-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mph-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.mph-badge-vip {
  font-size: 10px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
}

.mph-badge-clean {
  font-size: 10px;
  font-weight: 800;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
}

.mph-desc {
  font-size: 12px;
  color: #8E9BAE;
  line-height: 1.45;
  margin: 0 0 14px 0;
}

.mph-trust-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.mph-trust-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.mph-trust-row:last-child {
  margin-bottom: 0;
}

.mph-trust-row .mtr-icon {
  font-size: 14px;
}

.mph-trust-row strong {
  font-size: 11px;
  color: #FFF;
  display: block;
}

.mph-trust-row small {
  font-size: 10px;
  color: #8E9BAE;
  display: block;
}

.modal-pack-items-header h4 {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: #FFF;
  margin: 0 0 2px 0;
}

.mpi-subtitle {
  font-size: 11.5px;
  color: #8E9BAE;
  margin: 0 0 12px 0;
}

.modal-pack-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.modal-loadout-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.modal-loadout-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mls-img-wrap {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.mls-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mls-info {
  flex: 1;
  min-width: 0;
}

.mls-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
}

.mls-name {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  color: #FFF;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mls-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}

.mls-clean-badge {
  color: #00F0FF;
  font-weight: 600;
}

.mls-price {
  color: #8E9BAE;
}

.modal-pack-footer-bar {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mpf-old-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #8E9BAE;
  margin-bottom: 4px;
}

.mpf-discount-badge {
  font-size: 10px;
  font-weight: 800;
  color: #000;
  background: #00FF88;
  padding: 2px 6px;
  border-radius: 4px;
}

.mpf-price-label {
  font-size: 11px;
  color: #C0C8D6;
  text-transform: uppercase;
  display: block;
}

.mpf-price-value {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 24px;
  font-weight: 900;
  color: #00F0FF;
  letter-spacing: 0.5px;
}

.mpf-saving-note {
  font-size: 11px;
  color: #FFD700;
  font-weight: 700;
  margin-left: 8px;
}

.mpf-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-modal-pack-add {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

.btn-modal-pack-buy {
  background: linear-gradient(135deg, #00FF88 0%, #00F0FF 100%) !important;
  color: #000 !important;
  font-weight: 800 !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4) !important;
  cursor: pointer !important;
}

/* ============================================================
   MODAL DE AVISO BÓVEDAS (MEJORAS CYBERPUNK EN VIVO)
   ============================================================ */
.vn-login-box {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  text-align: left;
}

.vn-login-desc {
  font-size: 12px;
  color: #C0C8D6;
  margin-bottom: 10px;
  line-height: 1.4;
}

.vn-login-input-row {
  display: flex;
  align-items: center;
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.vn-login-input-row:focus-within {
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.vn-login-at {
  color: #00F0FF;
  font-weight: 800;
  padding-left: 12px;
  font-size: 14px;
}

.vn-login-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #FFF;
  font-size: 13px;
  padding: 10px 8px;
  outline: none;
}

.btn-vn-login {
  background: linear-gradient(135deg, #00F0FF 0%, #0088FF 100%);
  color: #05070D;
  border: none;
  font-weight: 800;
  font-size: 12px;
  padding: 10px 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.btn-vn-login:hover {
  filter: brightness(1.15);
}

.vn-login-msg {
  font-size: 11px;
  margin-top: 8px;
}

.vn-cooldown-box {
  background: rgba(255, 184, 0, 0.05);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: 16px;
  padding: 18px 14px;
  margin: 16px 0;
  text-align: center;
}

.vn-cooldown-badge {
  font-size: 11px;
  font-weight: 800;
  color: #FFB800;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

.vn-countdown-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}

.vn-clock-segment {
  background: #0B0E14;
  border: 1px solid rgba(255, 184, 0, 0.4);
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  min-width: 52px;
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.15);
}

.vn-clock-num {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 22px;
  font-weight: 900;
  color: #FFF;
  line-height: 1;
}

.vn-clock-lbl {
  font-size: 8px;
  color: #8E9BAE;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.vn-clock-colon {
  font-size: 20px;
  font-weight: 800;
  color: #FFB800;
  line-height: 1;
}

.vn-cooldown-subtext {
  font-size: 11.5px;
  color: #8E9BAE;
  margin-top: 10px;
  line-height: 1.4;
}

.vn-action-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.btn-vn-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-vn-action span {
  font-size: 12px;
  font-weight: 700;
}

.btn-vn-action small {
  font-size: 9.5px;
  opacity: 0.8;
  margin-top: 2px;
}

.btn-vn-tienda {
  background: rgba(212, 175, 105, 0.12);
  border: 1px solid rgba(212, 175, 105, 0.35);
  color: #FFD700;
}

.btn-vn-tienda:hover {
  background: rgba(212, 175, 105, 0.2);
  transform: translateY(-2px);
}

.btn-vn-canjear {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #C084FC;
}

.btn-vn-canjear:hover {
  background: rgba(139, 92, 246, 0.2);
  transform: translateY(-2px);
}

/* ============================================================
   CHIPS DE FILTRO RÁPIDO EN VALORES (.vquick-chips-row)
   ============================================================ */
.vquick-chips-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 16px 0;
  flex-wrap: wrap;
}

.vquick-chips-label {
  font-size: 12px;
  font-weight: 800;
  color: #FFD700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vquick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vchip-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #B0B8C8;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vchip-btn:hover,
.vchip-btn.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: #00F0FF;
  color: #FFF;
}

/* ============================================================
   AJUSTES MÓVILES (DOCK 5 COLUMNAS & ZERO OVERFLOW)
   ============================================================ */
@media (max-width: 680px) {
  .gaming-sidebar .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 4px 6px !important;
  }
  .vn-action-buttons-grid {
    grid-template-columns: 1fr;
  }
  .packs-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}












/* Boton Cerrar Modal Carrito Flotante */
.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #A1A1AA;
  font-size: 1.1rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s ease;
}
.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #FFF;
  border-color: rgba(255, 222, 0, 0.4);
}

/* Rediseño Hero Catalogo Pills */
.cat-hero-pills-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 12px 0 16px !important;
}
.cat-hero-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(22, 27, 40, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  cursor: default !important;
  user-select: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}
.cat-hero-pill strong {
  color: #FFDE00 !important;
}
.cat-hero-pill-interactive {
  cursor: pointer !important;
  border-color: rgba(255, 215, 0, 0.3) !important;
  background: rgba(255, 215, 0, 0.08) !important;
  color: #FFDE00 !important;
}
.cat-hero-pill-interactive:hover {
  background: rgba(255, 215, 0, 0.16) !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   BLINDAJE TOTAL DE CABECERA (Zero-Overflow al 90%, 100%, 125% o zoom)
   ========================================================================== */
.gaming-header {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(11, 14, 20, 0.85) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

.header-brand {
  flex-shrink: 0 !important;
}

@media (min-width: 901px) {
  .gaming-header .header-search {
    position: relative !important;
    flex: 0 1 190px !important;
    min-width: 110px !important;
    max-width: 220px !important;
  }
  .gaming-header .header-search .btn-search-clear,
  .gaming-header .header-search #btnSearchClear {
    top: 50% !important;
    right: 9px !important;
    transform: translateY(-50%) !important;
  }
  .gaming-header .header-search:not(.has-value) .btn-search-clear,
  .gaming-header .header-search:not(.has-value) #btnSearchClear {
    display: none !important;
  }
}

.gaming-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

.gaming-nav a,
.nav-more-btn {
  font-size: 12px !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
}

/* En pantallas <= 1550px o zoom al 90% en laptops, ocultar Calculadora y Valores de la barra principal y mostrarlas en el menu MAS */
@media (max-width: 1550px) {
  .nav-item-secondary {
    display: none !important;
  }
  .nav-more-item-compact {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #E2E8F0;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease;
  }
  .nav-more-item-compact:hover {
    background: rgba(255, 222, 0, 0.12);
    color: #FFDE00;
  }
}

/* El bloque de acciones (donde esta el Login / Perfil) NUNCA se encoge ni se corta */
.gaming-header .header-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: auto !important;
}

.gaming-header .user-area {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.gaming-header .login-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 0 16px !important;
  height: 36px !important;
  border-radius: 18px !important;
}

.gaming-header .user-pill-dropdown {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.gaming-header .user-pill-name {
  max-width: 100px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   REDISENO OFICIAL: CARRITO GAMER ELITE, STEPPER Y TARJETAS GLASSMORPHIC
   ========================================================================== */
.cart-stepper-wrap {
  margin: -6px 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cs-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-step.active {
  color: #FFDE00;
  font-weight: 800;
}

.cs-step.completed {
  color: #00FF88;
}

.cs-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.cs-step.active .cs-num {
  background: #FFDE00;
  color: #0E1017;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.4);
}

.cs-step.completed .cs-num {
  background: #00FF88;
  color: #0E1017;
  font-weight: 900;
}

.cs-arrow {
  color: #475569;
  font-size: 10px;
}

/* Tarjeta de advertencia de autenticacion */
.cart-auth-gate-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0 16px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.12) 0%, rgba(124, 58, 237, 0.12) 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 12px;
}

.cag-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.cag-text strong {
  display: block;
  font-size: 13.5px;
  color: #FFDE00;
  font-weight: 800;
}

.cag-text p {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #CBD5E1;
  line-height: 1.35;
}

/* Banner de orden activa pendiente dentro del carrito */
.cart-active-order-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(124, 58, 237, 0.12) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.08);
  flex-wrap: wrap;
}

.cart-active-order-banner .caob-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}

.cart-active-order-banner .caob-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.cart-active-order-banner .caob-text strong {
  display: block;
  font-size: 0.88rem;
  color: #FFF;
  font-weight: 700;
}

.cart-active-order-banner .caob-text p {
  margin: 2px 0 0 0;
  font-size: 0.78rem;
  color: #CBD5E1;
}

@media (max-width: 480px) {
  .cart-active-order-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cart-active-order-banner button {
    width: 100%;
  }
}

/* Tarjeta individual de producto en carrito */
.carrito-item {
  display: grid !important;
  grid-template-columns: 52px 1fr auto auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background: rgba(18, 22, 34, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  transition: all 0.2s ease !important;
}

.carrito-item:hover {
  border-color: rgba(0, 240, 255, 0.3) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}

.carrito-item img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
}

.ci-nombre {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
}

.ci-precio {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #00FF88 !important;
  margin-top: 3px !important;
}

.ci-cant {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 2px 6px !important;
}

.ci-cant button {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  color: #FFF !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  transition: all 0.15s ease !important;
}

.ci-cant button:hover {
  background: #FFDE00 !important;
  color: #000 !important;
}

.ci-cant span {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #FFF !important;
  min-width: 14px !important;
  text-align: center !important;
}

.ci-quitar {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #EF4444 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.ci-quitar:hover {
  background: #EF4444 !important;
  color: #FFF !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5) !important;
}

.btn-auth-cart {
  background: linear-gradient(135deg, #FFDE00 0%, #F59E0B 100%) !important;
  color: #0E1017 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 18px rgba(255, 222, 0, 0.4) !important;
}

/* ==========================================================================
   WIDGET ACTIVO DE RACHA (STREAK REWARD BANNER & CALENDARIO MODAL)
   ========================================================================== */

.streak-reward-banner {
  background: #0B0E14;
  background: linear-gradient(135deg, #0B0E14 0%, #111526 50%, #0B0E14 100%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(167, 139, 250, 0.15), 0 0 20px rgba(255, 222, 0, 0.1);
  border-radius: 20px;
  padding: 22px 24px;
  margin: 0 auto 32px;
  max-width: 1360px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.streak-reward-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FFDE00 0%, #A78BFA 50%, #00F0FF 100%);
  pointer-events: none;
}

/* Columna Izquierda */
.srb-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  flex: 1.25;
  min-width: 0;
}

.srb-streak-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.srb-meta-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.srb-flame-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.15);
  color: #FFA500;
  border: 1px solid rgba(255, 107, 0, 0.4);
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.25);
  text-transform: uppercase;
}

.srb-shields-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.12);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
  text-transform: uppercase;
}

.srb-today-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.srb-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #00FF88;
  text-transform: uppercase;
}

.srb-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
}

.srb-status-indicator.is-done .srb-status-dot {
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF;
}

.srb-status-indicator.is-done {
  color: #00F0FF;
}

.srb-status-indicator.is-danger .srb-status-dot {
  background: #FF2A4B;
  box-shadow: 0 0 8px #FF2A4B;
}

.srb-status-indicator.is-danger {
  color: #FF2A4B;
}

.srb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.12);
  color: #C4B5FD;
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.2);
  text-transform: uppercase;
}

.srb-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.srb-flame {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255, 120, 0, 0.6));
  flex-shrink: 0;
}

.srb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 2px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 16px rgba(255, 222, 0, 0.25);
}

.srb-sub {
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.4;
}

/* Caja Bento Recompensa de Hoy */
.srb-today-box {
  background: rgba(15, 20, 32, 0.85);
  border: 1px solid rgba(255, 222, 0, 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 0 20px rgba(255, 222, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.srb-today-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFDE00;
  text-transform: uppercase;
}

.srb-today-prize {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.srb-prize-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255, 222, 0, 0.55));
  flex-shrink: 0;
}

.srb-prize-meta {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}

.srb-prize-meta strong {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}

.srb-prize-meta small {
  font-size: 12.5px;
  color: #94A3B8;
  margin-top: 2px;
}

/* Botón Reclamar Hoy (Amarillo Neón Interactivo) */
.btn-claim-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: linear-gradient(135deg, #FFDE00 0%, #FFB800 100%);
  color: #0B0E14;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 222, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  white-space: nowrap;
}

.btn-claim-today:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(255, 222, 0, 0.75);
  filter: brightness(1.08);
}

.btn-claim-today:active:not(:disabled) {
  transform: translateY(0);
}

.btn-claim-today:disabled,
.btn-claim-today.reclamado,
.btn-claim-today.bloqueado {
  background: rgba(30, 41, 59, 0.65);
  color: #64748B;
  box-shadow: none;
  cursor: not-allowed;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: none !important;
}

.btn-claim-today.reclamado {
  background: rgba(0, 240, 255, 0.08) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 8px 16px !important;
  cursor: default !important;
  transform: none !important;
  white-space: normal !important;
  text-align: center !important;
}

.srb-btn-countdown {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #38BDF8;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.btn-claim-today.bloqueado {
  background: rgba(30, 41, 59, 0.5);
  color: #64748B;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Columna Derecha */
.srb-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  flex: 0.95;
  min-width: 280px;
}

.srb-previews {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.srb-preview-item {
  background: rgba(15, 20, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.srb-prev-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #A78BFA;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.srb-prev-val {
  font-size: 13px;
  font-weight: 600;
  color: #E2E8F0;
  text-align: right;
  word-break: break-word;
}

/* Botón Ver Calendario Completo (Gamer Elegante con Borde Neón Cian) */
.btn-open-calendar-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  background: rgba(0, 240, 255, 0.07);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.18);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.btn-open-calendar-modal:hover {
  background: rgba(0, 240, 255, 0.16);
  border-color: #00F0FF;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.38);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.btn-open-calendar-modal:active {
  transform: translateY(0);
}

/* MODAL CALENDARIO COMPLETO (30 DÍAS) */
.calendar-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.88);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.calendar-modal-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.calendar-modal-dialog {
  background: #0B0E14;
  background: linear-gradient(180deg, #0F1322 0%, #0B0E14 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(167, 139, 250, 0.2);
  width: 100%;
  max-width: 980px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.calendar-modal-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #A78BFA 0%, #FFDE00 50%, #00F0FF 100%);
  pointer-events: none;
}

.calendar-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-modal-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(19px, 2.5vw, 24px);
  font-weight: 800;
  color: #FFFFFF;
  margin: 6px 0 4px;
  letter-spacing: 0.5px;
}

.calendar-modal-sub {
  font-size: 13px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.4;
}

.btn-close-calendar {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-close-calendar:hover {
  background: rgba(255, 0, 85, 0.2);
  border-color: #FF0055;
  color: #FF0055;
}

.calendar-modal-body {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  max-height: calc(85vh - 110px);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #A78BFA rgba(11, 14, 20, 0.8);
}

.calendar-modal-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.calendar-modal-body::-webkit-scrollbar-track {
  background: rgba(11, 14, 20, 0.8);
  border-radius: 4px;
}

.calendar-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #A78BFA 0%, #00F0FF 100%);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.calendar-modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #C4B5FD 0%, #38BDF8 100%);
}

/* ==========================================================================
   PASE DE RACHA DE 30 DÍAS (GAMER BENTO & NEON BADGES)
   ========================================================================== */

.pase-racha-section {
  background: #0B0E14;
  background: linear-gradient(180deg, #0B0E14 0%, #0F131F 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px 20px 20px;
  margin: 0 auto 32px;
  max-width: 1360px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.03);
  position: relative;
  overflow: hidden;
}

.pase-racha-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 0, 0.4), rgba(0, 240, 255, 0.4), transparent);
  pointer-events: none;
}

/* Header del Pase */
.pase-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pase-title-wrap {
  flex: 1;
  min-width: 280px;
}

.pase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.12);
  color: #A78BFA;
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.25);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pase-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 20px rgba(255, 222, 0, 0.35);
}

.pase-sub {
  font-size: 14px;
  color: #A6B4C9;
  line-height: 1.5;
  margin: 0;
  max-width: 640px;
}

.pase-progress-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}

.pase-streak-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
  padding: 6px 14px;
  border-radius: 10px;
  text-align: center;
}

.pase-streak-badge strong {
  color: #FFDE00;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 222, 0, 0.4);
}

.pase-progress-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.pase-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFDE00 0%, #00F0FF 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll Wrapper y Grid */
.pase-days-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 6px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 222, 0, 0.4) #0B0E14;
}

.pase-days-scroll-wrap::-webkit-scrollbar {
  height: 8px;
}

.pase-days-scroll-wrap::-webkit-scrollbar-track {
  background: #0B0E14;
  border-radius: 4px;
}

.pase-days-scroll-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #FFDE00, #00F0FF);
  border-radius: 4px;
}

.pase-days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  width: 100%;
}

/* Tarjeta Bento Día */
.pase-day-card {
  background: rgba(14, 18, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  min-height: 185px;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.pase-day-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #7A8799;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pase-day-icon {
  font-size: 32px;
  margin: 6px 0;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

.pase-day-card:hover .pase-day-icon {
  transform: scale(1.12);
}

.pase-day-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #E2E8F0;
  line-height: 1.25;
  margin-bottom: 12px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estado: DISPONIBLE (Oro Neón) */
.pase-day-card.disponible {
  background: linear-gradient(180deg, rgba(255, 222, 0, 0.08) 0%, rgba(14, 18, 28, 0.95) 100%);
  border-color: rgba(255, 222, 0, 0.45);
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.15), inset 0 0 10px rgba(255, 222, 0, 0.05);
}

.pase-day-card.disponible .pase-day-badge {
  color: #FFDE00;
  text-shadow: 0 0 8px rgba(255, 222, 0, 0.4);
}

.pase-day-card.disponible:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(255, 222, 0, 0.25);
  border-color: #FFDE00;
}

/* Estado: RECLAMADO */
.pase-day-card.reclamado {
  background: rgba(14, 18, 28, 0.55);
  border-color: rgba(16, 185, 129, 0.25);
  opacity: 0.85;
}

.pase-day-card.reclamado .pase-day-badge {
  color: #10B981;
}

.pase-day-card.reclamado .pase-day-name {
  color: #94A3B8;
}

/* Estado: HITO / LLAVE (Púrpura Neón & Glow) */
.pase-day-card.hito {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.12) 0%, rgba(14, 18, 28, 0.95) 100%);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.2), inset 0 0 12px rgba(167, 139, 250, 0.06);
}

.pase-day-card.hito .pase-day-badge {
  color: #A78BFA;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

.pase-day-card.hito.disponible {
  border-color: #FFDE00;
  box-shadow: 0 0 25px rgba(255, 222, 0, 0.3), 0 0 12px rgba(167, 139, 250, 0.25);
}

/* Badge Cápsula Llave de Hito */
.pase-card-hito-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1.2 !important;
  margin: 2px 0 6px 0 !important;
  background: rgba(167, 139, 250, 0.15) !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  color: #C4B5FD !important;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.25) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.pase-card-hito-tag.tag-plata {
  background: rgba(0, 240, 255, 0.12) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  color: #00F0FF !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25) !important;
}

.pase-card-hito-tag.tag-oro {
  background: rgba(255, 222, 0, 0.12) !important;
  border-color: rgba(255, 222, 0, 0.45) !important;
  color: #FFDE00 !important;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.25) !important;
}

.pase-card-hito-tag.tag-diamante {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #38BDF8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.3) !important;
}

.pase-card-hito-tag.tag-suprema {
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.2) 0%, rgba(167, 139, 250, 0.25) 100%) !important;
  border-color: #FFDE00 !important;
  color: #FFDE00 !important;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.35), 0 0 10px rgba(167, 139, 250, 0.3) !important;
}

.pase-card-hito-tag.tag-escudo {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: rgba(0, 240, 255, 0.55) !important;
  color: #00F0FF !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3) !important;
}

.pase-day-card.hito.hito-escudo {
  border-color: rgba(0, 240, 255, 0.5) !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.2) !important;
}

.pase-day-card.hito.hito-plata {
  border-color: rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.18) !important;
}

.pase-day-card.hito.hito-oro {
  border-color: rgba(255, 222, 0, 0.45) !important;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.2) !important;
}

.pase-day-card.hito.hito-diamante {
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.25) !important;
}

.pase-day-card.hito.hito-suprema {
  border-color: #FFDE00 !important;
  box-shadow: 0 0 25px rgba(255, 222, 0, 0.35), 0 0 15px rgba(167, 139, 250, 0.3) !important;
}

/* Botón Reclamar */
.btn-reclamar-pase {
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-reclamar-pase.disponible {
  background: linear-gradient(135deg, #FFDE00 0%, #FFA800 100%);
  color: #0B0E14;
  box-shadow: 0 0 14px rgba(255, 222, 0, 0.45);
  cursor: pointer;
  animation: none !important; /* 0% GPU idle */
}

.btn-reclamar-pase.disponible:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(255, 222, 0, 0.7);
}

.btn-reclamar-pase.disponible:active {
  transform: translateY(0);
}

.btn-reclamar-pase.reclamado {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.25);
  cursor: default;
  opacity: 0.9;
}

.btn-reclamar-pase.bloqueado {
  background: rgba(255, 255, 255, 0.04);
  color: #64748B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: not-allowed;
}

@keyframes pulse-disponible {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 222, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 222, 0, 0.65);
  }
}

/* Responsivo y scroll horizontal suave en móviles */
@media (max-width: 900px) {
  .pase-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .pase-progress-summary {
    width: 100%;
    min-width: unset;
  }
  .pase-days-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: max-content;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }
  .pase-day-card {
    width: 140px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}


/* ===== POPULARES CHIPS BAR ===== */
.populares-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.pop-chip-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.pop-chip-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.pop-chip-btn.active {
  background: rgba(255, 215, 0, 0.15);
  border-color: #FFD700;
  color: #FFD700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
}

/* ===== BOTTOM DOCK MOBILE SAFE AREA PADDING ===== */
@media (max-width: 960px) {
  body.site-body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 12px)) !important;
  }
}

/* ==========================================================================
   MOBILE-FIRST POLISH: HEADER, CARDS COMPACT & TOAST AT TOP (task-mobile-fix)
   ========================================================================== */

/* 1. Header móvil desahogado: cero recortes a la derecha */
@media (max-width: 700px) {
  .gaming-header {
    padding: 0 10px !important;
    gap: 6px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 14, 20, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  }
  .header-brand {
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  .header-brand .brand-title {
    font-size: 0.85rem !important;
  }
  .header-brand .brand-sub {
    display: none !important;
  }
  .header-actions {
    gap: 5px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  /* En móvil, mostrar solo la bandera en el selector de divisa */
  #currCode, .curr-arrow {
    display: none !important;
  }
  .btn-currency-selector {
    padding: 6px 8px !important;
    min-width: auto !important;
    font-size: 0.95rem !important;
  }
  /* En móvil, ocultar el texto @usuario para que el avatar jamás se recorte */
  .user-pill-name {
    display: none !important;
  }
  .user-pill-dropdown {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .user-pill-btn {
    padding: 0 !important;
  }
  .user-pill-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1.5px solid #FFD700 !important;
  }
  .btn-logout-mini {
    display: none !important;
  }
  /* En móvil, ocultar el botón de carrito superior ya que está en el dock inferior */
  .gaming-header .cart-btn {
    display: none !important;
  }
}

/* 2. Tarjetas de productos compactas en móvil (< 700px) */
@media (max-width: 700px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .producto-card {
    padding: 10px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }
  .producto-img {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    margin-bottom: 6px !important;
  }
  .producto-img img {
    max-height: 90px !important;
    object-fit: contain !important;
  }
  .custodia-glow-ribbon {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .producto-body {
    padding: 0 !important;
    gap: 4px !important;
  }
  .producto-badges {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 2px !important;
  }
  .tier-sello, .stock-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .producto-nombre {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .stock-clean-duped-bar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin: 2px 0 !important;
  }
  .badge-stock-clean, .pv-tag {
    font-size: 9.5px !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
  }
  .detalle-precios {
    margin: 4px 0 !important;
  }
  .precio-normal, .precio-oferta {
    font-size: 0.9rem !important;
  }
  .producto-card .btn-comprar {
    padding: 6px 8px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    margin-top: auto !important;
  }
}

/* 3. Toast flotante en móvil: desactivar en pantallas móviles para no tapar el hero ni crear cajas vacías */
@media (max-width: 768px) {
  #socialProofContainer,
  .social-toast-container {
    display: none !important;
  }
}

/* ==========================================================================
   THEMOROTEX MOBILE MASTER FIX: ZERO OVERFLOW, COMPACT CARDS & SLIM TOAST
   ========================================================================== */

/* 1. Global Viewport Lock */
html, body.site-body {
  max-width: 100vw !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

*, *:before, *:after {
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* Header Zero Overflow: 100% visible, no cut-off on right */
  .gaming-header {
    height: 54px !important;
    padding: 0 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 14, 20, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    gap: 4px !important;
  }

  .gaming-header .header-brand {
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    gap: 6px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .gaming-header .logo-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
  }

  .gaming-header .brand-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .gaming-header .brand-badge-shop,
  .gaming-header .brand-sub,
  .gaming-header .header-search:not(.abierto),
  .gaming-header .gaming-nav,
  .gaming-header .cart-btn,
  .gaming-header .btn-logout-mini,
  .gaming-header .user-pill-name,
  .curr-arrow, #currCode {
    display: none !important;
  }

  .gaming-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .btn-currency-selector {
    padding: 4px 6px !important;
    min-width: auto !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
  }

  .user-pill-dropdown {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
  }

  .user-pill-btn {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .user-pill-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    border: 1.5px solid #FFD700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
  }


  /* 3. Tarjetas de Autos en Móvil: Compactas, sin desbordamiento */
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .producto-card {
    border-radius: 12px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .producto-img {
    height: 105px !important;
    min-height: 105px !important;
    max-height: 105px !important;
    aspect-ratio: auto !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .producto-img img {
    max-height: 95px !important;
    object-fit: contain !important;
  }

  .custodia-glow-ribbon {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    top: 6px !important;
    left: 6px !important;
  }

  .producto-body {
    padding: 0 !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .producto-badges {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    min-height: auto !important;
    margin-bottom: 2px !important;
  }

  .tier-sello, .stock-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .producto-nombre {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    margin: 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stock-clean-duped-bar {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin: 2px 0 !important;
  }

  .badge-stock-clean, .pv-tag {
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }

  .detalle-precios {
    margin: 4px 0 !important;
  }

  .precio-normal, .precio-oferta {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }

  .precio-tachado {
    font-size: 0.78rem !important;
  }

  .producto-card .btn-comprar {
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    margin-top: auto !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5. Ticker de Drops Superior */
  .live-drops-ticker {
    height: 34px !important;
    padding: 0 8px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .ticker-label {
    display: none !important;
  }

  .ti-tag, .ti-time {
    display: none !important;
  }

  .ticker-track-wrap {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ticker-track {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ticker-item {
    font-size: 11px !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    height: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .ti-icon {
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }

  .ti-user {
    max-width: 95px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #FFFFFF !important;
  }

  .ti-text {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #A6B4C9 !important;
  }

  .ticker-cta-btn {
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ticker-cta-text-full {
    display: none !important;
  }

  .ticker-cta-text-compact {
    display: inline !important;
    line-height: 1 !important;
  }

  /* 6. Textos de Secciones sin corte brusco */
  .home-section-head p {
  font-family: var(--fuente) !important;
    font-size: 0.86rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    padding: 0 4px !important;
  }
}

/* Mobile Hero Trust Bar and Search Button Perfect Fit */
@media (max-width: 600px) {
  .hero-trust-bar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 12px 0 16px 0 !important;
    padding: 0 !important;
  }
  .hero-trust-pill {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
  }
  .trust-pill-text {
    text-align: left !important;
    overflow: hidden !important;
  }
  .trust-pill-sub {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

}

/* ==========================================================================
   BÓVEDAS MTX REDISEÑO: CÁPSULAS DE LOOT, BOTONES TIER Y FAQ
   ========================================================================== */
.vault-loot-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 12px 0 16px;
  box-sizing: border-box;
}
.vlp-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #D1D5DB;
  text-align: left;
  line-height: 1.35;
  width: 100%;
  box-sizing: border-box;
}
.btn-vault-bronze {
  background: linear-gradient(135deg, #CD7F32, #E69A4D) !important;
  color: #0E1017 !important;
  box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4) !important;
}
.btn-vault-silver {
  background: linear-gradient(135deg, #E2E8F0, #CBD5E1) !important;
  color: #0E1017 !important;
  box-shadow: 0 4px 15px rgba(226, 232, 240, 0.4) !important;
}
.btn-vault-gold {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  color: #0E1017 !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5) !important;
}
.btn-vault-diamond {
  background: linear-gradient(135deg, #00F0FF, #0284C7) !important;
  color: #0E1017 !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.5) !important;
}
.btn-vault-supreme {
  background: linear-gradient(135deg, #FF0055, #A78BFA) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 25px rgba(255, 0, 85, 0.6) !important;
  animation: none !important; /* 0% GPU idle */
}
.btn-open-vault {
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease, box-shadow 0.2s ease !important;
}
.btn-open-vault:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.1) !important;
}
.btn-open-vault:active {
  transform: translateY(0) scale(0.98) !important;
}
@keyframes pulseSupreme {
  0%, 100% { box-shadow: 0 4px 25px rgba(255, 0, 85, 0.6); }
  50% { box-shadow: 0 6px 35px rgba(167, 139, 250, 0.85); }
}
.pase-milestones-track-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}
.pmt-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  color: #A6B4C9;
}
/* Actividad de la Comunidad (Drops Recientes) y FAQ Bóvedas */
.bovedas-recent-drops-section {
  max-width: 1280px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.brds-header, .faq-header {
  text-align: center;
  margin-bottom: 28px;
}
.brds-badge, .faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.brds-title, .faq-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 10px 0 6px;
  letter-spacing: 0.5px;
}
.brds-sub, .faq-sub {
  color: #8E9BAE;
  font-size: 13.5px;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}
.brds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) and (min-width: 769px) {
  .brds-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 768px) {
  .brds-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  .brds-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }
  .brds-card:nth-child(n+5) {
    display: none !important;
  }
}
.brds-card {
  background: linear-gradient(165deg, rgba(20, 25, 38, 0.95) 0%, rgba(12, 15, 24, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.brds-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}
.bento-drop-supreme { border-color: rgba(255, 0, 85, 0.35); }
.bento-drop-diamond { border-color: rgba(0, 240, 255, 0.35); }
.bento-drop-gold { border-color: rgba(255, 215, 0, 0.35); }
.bento-drop-silver { border-color: rgba(226, 232, 240, 0.35); }
.bento-drop-bronze { border-color: rgba(205, 127, 50, 0.4); }

@keyframes brdsGamerDropIn {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.2);
  }
  60% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  }
}

.brds-card-new {
  animation: brdsGamerDropIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.brds-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brds-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brds-user-avatar { font-size: 20px; }
.brds-user-meta { display: flex; flex-direction: column; }
.brds-username { font-size: 13.5px; font-weight: 800; color: #FFFFFF; }
.brds-tier-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.tier-tag-supreme { color: #FF0055; }
.tier-tag-diamond { color: #00F0FF; }
.tier-tag-gold { color: #FFD700; }
.tier-tag-silver { color: #E2E8F0; }
.tier-tag-bronze { color: #CD7F32; }
.brds-time { font-size: 11px; color: #64748B; font-weight: 600; }

.brds-reward {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 10px 12px;
}
.brds-reward-icon { font-size: 26px; }
.brds-reward-info { display: flex; flex-direction: column; }
.brds-reward-name { font-size: 14px; font-weight: 800; color: #FFFFFF; }
.brds-reward-desc { font-size: 11px; color: #8E9BAE; }
.brds-card-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.brds-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}
.status-verified { background: rgba(0, 255, 136, 0.12); color: #00FF88; border: 1px solid rgba(0, 255, 136, 0.25); }
.status-credited { background: rgba(0, 240, 255, 0.12); color: #00F0FF; border: 1px solid rgba(0, 240, 255, 0.25); }

/* FAQ Accordion Gamer AAA Polished */
.faq-section,
.bovedas-faq-section {
  max-width: 980px;
  margin: 44px auto 60px;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
}
.faq-section .faq-header,
.faq-section .home-section-head,
.bovedas-faq-section .faq-header {
  text-align: center;
  margin-bottom: 26px;
}
.faq-section .faq-badge,
.bovedas-faq-section .faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00F0FF;
  font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 9999px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.faq-section .faq-title,
.faq-section .home-section-head h2,
.bovedas-faq-section .faq-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 28px;
  font-weight: 900;
  color: #F8FAFC;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.faq-section .faq-sub,
.faq-section .home-section-head p,
.bovedas-faq-section .faq-sub {
  color: #94A3B8;
  font-size: 13.5px;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}
.faq-accordion,
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.faq-item,
.bovedas-faq-item {
  background: linear-gradient(165deg, rgba(20, 25, 40, 0.85) 0%, rgba(11, 14, 20, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease !important;
  backdrop-filter: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}
.faq-item[open],
.bovedas-faq-item[open] {
  border-color: rgba(255, 215, 0, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 215, 0, 0.08) !important;
  background: linear-gradient(165deg, rgba(24, 30, 48, 0.95) 0%, rgba(12, 16, 26, 0.98) 100%) !important;
}
.faq-item .faq-question,
.bovedas-faq-item .faq-question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  cursor: pointer !important;
  padding: 16px 20px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  user-select: none !important;
  gap: 14px !important;
  transition: background 0.2s ease !important;
  background: transparent !important;
}
.faq-item .faq-question::-webkit-details-marker,
.bovedas-faq-item .faq-question::-webkit-details-marker,
.faq-item .faq-question::marker,
.bovedas-faq-item .faq-question::marker { display: none !important; }
.faq-item .faq-question:hover,
.bovedas-faq-item .faq-question:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}
.faq-q-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.faq-q-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 8px !important;
  background: rgba(255, 215, 0, 0.08) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
  color: #FFD700 !important;
  font-family: var(--fuente-mono, 'JetBrains Mono', monospace) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
.faq-item[open] .faq-q-pill,
.bovedas-faq-item[open] .faq-q-pill {
  background: rgba(255, 215, 0, 0.16) !important;
  border-color: rgba(255, 215, 0, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25) !important;
}
.faq-item .faq-q-text,
.bovedas-faq-item .faq-q-text {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif) !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #F8FAFC !important;
  letter-spacing: 0.3px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  min-width: 0 !important;
  word-break: break-word !important;
  transition: color 0.2s ease !important;
}
.faq-item[open] .faq-q-text,
.bovedas-faq-item[open] .faq-q-text,
.faq-item .faq-question:hover .faq-q-text,
.bovedas-faq-item .faq-question:hover .faq-q-text {
  color: #FFD700 !important;
}
.faq-chevron-wrap {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, border-color 0.2s, color 0.2s !important;
  flex-shrink: 0 !important;
}
.faq-item[open] .faq-chevron-wrap,
.bovedas-faq-item[open] .faq-chevron-wrap {
  transform: rotate(180deg) !important;
  color: #FFD700 !important;
  background: rgba(255, 215, 0, 0.14) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
}
.faq-chevron-svg {
  display: block;
  width: 16px;
  height: 16px;
}
.faq-item .faq-answer,
.bovedas-faq-item .faq-answer {
  padding: 6px 20px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-top: 0 !important;
  font-size: 13.5px !important;
  color: #94A3B8 !important;
  line-height: 1.6 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.faq-item p,
.bovedas-faq-item p {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #94A3B8 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.faq-item .faq-ans-lead,
.bovedas-faq-item .faq-ans-lead {
  color: #CBD5E1 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}
.faq-item strong,
.bovedas-faq-item strong {
  color: #F8FAFC !important;
  font-weight: 700 !important;
}

/* Steps Bento (Card 1) */
.faq-mini-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 4px;
  width: 100%;
  box-sizing: border-box;
}
.faq-step-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.faq-step-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.03);
  transform: translateY(-2px);
}
.fsc-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 800;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 9999px;
  padding: 2px 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.fsc-icon {
  font-size: 20px;
  line-height: 1;
}
.fsc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fsc-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 14.5px;
  font-weight: 800;
  color: #F8FAFC;
}
.fsc-desc {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.45;
}

/* Escudos Bento (Card 2) */
.faq-shields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0 4px;
  width: 100%;
  box-sizing: border-box;
}
.faq-shield-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
}
.fsc-icon-wrap {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.fsc-icon-wrap.shield-icon {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
}
.fsc-icon-wrap.get-icon {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
}
.fsc-content {
  min-width: 0;
  flex: 1;
}
.fsc-card-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: #F8FAFC;
  margin-bottom: 4px;
}
.fsc-card-desc {
  font-size: 12.5px;
  color: #94A3B8;
  line-height: 1.45;
}

/* Hitos de Llaves Bento Grid (Card 3) */
.faq-milestones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0 10px;
  width: 100%;
  box-sizing: border-box;
}
.faq-milestone-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.faq-milestone-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.fmc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fmc-day-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 6px;
  padding: 2px 8px;
}
.fmc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.fmc-tier-tag {
  font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.5px;
}

/* Tiers de hitos */
.milestone-silver {
  border-color: rgba(148, 163, 184, 0.2);
}
.milestone-silver .fmc-day-badge {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.milestone-silver .fmc-dot {
  background: #CBD5E1;
}
.milestone-silver .fmc-icon-box {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.milestone-silver .fmc-key-title {
  color: #E2E8F0;
}

.milestone-gold {
  border-color: rgba(255, 215, 0, 0.25);
}
.milestone-gold .fmc-day-badge {
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.milestone-gold .fmc-dot {
  background: #FFD700;
  box-shadow: 0 0 6px #FFD700;
}
.milestone-gold .fmc-icon-box {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.28);
}
.milestone-gold .fmc-key-title {
  color: #FFD700;
}

.milestone-diamond {
  border-color: rgba(0, 240, 255, 0.25);
}
.milestone-diamond .fmc-day-badge {
  background: rgba(0, 240, 255, 0.12);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.3);
}
.milestone-diamond .fmc-dot {
  background: #00F0FF;
  box-shadow: 0 0 6px #00F0FF;
}
.milestone-diamond .fmc-icon-box {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.28);
}
.milestone-diamond .fmc-key-title {
  color: #00F0FF;
}

.milestone-supreme {
  background: linear-gradient(165deg, rgba(168, 85, 247, 0.08) 0%, rgba(255, 215, 0, 0.05) 100%), rgba(20, 25, 38, 0.6) !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
  box-shadow: inset 0 0 20px rgba(168, 85, 247, 0.08);
}
.milestone-supreme .fmc-day-badge {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.25), rgba(255, 215, 0, 0.25));
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}
.milestone-supreme .fmc-dot {
  background: #FFD700;
  box-shadow: 0 0 8px #FFD700;
}
.milestone-supreme .supreme-tag {
  color: #FFD700;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.milestone-supreme .fmc-icon-box.supreme-icon {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.4);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
.milestone-supreme .fmc-key-title {
  color: #FFD700;
  font-weight: 900;
}

.fmc-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.fmc-icon-box {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}
.fmc-details {
  min-width: 0;
  flex: 1;
}
.fmc-key-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.fmc-bonus-badge {
  font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 800;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
}
.fmc-bonus-badge.titan-badge {
  color: #FFD700;
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}
.fmc-key-desc {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.45;
}
.faq-extra-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(0, 240, 255, 0.04);
  border: 1px dashed rgba(0, 240, 255, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  box-sizing: border-box;
}
.feh-icon {
  font-size: 14px;
  line-height: 1.4;
  flex-shrink: 0;
}
.feh-text {
  font-size: 12.5px;
  color: #94A3B8;
  line-height: 1.5;
}
.feh-text strong {
  color: #00F0FF !important;
}

/* Delivery Bento (Card 4) */
.faq-delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0 4px;
  width: 100%;
  box-sizing: border-box;
}
.faq-deliv-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.fdc-step-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--fuente-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.5px;
}
.fdc-icon {
  font-size: 20px;
  line-height: 1;
}
.fdc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fdc-title {
  font-family: var(--fuente-titulo, 'Rajdhani', sans-serif);
  font-size: 14.5px;
  font-weight: 800;
  color: #F8FAFC;
}
.fdc-desc {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.45;
}

/* RESPONSIVE MOBILE FIXES (390px ZERO OVERFLOW) */
@media (max-width: 680px) {
  .bovedas-main {
    padding-bottom: 110px !important;
    overflow-x: clip !important;
  }
  .bovedas-hero {
    padding: 16px 12px !important;
    overflow: hidden !important;
  }
  .user-vault-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }
  .uvb-left {
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .uvb-info {
    width: calc(100% - 58px) !important;
    min-width: 0 !important;
  }
  .uvb-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .uvb-pill {
    font-size: 10.5px !important;
    padding: 3px 6px !important;
  }
  .uvb-right {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .uvb-input-group {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .uvb-input-group input {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
  /* Streak Reward Banner & Modal Calendario en Móviles (Cero Desbordamiento) */
  .streak-reward-banner {
    flex-direction: column !important;
    width: 100% !important;
    padding: 16px 14px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    margin: 0 auto 24px !important;
  }
  .srb-left,
  .srb-right {
    width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }
  .srb-today-prize {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .srb-prize-meta {
    width: 100% !important;
  }
  .btn-claim-today,
  .btn-open-calendar-modal {
    width: 100% !important;
  }
  .calendar-modal-backdrop {
    padding: 10px !important;
  }
  .calendar-modal-dialog {
    max-height: 92vh !important;
    border-radius: 16px !important;
    width: 100% !important;
  }
  .calendar-modal-head {
    padding: 16px 14px !important;
  }
  .calendar-modal-body {
    padding: 14px 12px !important;
    max-height: calc(92vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin !important;
    scrollbar-color: #A78BFA rgba(11, 14, 20, 0.8) !important;
  }
  .calendar-modal-body::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
  }
  .calendar-modal-body::-webkit-scrollbar-track {
    background: rgba(11, 14, 20, 0.8) !important;
    border-radius: 4px !important;
  }
  .calendar-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #A78BFA 0%, #00F0FF 100%) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5) !important;
  }
  .calendar-modal-body .pase-days-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }
  .calendar-modal-body .pase-day-card {
    flex: 0 0 135px !important;
    width: 135px !important;
    min-width: 135px !important;
    scroll-snap-align: start !important;
  }
  .pase-racha-section {
    padding: 16px 12px !important;
    margin: 0 auto 24px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .pase-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .pase-progress-summary {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pase-milestones-track-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .vaults-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 4px !important;
  }
  .vault-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .calendar-modal-body {
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin !important;
    scrollbar-color: #A78BFA rgba(11, 14, 20, 0.8) !important;
  }
  .calendar-modal-body::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
  }
  .calendar-modal-body::-webkit-scrollbar-track {
    background: rgba(11, 14, 20, 0.8) !important;
    border-radius: 4px !important;
  }
  .calendar-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #A78BFA 0%, #00F0FF 100%) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5) !important;
  }
  .calendar-modal-body .pase-days-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }
  .calendar-modal-body .pase-day-card {
    flex: 0 0 135px !important;
    width: 135px !important;
    min-width: 135px !important;
    scroll-snap-align: start !important;
  }
}

/* ==========================================================================
   PERFECCIONAMIENTO MÓVIL Y CONTRASTE PARA BÓVEDAS MTX (390px PERFECT FIT)
   ========================================================================== */
.btn-vault-bronze span,
.btn-vault-silver span,
.btn-vault-gold span,
.btn-vault-diamond span {
  color: #0E1017 !important;
  font-weight: 800 !important;
  display: inline-block !important;
}
.btn-vault-supreme span {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

@media (max-width: 680px) {
  .bovedas-hero-content {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .bovedas-title {
    font-size: 28px !important;
  }
  .bovedas-sub {
    font-size: 13.5px !important;
    padding: 0 4px !important;
  }
  .user-vault-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .uvb-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .uvb-info {
    width: 100% !important;
    text-align: center !important;
  }
  .uvb-name {
    font-size: 15px !important;
    word-break: break-word !important;
  }
  .uvb-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
  }
  .uvb-pill {
    font-size: 11px !important;
    padding: 5px 6px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .uvb-right {
    width: 100% !important;
    margin-top: 4px !important;
  }
  .uvb-input-group {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .uvb-input {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
  .btn-uvb-login {
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  .pase-milestones-track-bar {
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }
  .pmt-step {
    padding: 2px 6px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }
  .battle-pass-track-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .pase-days-scroll-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pase-days-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: max-content !important;
  }
  .pase-day-card {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   OMNI-MOBILE FLUID RESPONSIVE (320px to 480px, All Phone Sizes)
   ========================================================================== */

/* 1. Header & Menu Toggle Top-Left */
@media (min-width: 961px) {
  .gaming-header .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .gaming-header {
    overflow: visible !important; /* CRÍTICO: Permite que el menú desplegable flote sin ser rebanado */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    height: 52px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 14, 20, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    gap: 8px !important;
  }

  /* Botón hamburguesa a la izquierda del logo */
  .gaming-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    order: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gaming-header .menu-toggle:active {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
  }

  .gaming-header .header-brand {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  .gaming-header .header-actions {
    order: 2 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Menú desplegable flotante con z-index seguro */
  .site-nav:not(.abierto) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .site-nav.abierto {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 99999 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 215, 0, 0.2) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    background: rgba(14, 18, 28, 0.98) !important;
    backdrop-filter: none !important;
  }
}

/* 2. Tarjeta de Bóvedas Simétrica y Libre de Cortes (Gamer Dark AAA) */
@media (max-width: 768px) {
  .inicio-bovedas-banner-section {
    padding: 0 12px !important;
    margin: 20px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bovedas-callout-card {
    padding: 18px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 18px !important;
    border-radius: 18px !important;
  }

  .bcc-content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .bcc-badges-row {
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }

  .bcc-badge {
    margin-bottom: 0 !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  .bcc-title {
    font-size: clamp(20px, 5.8vw, 25px) !important;
    line-height: 1.25 !important;
    margin: 6px 0 8px 0 !important;
    text-align: center !important;
  }

  .bcc-desc {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin: 0 auto 16px !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .bcc-actions-row {
    width: 100% !important;
    max-width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 4px auto 0 !important;
  }

  .btn-bcc-gold,
  .btn-bcc-secondary,
  .btn-bcc,
  .btn-bcc-cal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 13px 18px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Track de 5 Tiers Proporcional y Libre de Cortes (5 Columnas Simétricas) */
  .bcc-tiers-track,
  .bcc-icons {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px auto 16px auto !important;
    padding: 0 !important;
  }

  .bcc-tier-capsule,
  .bcc-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 3px !important;
    border-radius: 10px !important;
    text-align: center !important;
  }

  .bcc-tier-icon {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .bcc-tier-name {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 380px) {
  .bovedas-callout-card {
    padding: 18px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .bcc-badges-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .bcc-badge {
    width: auto !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  .bcc-tier-capsule,
  .bcc-icon {
    padding: 6px 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 3px !important;
  }

  .bcc-tier-icon {
    font-size: 14px !important;
  }

  .bcc-tier-name {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Ticker Ultra-Compacto para Pantallas <= 380px */
  .live-drops-ticker {
    padding: 0 6px !important;
    gap: 4px !important;
    height: 32px !important;
  }

  .ticker-item {
    font-size: 10.5px !important;
    gap: 4px !important;
  }

  .ti-icon {
    font-size: 12px !important;
  }

  .ti-user {
    max-width: 80px !important;
  }

  .ticker-cta-btn {
    padding: 2.5px 6px !important;
    font-size: 10px !important;
  }
}

/* 3. Tabla de Ranking Perfecta: 3 Columnas Claras sin Cortes */
@media (max-width: 768px) {
  .inicio-ranking-section {
    padding: 0 10px !important;
  }

  .arena-tiers-incentive-bar {
    padding: 14px 12px !important;
    margin-bottom: 18px !important;
  }

  .atib-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .atib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .atib-card {
    padding: 12px 10px !important;
  }

  .ranking-controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .rcb-search-wrap {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .rcb-filters-rail {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 2px 2px 8px !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .rcb-filters-rail::-webkit-scrollbar {
    display: none !important;
  }
  .rank-filter-btn {
    flex-shrink: 0 !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .ranking-scroll-box {
    border-radius: 14px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grilla de 3 columnas: Puesto (40px) | Jugador (1fr) | Puntos (92px alineado a la derecha) */
  .rsb-header,
  .ranking-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 92px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ranking-row.ranking-row-hidden,
  .ranking-row[hidden],
  .ranking-row[style*="display: none"] {
    display: none !important;
  }

  /* Ocultar elementos redundantes que no caben en móvil */
  .rsb-col-streak,
  .rr-streak-col,
  .rsb-col-gap,
  .rr-gap-col,
  .rr-desk-badge {
    display: none !important;
  }

  /* Sublínea móvil debajo del nombre */
  .rr-mob-subline {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 2px !important;
  }

  .rr-mob-badge {
    display: inline-flex !important;
  }

  .rr-mob-badge .rr-rank-tag,
  .rr-mob-badge .rr-creator-tag,
  .rr-mob-badge .rr-streamer-tag {
    display: inline-flex !important;
    font-size: 8.5px !important;
    padding: 1px 5px !important;
    margin-left: 0 !important;
  }

  .rr-mob-streak {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #FF9E00 !important;
    display: inline-flex !important;
  }

  .rr-mob-gap {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #00F0FF !important;
    display: inline-flex !important;
  }

  .rsb-list-wrap {
    max-height: 420px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .rsb-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #0b0e17 !important;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.5px !important;
    padding: 8px 10px !important;
  }

  .rsb-col-pos {
    text-align: center !important;
  }

  .rsb-col-user {
    text-align: left !important;
    padding-left: 2px !important;
  }

  .rsb-col-pts {
    text-align: right !important;
  }

  .rr-pos {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #FFD700 !important;
    text-align: center !important;
  }

  .rr-user {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .rr-avatar-frame {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-width: 1.5px !important;
  }

  .rr-avatar {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  .rr-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #FFFFFF !important;
    min-width: 0 !important;
  }

  .rr-me-badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    flex-shrink: 0 !important;
  }

  .rr-points {
    font-size: 13.5px !important;
    font-weight: 900 !important;
    color: #00FF88 !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-family: 'Rajdhani', sans-serif !important;
    letter-spacing: 0.3px !important;
  }
}

/* Mobile Carousel Controls & Tabs: Ocultos por defecto en escritorio (Sólo visibles en celulares <= 680px) */
.vault-tier-tabs-bar,
.vault-carousel-header,
.vault-carousel-dots,
.vaults-swipe-hint {
  display: none !important;
}

@media (max-width: 680px) {
  /* 1. Global Lockdown for Bóvedas Container (Cero desbordamiento) */
  .bovedas-main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
    padding: 10px 10px 110px !important;
    margin: 0 auto !important;
  }
  .bovedas-hero,
  .bovedas-hero-content,
  .streak-reward-banner,
  .vaults-showcase-section,
  .bovedas-recent-drops-section,
  .bovedas-faq-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .bovedas-hero {
    padding: 14px 10px !important;
    margin-bottom: 14px !important;
    border-radius: 16px !important;
  }
  .bovedas-title {
    font-size: 24px !important;
    width: 100% !important;
    text-align: center !important;
    margin: 4px 0 8px !important;
    line-height: 1.15 !important;
  }
  .bovedas-sub {
    display: none !important;
  }
  .bovedas-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* 2. User Vault Status Card: Clean, Compact 2x2 Grid & Aligned Avatar */
  .user-vault-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .uvb-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .uvb-avatar-wrap {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
  }
  .uvb-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: left !important;
  }
  .uvb-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    margin-bottom: 3px !important;
  }
  .uvb-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .uvb-pill {
    font-size: 10px !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }
  .uvb-right {
    width: 100% !important;
    margin: 0 !important;
  }
  .btn-uvb-refresh,
  .btn-uvb-login {
    width: 100% !important;
    padding: 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* 3. Streak Reward Banner & Calendar on Mobile */
  .streak-reward-banner {
    padding: 14px 10px !important;
    margin: 0 0 16px !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .srb-left, .srb-right {
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  .srb-title {
    font-size: 17px !important;
  }
  .srb-today-prize {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .btn-claim-today {
    width: auto !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    flex-shrink: 0 !important;
  }
  .btn-claim-today.reclamado {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 8px 12px !important;
  }
  .srb-previews {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .srb-preview-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: rgba(14, 18, 30, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .srb-prev-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: rgba(167, 139, 250, 0.15) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    color: #C4B5FD !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }
  .srb-prev-val {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-align: right !important;
    line-height: 1.35 !important;
    flex: 1 !important;
    min-width: 0 !important;
    word-break: normal !important;
  }
  .btn-open-calendar-modal {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  /* 4. Touch Carousel para las 5 Bóvedas (Elevado con Estética Gamer AAA) */
  .vaults-showcase-section {
    padding: 0 !important;
    margin-bottom: 24px !important;
  }
  .vaults-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .vaults-grid {
    display: flex !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 14px !important;
    padding: 10px 16px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scroll-padding: 0 16px !important;
  }
  .vault-card {
    flex: 0 0 85% !important;
    min-width: 285px !important;
    max-width: 325px !important;
    padding: 22px 18px 20px !important;
    border-radius: 22px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    background: linear-gradient(165deg, rgba(16, 21, 35, 0.96) 0%, rgba(9, 12, 20, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75) !important;
  }
  .v-tier-1 { border-color: rgba(205, 127, 50, 0.5) !important; }
  .v-tier-2 { border-color: rgba(226, 232, 240, 0.5) !important; }
  .v-tier-3 { border-color: rgba(255, 215, 0, 0.6) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 215, 0, 0.2) !important; }
  .v-tier-4 { border-color: rgba(0, 240, 255, 0.6) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(0, 240, 255, 0.2) !important; }
  .v-tier-5 { border-color: rgba(255, 0, 85, 0.7) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 0, 85, 0.25) !important; }

  /* Selector de pestañas por Tier */
  .vault-tier-tabs-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    margin: 0 auto 10px !important;
    padding: 3px !important;
    background: rgba(16, 21, 35, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    width: calc(100% - 24px) !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
  }
  .vault-tier-tab {
    flex: 1 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 6px 1px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #94A3B8 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
  }
  .vault-tier-tab:hover {
    color: #FFFFFF !important;
  }
  .vault-tier-tab.active.tab-tier-1 {
    background: rgba(205, 127, 50, 0.3) !important;
    border-color: #CD7F32 !important;
    color: #FFAA5A !important;
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.4) !important;
  }
  .vault-tier-tab.active.tab-tier-2 {
    background: rgba(226, 232, 240, 0.25) !important;
    border-color: #CBD5E1 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(226, 232, 240, 0.35) !important;
  }
  .vault-tier-tab.active.tab-tier-3 {
    background: rgba(255, 222, 0, 0.3) !important;
    border-color: #FFDE00 !important;
    color: #FFE600 !important;
    box-shadow: 0 0 12px rgba(255, 222, 0, 0.45) !important;
  }
  .vault-tier-tab.active.tab-tier-4 {
    background: rgba(0, 240, 255, 0.3) !important;
    border-color: #00F0FF !important;
    color: #00F0FF !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.45) !important;
  }
  .vault-tier-tab.active.tab-tier-5 {
    background: rgba(255, 0, 85, 0.3) !important;
    border-color: #FF0055 !important;
    color: #FF3377 !important;
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.5) !important;
  }

  /* Header con flechas y badge indicador */
  .vault-carousel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 24px) !important;
    max-width: 320px !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .vault-nav-arrow {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #E2E8F0 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
  }
  .vault-nav-arrow:hover:not(:disabled) {
    background: rgba(255, 222, 0, 0.15) !important;
    border-color: #FFDE00 !important;
    color: #FFDE00 !important;
  }
  .vault-nav-arrow:disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
  }
  .vault-counter-badge {
    flex: 1 !important;
    text-align: center !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #CBD5E1 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .vault-counter-badge strong {
    color: #FFDE00 !important;
    font-size: 13px !important;
  }
  .vault-counter-badge span {
    color: #FFFFFF !important;
    font-weight: 800 !important;
  }

  .vault-tier-badge {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
  }
  .vault-img-box {
    width: 76px !important;
    height: 76px !important;
    border-radius: 20px !important;
    margin: 4px auto 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .vault-emoji-icon {
    font-size: 40px !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7)) !important;
  }
  .vault-name {
    font-size: 21px !important;
    font-weight: 900 !important;
    margin: 0 0 6px !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 12px rgba(255,255,255,0.2) !important;
  }
  .vault-unlock-rule {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    margin: 0 auto 14px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: inline-flex !important;
  }
  .vault-loot-pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 16px !important;
  }
  .vlp-tag {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #E2E8F0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    line-height: 1.35 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  .btn-open-vault {
    width: 100% !important;
    padding: 13px 18px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    cursor: pointer !important;
  }
  .btn-vault-gold {
    background: linear-gradient(135deg, #FFE066 0%, #FFB703 100%) !important;
    color: #0F172A !important;
    box-shadow: 0 6px 20px rgba(255, 183, 3, 0.4) !important;
  }
  .btn-vault-bronze {
    background: linear-gradient(135deg, #E69B56 0%, #CD7F32 100%) !important;
    color: #FFFFFF !important;
  }
  .btn-vault-silver {
    background: linear-gradient(135deg, #F1F5F9 0%, #CBD5E1 100%) !important;
    color: #0F172A !important;
  }
  .btn-vault-diamond {
    background: linear-gradient(135deg, #00F0FF 0%, #0099FF 100%) !important;
    color: #081225 !important;
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.4) !important;
  }
  .btn-vault-supreme {
    background: linear-gradient(135deg, #FF0055 0%, #FF3366 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 22px rgba(255, 0, 85, 0.5) !important;
  }

  /* Dots de paginación del carrusel */
  .vault-carousel-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 8px auto 20px !important;
  }
  .vdot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.25s ease !important;
  }
  .vdot.active {
    width: 24px !important;
    background: #FFDE00 !important;
    box-shadow: 0 0 10px rgba(255, 222, 0, 0.5) !important;
  }

  /* 5. Recent Drops & FAQ en Móvil (Cero desbordamiento) */
  .brds-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  .brds-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }
  .brds-card:nth-child(n+5) {
    display: none !important;
  }
  /* FAQ Mobile Polishing */
  .faq-section,
  .bovedas-faq-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    margin: 28px auto 36px !important;
  }
  .faq-section .home-section-head h2,
  .bovedas-faq-section .faq-title {
    font-size: 22px !important;
  }
  .faq-section .home-section-head p,
  .bovedas-faq-section .faq-sub {
    font-size: 12.5px !important;
  }
  .faq-item,
  .bovedas-faq-item {
    border-radius: 14px !important;
  }
  .faq-item .faq-question,
  .bovedas-faq-item .faq-question {
    padding: 13px 14px !important;
    min-height: 48px !important;
    gap: 10px !important;
  }
  .faq-q-left {
    gap: 8px !important;
  }
  .faq-q-pill {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 10.5px !important;
  }
  .faq-item .faq-q-text,
  .bovedas-faq-item .faq-q-text {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .faq-chevron-wrap {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
  .faq-item .faq-answer,
  .bovedas-faq-item .faq-answer {
    padding: 4px 14px 16px !important;
  }
  .faq-item .faq-ans-lead,
  .bovedas-faq-item .faq-ans-lead {
    font-size: 12.5px !important;
    margin-bottom: 10px !important;
  }
  .faq-mini-steps,
  .faq-shields-grid,
  .faq-milestones-grid,
  .faq-delivery-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .faq-step-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  .fsc-title {
    font-size: 13.5px !important;
  }
  .fsc-desc {
    font-size: 11.5px !important;
  }
  .faq-shield-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .fsc-card-title {
    font-size: 13.5px !important;
  }
  .fsc-card-desc {
    font-size: 11.5px !important;
  }
  .faq-milestone-card {
    padding: 10px 12px !important;
  }
  .fmc-key-title {
    font-size: 13.5px !important;
  }
  .fmc-key-desc {
    font-size: 11.5px !important;
  }
  .feh-text {
    font-size: 11.5px !important;
  }
  .faq-item p,
  .faq-item li,
  .bovedas-faq-item p,
  .bovedas-faq-item li {
    font-size: 12px !important;
    word-break: break-word !important;
  }
  .bovedas-bottom-spacer {
    height: 80px !important;
  }
}

/* Resaltado de alta visibilidad para botón de reseña en perfil */
.btn-abrir-resena {
  background: linear-gradient(135deg, #FFD700 0%, #FF9900 100%) !important;
  color: #0B0E14 !important;
  font-weight: 800 !important;
  border: 1px solid #FFE066 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}
.btn-abrir-resena:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.75) !important;
  filter: brightness(1.1) !important;
}
.btn-abrir-resena:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Edición Roja Neón Exclusiva para Sorteo Semanal */
.sorteo-featured-card.red-sorteo-edition {
  border: 1.5px solid rgba(255, 51, 102, 0.6) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 51, 102, 0.25) !important;
  background: linear-gradient(165deg, rgba(28, 16, 24, 0.96) 0%, rgba(15, 12, 18, 0.98) 100%) !important;
}
.badge-sorteo-rojo {
  background: linear-gradient(90deg, #FF3366, #FF0055) !important;
  color: #FFFFFF !important;
  border: 1px solid #FF3366 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(255, 51, 102, 0.6) !important;
}

/* Contenedor Canónico Panorámico Fluido para PC (Unificado para TODAS las páginas y objetos del sitio) */
@media (min-width: 769px) {
  .home-section,
  .hero-banner-wrap,
  .inicio-packs-section,
  .inicio-bovedas-banner-section,
  .inicio-ranking-section,
  .inicio-streamer-section,
  .inicio-ganador-stream-section,
  .inicio-creadores-teaser-section,
  .vouches-section,
  .valores-section,
  .catalogo-main-container,
  .cat-page-container,
  .item-wrap,
  .item-layout,
  .bovedas-main,
  .sorteos-page-wrap,
  .sorteos-container,
  .robux-page-main,
  .robux-view-wrapper,
  .creadores-page-main,
  .creadores-view-wrapper,
  .creator-cockpit-wrapper,
  .trade-page-wrap,
  .trade-arena,
  .valores-page-wrap,
  .vouches-page-wrap,
  .perfil-page-container,
  .perfil-login-wrap,
  .order-tracking-wrap,
  .legal-wrap {
    width: 100% !important;
    max-width: 1332px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1800px) {
  .home-section,
  .hero-banner-wrap,
  .inicio-packs-section,
  .inicio-bovedas-banner-section,
  .inicio-ranking-section,
  .inicio-streamer-section,
  .inicio-ganador-stream-section,
  .inicio-creadores-teaser-section,
  .vouches-section,
  .valores-section,
  .catalogo-main-container,
  .cat-page-container,
  .item-wrap,
  .item-layout,
  .bovedas-main,
  .sorteos-page-wrap,
  .sorteos-container,
  .robux-page-main,
  .robux-view-wrapper,
  .creadores-page-main,
  .creadores-view-wrapper,
  .creator-cockpit-wrapper,
  .trade-page-wrap,
  .trade-arena,
  .valores-page-wrap,
  .vouches-page-wrap,
  .perfil-page-container,
  .perfil-login-wrap,
  .order-tracking-wrap,
  .legal-wrap {
    max-width: 1392px !important;
    padding-left: 38px !important;
    padding-right: 38px !important;
  }
}


/* Micro-polish for mobile live ribbon & ticker fade */
@media (max-width: 600px) {
  .live-ribbon-title {
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  .live-pulse-text {
    font-size: 10px !important;
  }
  .hero-categories-ticker {
    padding-right: 28px !important;
    mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
  }
}

/* ==========================================================================
   POPULARES & DESTACADOS: 4 COLUMNAS EXACTAS EN PC (1 FILA) Y 2X2 EN MÓVIL
   ========================================================================== */
.populares-section .grid,
.destacados-section .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.populares-section .producto-card,
.destacados-section .producto-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.populares-section .producto-body,
.destacados-section .producto-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.populares-section .btn-comprar,
.destacados-section .btn-comprar {
  margin-top: auto !important;
  display: block !important;
  text-align: center !important;
}

@media (max-width: 1100px) {
  .populares-section .grid,
  .destacados-section .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 700px) {
  .populares-section .grid,
  .destacados-section .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Modal Backdrop Always On Top */
.modal-backdrop {
  z-index: 100000 !important;
}
.modal-backdrop:not(.abierto) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.modal-backdrop.abierto {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   BENTO GRID INFORMATIVO: LORE & FAQ DE ANCHO COMPLETO (FICHA DE PRODUCTO)
   ========================================================================== */
.item-details-full {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  max-width: 1380px !important;
  margin: 28px auto 0 !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.item-desc-bento,
.item-faq-bento {
  background: rgba(18, 24, 38, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.item-desc-bento .bento-header,
.item-faq-bento .bento-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.item-desc-bento .bento-icon,
.item-faq-bento .bento-icon {
  font-size: 1.4rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tipografía: Títulos de Lore y FAQ */
.item-desc-bento h2,
.item-faq-bento h2,
.item-desc-bento .bento-header h2,
.item-faq-bento .bento-header h2,
.item-details-full h2 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Tipografía: Texto del párrafo de lore */
.item-desc-bento p,
.item-desc-bento .item-desc p {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  color: #E2E8F0 !important;
  margin: 0 !important;
  white-space: pre-line !important;
}

/* Estructura FAQ list e items */
.faq-bento-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.faq-bento-item {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.faq-bento-item:hover {
  border-color: rgba(0, 240, 255, 0.2) !important;
  background: rgba(0, 240, 255, 0.02) !important;
}

/* Tipografía: Preguntas de FAQ */
.item-faq-bento .faq-bento-q,
.faq-bento-q,
.item-faq-bento strong,
.item-faq-seo strong {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #00F0FF !important;
  margin: 0 0 6px 0 !important;
  display: block !important;
  letter-spacing: 0.3px !important;
}

/* Tipografía: Respuestas de FAQ */
.item-faq-bento .faq-bento-a,
.faq-bento-a,
.item-faq-bento p,
.item-faq-seo p {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #CBD5E1 !important;
  margin: 0 !important;
}

/* Móvil: Apilamiento vertical con gap 16px */
@media (max-width: 900px) {
  .item-details-full {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 16px !important;
    margin-top: 20px !important;
    max-width: 100% !important;
  }

  .item-desc-bento,
  .item-faq-bento {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }

  .item-desc-bento h2,
  .item-faq-bento h2 {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 680px) {
  .item-details-full {
    padding: 0 12px !important;
    gap: 16px !important;
  }
}


/* ==========================================================================
   BANNER HYPE: ÚLTIMO GANADOR DE STREAM / SORTEO ACTIVO (BENTO GAMER ELEVADO)
   ========================================================================== */
.inicio-ganador-stream-section {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 14px 24px 8px 24px !important;
  box-sizing: border-box !important;
}

.ganador-stream-banner-card {
  position: relative !important;
  background: linear-gradient(135deg, rgba(20, 26, 42, 0.95) 0%, #0B0E14 100%) !important;
  border: 1.5px solid rgba(255, 222, 0, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65), 0 0 28px rgba(255, 222, 0, 0.16) !important;
  padding: 28px 32px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
}

.gsb-glow {
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.18) 0%, rgba(124, 58, 237, 0.1) 50%, transparent 70%) !important;
  pointer-events: none !important;
}

.gsb-inner-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 32px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
}

.gsb-main-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.gsb-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

.gsb-pill-gold {
  background: rgba(255, 215, 0, 0.15) !important;
  border: 1px solid #FFD700 !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
}

.gsb-pill-verified {
  background: rgba(0, 255, 136, 0.15) !important;
  border: 1px solid #00FF88 !important;
  color: #00FF88 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
}

.gsb-pill-cyan {
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid #00F0FF !important;
  color: #00F0FF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
}

.gsb-pill-time {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #CBD5E1 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
}

.gsb-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.25 !important;
}

.gsb-description {
  font-size: 0.95rem !important;
  color: #D1D5DB !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Showcase del Vehículo y Premio (Generoso y de Alto Voltaje Gamer) */
.gsb-prize-showcase {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: rgba(11, 14, 20, 0.75) !important;
  border: 1px solid rgba(255, 222, 0, 0.22) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-top: 2px !important;
  box-sizing: border-box !important;
}

.gsb-prize-img-wrap {
  width: 150px !important;
  height: 85px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gsb-prize-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 16px rgba(255, 222, 0, 0.4)) !important;
  transition: transform 0.25s ease !important;
}

.gsb-prize-showcase:hover .gsb-prize-img {
  transform: scale(1.08) !important;
}

.gsb-prize-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.gsb-prize-eyebrow {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #FFDE00 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.gsb-prize-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.gsb-prize-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.gsb-prize-chip {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

.gsb-prize-chip.chip-gold {
  background: rgba(255, 222, 0, 0.12) !important;
  border: 1px solid rgba(255, 222, 0, 0.4) !important;
  color: #FFDE00 !important;
}

.gsb-prize-chip.chip-cyan {
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
}

.gsb-prize-chip.chip-green {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.4) !important;
  color: #00FF88 !important;
}

.gsb-prize-chip.chip-purple {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #E9D5FF !important;
}

/* Vitrina Dual Ganador (Personaje 3D Completo + Coche) */
.gsb-winner-showcase {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.gsb-winner-showcase .gsb-prize-showcase {
  flex: 1 !important;
  min-width: 200px !important;
}

/* Showcase 3D Ganador de Stream con Personaje Completo */
.gsb-avatar-wrap.gsb-avatar-full-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.gsb-character-stage {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 140px !important;
  height: 175px !important;
}

.gsb-stage-aura {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.32) 0%, rgba(0, 255, 136, 0.12) 50%, transparent 75%) !important;
  pointer-events: none !important;
  filter: blur(6px) !important;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseGanadorAura {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.06); opacity: 1; }
}

.gsb-avatar.gsb-avatar-full {
  width: auto !important;
  height: 160px !important;
  max-width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(255, 222, 0, 0.5)) drop-shadow(0 2px 6px rgba(0, 255, 136, 0.3)) !important;
  z-index: 2 !important;
  position: relative !important;
  margin-bottom: -16px !important;
  transition: transform 0.25s ease !important;
}

.gsb-avatar-full-wrap:hover .gsb-avatar.gsb-avatar-full {
  transform: scale(1.08) translateY(-4px) !important;
}

.gsb-pedestal-disc {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 20px !important;
  background: radial-gradient(ellipse at center, #FFDE00 0%, #D4A017 45%, rgba(11, 14, 20, 0.95) 100%) !important;
  border: 1.5px solid #FFDE00 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
  z-index: 1 !important;
}

.gsb-crown {
  position: absolute !important;
  top: -12px !important;
  right: -6px !important;
  font-size: 22px !important;
  animation: none !important; /* 0% GPU idle */
  z-index: 3 !important;
}

/* Columna CTA: Ventajas Bento, Hint y Botón Gamer Prominente */
.gsb-cta-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.gsb-perks-box {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  background: rgba(11, 14, 20, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

.gsb-perk-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.gpi-ico {
  font-size: 1.2rem !important;
}

.gpi-txt {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #E4E4E7 !important;
  line-height: 1.2 !important;
}

.gsb-cta-hint {
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
  background: rgba(11, 14, 20, 0.65) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  border-left: 3px solid #FFDE00 !important;
  line-height: 1.4 !important;
}

/* Botón de Acción Gamer Prominente (Equilibrado a 48px con Creadores) */
.gsb-btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #FFDE00 0%, #F59E0B 100%) !important;
  color: #0B0E14 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(255, 222, 0, 0.35) !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.gsb-btn-action:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(255, 222, 0, 0.55) !important;
  color: #0B0E14 !important;
}

.gsb-btn-action:active {
  transform: translateY(1px) !important;
}

/* Responsive Tablet para Sorteos (600px - 900px, foco crítico en 901x642) */
@media (max-width: 900px) {
  .inicio-ganador-stream-section {
    padding: 8px 16px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ganador-stream-banner-card {
    padding: 20px 18px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .gsb-inner-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .gsb-title {
    font-size: 1.3rem !important;
  }

  .gsb-description {
    font-size: 0.88rem !important;
  }

  .gsb-prize-showcase {
    padding: 10px 12px !important;
  }

  .gsb-prize-img-wrap {
    width: 110px !important;
    height: 65px !important;
  }

  .gsb-perks-box {
    gap: 8px !important;
    padding: 10px !important;
  }

  .gpi-txt {
    font-size: 0.75rem !important;
  }

  .gsb-btn-action {
    min-height: 46px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
  }
}

/* Responsive Móvil para Showcase de Ganador (<= 768px) */
@media (max-width: 768px) {
  .gsb-character-stage {
    width: 105px !important;
    height: 140px !important;
  }

  .gsb-avatar.gsb-avatar-full {
    height: 125px !important;
    margin-bottom: -12px !important;
  }

  .gsb-pedestal-disc {
    width: 90px !important;
    height: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Responsive Móvil Estricto para Sorteos (<= 480px, 360px - 390px) */
@media (max-width: 480px) {
  .inicio-ganador-stream-section {
    padding: 6px 12px !important;
  }

  .ganador-stream-banner-card {
    padding: 18px 14px !important;
  }

  .gsb-character-stage {
    width: 105px !important;
    height: 140px !important;
  }

  .gsb-avatar.gsb-avatar-full {
    height: 125px !important;
    margin-bottom: -12px !important;
  }

  .gsb-pedestal-disc {
    width: 90px !important;
    height: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .gsb-prize-showcase {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .gsb-prize-img-wrap {
    width: 130px !important;
    height: 70px !important;
  }

  .gsb-prize-chips {
    justify-content: center !important;
  }

  .gsb-perks-box {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .gsb-perk-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }
}

/* ==========================================================================
   SORTEOS STANDBY CARD: ESTADO EN PREPARACIÓN DE ALTO VOLTAJE GAMER
   ========================================================================== */
.sorteos-standby-card {
  position: relative !important;
  background: linear-gradient(135deg, rgba(20, 26, 42, 0.95) 0%, rgba(10, 14, 24, 0.98) 100%) !important;
  border: 2px solid #FFDE00 !important;
  border-radius: 24px !important;
  box-shadow: 0 0 45px rgba(255, 222, 0, 0.22), 0 20px 60px rgba(0, 0, 0, 0.85) !important;
  padding: 32px 36px !important;
  margin: 0 auto 36px auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  max-width: 1000px !important;
}

.ssc-glow {
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.18) 0%, rgba(124, 58, 237, 0.1) 50%, transparent 70%) !important;
  pointer-events: none !important;
}

.ssc-head-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 22px !important;
}

.ssc-pill-live {
  background: #FF2A4B !important;
  color: #FFFFFF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 1px !important;
}

.ssc-pill-gold {
  background: linear-gradient(135deg, #FFDE00 0%, #F59E0B 100%) !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
}

.ssc-pill-verified {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid #00FF88 !important;
  color: #00FF88 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

.ssc-main-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 28px !important;
}

.ssc-icon-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 90px !important;
  height: 90px !important;
  background: rgba(255, 222, 0, 0.08) !important;
  border: 2px dashed rgba(255, 222, 0, 0.5) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ssc-big-icon {
  font-size: 48px !important;
  filter: drop-shadow(0 0 15px rgba(255, 222, 0, 0.5)) !important;
}

.ssc-info {
  flex: 1 1 auto !important;
}

.ssc-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.5px !important;
}

.ssc-desc {
  font-size: 14px !important;
  color: #CBD5E1 !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
}

.ssc-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.ssc-feat {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.ssc-feat-ico {
  font-size: 22px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.ssc-feat strong {
  display: block !important;
  font-size: 13px !important;
  color: #FFDE00 !important;
  margin-bottom: 3px !important;
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.5px !important;
}

.ssc-feat small {
  display: block !important;
  font-size: 11px !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
}

.ssc-actions-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.ssc-btn-main {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  box-shadow: 0 0 25px rgba(255, 222, 0, 0.3) !important;
}

.ssc-channel-buttons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.ssc-channel-btn {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.ssc-channel-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-2px) !important;
}

.ssc-channel-btn.kick-btn {
  border-color: rgba(0, 255, 136, 0.3) !important;
  color: #00FF88 !important;
}

.ssc-channel-btn.discord-btn {
  border-color: rgba(124, 58, 237, 0.4) !important;
  color: #A78BFA !important;
}

.ssc-channel-btn.tiktok-btn {
  border-color: rgba(0, 240, 255, 0.3) !important;
  color: #00F0FF !important;
}

@media (max-width: 900px) {
  .sorteos-standby-card {
    padding: 22px 18px !important;
  }
  .ssc-main-content {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .ssc-features-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ssc-title {
    font-size: 20px !important;
  }
  .ssc-desc {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   THEMOROTEX TRADING & MARKETPLACE HUB (/valores)
   ========================================================================== */

/* 1. TICKER BURSÁTIL EN VIVO (MARQUEE) */
.mtx-ticker-container {
  display: flex;
  align-items: center;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 14px;
  padding: 8px 14px;
  margin: 12px 0 28px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: none !important;
  position: relative;
  z-index: 5;
}

.mtx-ticker-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00FF88;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 14px;
}

.live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
  animation: none !important; /* 0% GPU idle */
}

.mtx-ticker-marquee {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.mtx-ticker-track {
  display: inline-flex;
  gap: 16px;
  white-space: nowrap;
  animation: none !important; /* 0% GPU idle */
}

.mtx-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes mtxTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #E2E8F0;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.ticker-pill:hover {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.4);
  transform: translateY(-1px);
}

.ticker-pill-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.5);
}

.ticker-pill-name {
  font-weight: 700;
  color: #FFFFFF;
}

.ticker-pill-val {
  font-family: monospace, sans-serif;
  font-weight: 800;
  color: #00E5FF;
}

.ticker-pill-delta {
  font-size: 11px;
  font-weight: 800;
}

.ticker-pill-delta.up { color: #00FF88; }
.ticker-pill-delta.down { color: #FF4D6D; }
.ticker-pill-delta.equal { color: #94A3B8; }

/* 2. BENTO GRID: NOTICIAS DE MERCADO & CAR PORTFOLIO */
.valores-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

@media (max-width: 980px) {
  .valores-bento-grid {
    grid-template-columns: 1fr;
  }
}

.vbento-card {
  background: rgba(14, 18, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.vbento-news {
  border-top: 3px solid #00E676;
}

.vbento-garage {
  border-top: 3px solid #FFB800;
}

.vbento-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.vbento-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vbento-badge-live {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  color: #00FF88;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.25);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}

.vbento-badge-garage {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  color: #FFB800;
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.25);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}

.vbento-title {
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.3px;
}

.vbento-sub {
  font-size: 12px;
  color: #64748B;
  font-weight: 600;
}

.vbento-desc {
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Muro de noticias */
.vbento-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}

.vnews-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.vnews-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.vnews-top-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.vnews-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.vnews-badge.verde {
  background: rgba(0, 255, 136, 0.15);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00FF88;
}

.vnews-badge.rojo {
  background: rgba(255, 77, 109, 0.15);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #FF4D6D;
}

.vnews-badge.amarillo {
  background: rgba(255, 184, 0, 0.15);
  border: 1px solid rgba(255, 184, 0, 0.3);
  color: #FFB800;
}

.vnews-badge.azul {
  background: rgba(0, 229, 255, 0.15);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: #00E5FF;
}

.vnews-date {
  font-size: 11px;
  color: #64748B;
}

.vnews-title {
  font-size: 14px;
  font-weight: 700;
  color: #F8FAFC;
  margin: 0 0 4px;
}

.vnews-msg {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0;
}

/* 3. MI GARAJE / CAR PORTFOLIO */
.garage-networth-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.3);
  padding: 6px 14px;
  border-radius: 10px;
}

.gnw-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #CBD5E1;
  letter-spacing: 0.4px;
}

.gnw-val {
  font-size: 22px;
  font-weight: 900;
  color: #FFDE00;
  font-family: monospace, sans-serif;
  letter-spacing: -0.5px;
}

.garage-add-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.garage-search-wrap {
  position: relative;
  flex: 1;
}

.garage-search-wrap input {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.garage-search-wrap input:focus {
  border-color: #FFB800;
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.25);
}

.garage-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #0D111E;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7);
  z-index: 100;
  padding: 6px;
}

.garage-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.garage-search-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.gsearch-img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  background: #000;
}

.gsearch-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gsearch-title {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.gsearch-val {
  font-size: 11px;
  color: #00E5FF;
  font-weight: 800;
}

.btn-gadd-fast {
  background: rgba(255, 184, 0, 0.15);
  border: 1px solid rgba(255, 184, 0, 0.35);
  color: #FFDE00;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.btn-garage-clear {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  color: #FF4D6D;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-garage-clear:hover {
  background: rgba(255, 77, 109, 0.2);
}

.garage-assets-wrap {
  min-height: 140px;
}

.garage-assets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

.garage-asset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.garage-asset-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.garow-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.garow-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: #000;
}

.garow-info {
  display: flex;
  flex-direction: column;
}

.garow-name {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.garow-sub {
  font-size: 11px;
  color: #94A3B8;
}

.garow-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.garow-qty-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-gqty {
  background: none;
  border: none;
  color: #CBD5E1;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 4px;
}

.gqty-num {
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  min-width: 14px;
  text-align: center;
}

.garow-val {
  font-family: monospace, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #00E5FF;
}

.btn-gremove {
  background: none;
  border: none;
  color: #FF4D6D;
  font-size: 14px;
  cursor: pointer;
  padding: 2px;
}

.garage-empty-state {
  text-align: center;
  padding: 35px 20px;
  color: #64748B;
  font-size: 13px;
}

.garage-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.garage-count {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 600;
}

.btn-copy-garage {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-garage:hover {
  background: rgba(0, 229, 255, 0.15);
  border-color: #00E5FF;
  color: #00E5FF;
}

/* 4. MODAL HISTÓRICO DE PRECIOS & CURVA SVG */
/* Ocultar el dock inferior cuando el modal de historial esté abierto */
body.modal-chart-open .gaming-sidebar,
body:has(#modalHistorialValor.abierto) .gaming-sidebar {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mtx-modal-chart-backdrop.abierto,
#modalHistorialValor.modal-backdrop.abierto {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 100005 !important;
}

.mtx-modal-chart-backdrop:not(.abierto),
#modalHistorialValor.modal-backdrop:not(.abierto) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mtx-modal-chart-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 8, 16, 0.85);
  backdrop-filter: none !important;
  z-index: 100005 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-chart-box {
  background: #0B0F1C;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px 28px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 229, 255, 0.15);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 77, 109, 0.2);
  color: #FF4D6D;
  border-color: #FF4D6D;
}

.mchart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.mchart-item-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mchart-thumb {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.mchart-eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #00E5FF;
  letter-spacing: 0.8px;
}

.mchart-title {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 2px 0 0;
}

.mchart-pricing-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mchart-val-big {
  font-size: 24px;
  font-weight: 900;
  color: #FFDE00;
  font-family: monospace, sans-serif;
}

.mchart-trend-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

.mchart-trend-tag.trend-rising {
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.35);
  color: #00FF88;
}

.mchart-trend-tag.trend-dropping {
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid rgba(255, 77, 109, 0.35);
  color: #FF4D6D;
}

.mchart-trend-tag.trend-unstable {
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.35);
  color: #FFB800;
}

.mchart-trend-tag.trend-manipulated {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #A855F7;
}

.mchart-trend-tag.trend-stable {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94A3B8;
}

.mchart-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.mkpi-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.mkpi-lbl {
  font-size: 11px;
  color: #64748B;
  font-weight: 700;
}

.mkpi-val {
  font-size: 14px;
  color: #F8FAFC;
  font-weight: 800;
  margin-top: 2px;
}

.mchart-canvas-wrap {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.mchart-graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.mchart-gh-title {
  font-size: 13px;
  font-weight: 800;
  color: #E2E8F0;
}

.mchart-gh-period {
  font-size: 11px;
  color: #00E5FF;
  font-weight: 700;
}

.mchart-svg-container {
  min-height: 180px;
}

.mchart-history-log {
  margin-bottom: 22px;
}

.mhist-log-title {
  font-size: 13px;
  font-weight: 800;
  color: #CBD5E1;
  margin-bottom: 10px;
}

.mhist-log-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
}

.mhist-log-row {
  display: grid;
  grid-template-columns: 80px 70px 80px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}

.mhist-date {
  color: #64748B;
}

.mhist-val {
  color: #F8FAFC;
  font-family: monospace, sans-serif;
}

.mhist-delta {
  font-weight: 700;
}

.mhist-nota {
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mchart-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 640px) {
  .mtx-modal-chart-backdrop {
    padding: 10px !important;
    align-items: flex-end !important;
  }

  .modal-chart-box {
    padding: 18px 14px 28px !important;
    border-radius: 20px 20px 16px 16px !important;
    max-height: 84vh !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }

  .mchart-header {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    gap: 8px !important;
  }

  .mchart-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  .mkpi-item {
    padding: 8px 6px !important;
    border-radius: 8px !important;
    text-align: center !important;
  }

  .mkpi-lbl {
    font-size: 9.5px !important;
  }

  .mkpi-val {
    font-size: 12px !important;
  }

  .mchart-canvas-wrap {
    padding: 12px 8px !important;
    margin-bottom: 14px !important;
    border-radius: 12px !important;
  }

  .mchart-svg-container {
    min-height: 140px !important;
  }

  .mhist-log-row {
    grid-template-columns: 75px 55px 65px 1fr !important;
    gap: 6px !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  .mchart-footer-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }

  .mchart-footer-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  }
}


/* ==========================================================================
   SORTEO PREMIO META INFO: REDISEÑO PULIDO Y ORDENADO
   ========================================================================== */
.sp-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}

.sp-clean-badge {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid #00FF88 !important;
  color: #00FF88 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.sorteo-specs-pills {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 12px 0 14px 0 !important;
}

.sp-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  color: #CBD5E1 !important;
  font-weight: 600 !important;
}

.sp-pill-ico {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.sorteo-rules-accordion {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 222, 0, 0.25) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 10px !important;
  transition: all 0.2s ease !important;
}

.sorteo-rules-accordion[open] {
  border-color: #FFDE00 !important;
  box-shadow: 0 0 15px rgba(255, 222, 0, 0.15) !important;
}

.sra-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #FFDE00 !important;
  cursor: pointer !important;
  user-select: none !important;
  background: rgba(255, 222, 0, 0.06) !important;
}

.sra-summary::-webkit-details-marker {
  display: none !important;
}

.sra-arrow {
  font-size: 14px !important;
  transition: transform 0.2s ease !important;
}

.sorteo-rules-accordion[open] .sra-arrow {
  transform: rotate(180deg) !important;
}

.sra-content {
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

.sra-rule-item {
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #94A3B8 !important;
  border-left: 2px solid #7C3AED !important;
  padding-left: 8px !important;
}

.sra-rule-item strong {
  color: #FFFFFF !important;
}

/* ==========================================================================
   LIBRO CONTABLE DE MOVIMIENTOS (GAMER DARK BENTO REDESIGN)
   Cero tablas rígidas · 100% Mobile-first adaptable (360px - 390px)
   ========================================================================== */

.pbc-libro-contable {
  background: rgba(14, 20, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  overflow-x: clip;
}

.movimientos-bento-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.35) rgba(11, 14, 20, 0.6);
}

.movimientos-bento-list::-webkit-scrollbar {
  width: 6px;
}
.movimientos-bento-list::-webkit-scrollbar-track {
  background: rgba(11, 14, 20, 0.6);
  border-radius: 9999px;
}
.movimientos-bento-list::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.35);
  border-radius: 9999px;
}
.movimientos-bento-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.6);
}

.mov-bento-item {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mov-bento-item:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(20, 29, 48, 0.85);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 240, 255, 0.08);
  transform: translateY(-1px);
}

.mbi-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Semántica de Píldoras (Pills Gamer) */
.mov-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.mov-pill-ico {
  font-size: 13px;
  line-height: 1;
}

.mov-pill-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill-oro {
  color: #FFD700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

.pill-esmeralda {
  color: #00FF88;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.35);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.15);
}

.pill-cian {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
}

.pill-coral {
  color: #FF7B72;
  background: rgba(255, 123, 114, 0.12);
  border: 1px solid rgba(255, 123, 114, 0.35);
  box-shadow: 0 0 8px rgba(255, 123, 114, 0.15);
}

.pill-rojo {
  color: #FF3366;
  background: rgba(255, 51, 102, 0.12);
  border: 1px solid rgba(255, 51, 102, 0.35);
  box-shadow: 0 0 8px rgba(255, 51, 102, 0.15);
}

.pill-purpura {
  color: #A855F7;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
}

/* Badges de Polaridad (+ / - / 0) */
.mov-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.mov-badge-pos {
  color: #00FF88;
  background: rgba(0, 255, 136, 0.14);
  border: 1px solid rgba(0, 255, 136, 0.4);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.22);
}

.mov-badge-neg {
  color: #FF3366;
  background: rgba(255, 51, 102, 0.14);
  border: 1px solid rgba(255, 51, 102, 0.4);
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.22);
}

.mov-badge-neu {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

/* Cuerpo y Motivo */
.mbi-body {
  margin: 9px 0 7px 0;
  width: 100%;
  box-sizing: border-box;
}

.mbi-motivo {
  color: #E2E8F0;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fila Inferior (Fecha + Saldo) */
.mbi-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
  box-sizing: border-box;
}

.mbi-date {
  color: #94A3B8;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mbi-date-ico {
  font-size: 11.5px;
  line-height: 1;
}

.mbi-date time {
  color: #94A3B8;
}

.mbi-saldo {
  font-size: 12px;
  color: #A1A1AA;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.mbi-saldo-lbl {
  color: #71717A;
}

.mbi-saldo-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.3px;
}

/* Estado Vacío (Empty State) */
.mov-empty-state {
  text-align: center;
  padding: 30px 16px;
  background: rgba(14, 18, 28, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  margin: 6px 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

.mov-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.35));
}

.mov-empty-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}

.mov-empty-sub {
  color: #94A3B8;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 500px;
  margin: 0 auto 14px auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mov-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Adaptación Estricta Mobile 360px - 390px */
@media (max-width: 680px) {
  .pbc-libro-contable .pbc-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .perfil-drops-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .perfil-drop-card {
    padding: 14px 12px !important;
  }
}

@media (max-width: 480px) {
  .pbc-libro-contable {
    padding: 12px 10px !important;
    overflow-x: clip !important;
  }

  .perfil-drops-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .perfil-drop-card {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }

  .pdc-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .pdc-security {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .pdc-code-row,
  .pdc-pin-row {
    padding: 6px 8px !important;
  }

  .pdc-lbl {
    font-size: 10.5px !important;
  }

  .pdc-claim-val {
    font-size: 13.5px !important;
  }

  .pdc-pin-val {
    font-size: 14.5px !important;
  }

  .pdc-pin-tip {
    font-size: 10px !important;
  }

  .btn-discord-claim {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  .pdc-entregado-msg {
    font-size: 11.5px !important;
    padding: 8px 10px !important;
  }

  .movimientos-bento-list {
    max-height: 420px;
    gap: 8px;
    padding-right: 0;
    overflow-x: clip !important;
  }

  .mov-bento-item {
    padding: 10px 10px;
    border-radius: 10px;
    overflow-x: clip !important;
  }

  .mbi-row-top {
    gap: 6px;
  }

  .mov-pill {
    padding: 3px 8px;
    font-size: 10.5px;
  }

  .mov-pill-ico {
    font-size: 11.5px;
  }

  .mov-badge {
    padding: 3px 8px;
    font-size: 12px;
  }

  .mbi-body {
    margin: 7px 0 6px 0;
  }

  .mbi-motivo {
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .mbi-row-bottom {
    padding-top: 6px;
    gap: 6px;
  }

  .mbi-date {
    font-size: 10.5px;
  }

  .mbi-saldo {
    font-size: 11px;
  }

  .mbi-saldo-val {
    font-size: 12px;
  }

  .mov-empty-state {
    padding: 22px 12px;
    overflow-x: clip !important;
  }

  .mov-empty-icon {
    font-size: 30px;
  }

  .mov-empty-title {
    font-size: 1.05rem;
  }

  .mov-empty-sub {
    font-size: 11.5px;
    margin-bottom: 12px;
  }
}

/* ========================================================
   CANAL DE CONTACTO / ENTREGA VIP (WHATSAPP & DISCORD)
======================================================== */
.checkout-canal-section {
  margin: 16px 0;
  padding: 16px;
  background: rgba(18, 24, 38, 0.7);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.checkout-canal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.checkout-canal-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.canal-heading-svg {
  color: #00F0FF;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.45));
}

.checkout-canal-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  color: #FFFFFF;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.checkout-canal-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.28);
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.canal-selector-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
  box-sizing: border-box;
  width: 100%;
}

.btn-canal-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 42px;
  min-height: 42px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #CBD5E1;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-sizing: border-box;
  outline: none;
}

.btn-canal-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-canal-tab .btn-canal-svg-wa {
  color: #25D366;
  flex-shrink: 0;
  margin-right: 3px;
  filter: drop-shadow(0 0 5px rgba(37, 211, 102, 0.35));
  transition: transform 0.2s ease;
}

.btn-canal-tab .btn-canal-svg-dc {
  color: #5865F2;
  flex-shrink: 0;
  margin-right: 3px;
  filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.35));
  transition: transform 0.2s ease;
}

.btn-canal-tab:hover svg {
  transform: translateY(-1px);
}

.btn-canal-tab.active[data-canal="whatsapp"] {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.2) 0%, rgba(18, 24, 38, 0.95) 100%);
  border-color: #25D366;
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.28), inset 0 0 10px rgba(37, 211, 102, 0.12);
}

.btn-canal-tab.active[data-canal="discord"] {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.25) 0%, rgba(18, 24, 38, 0.95) 100%);
  border-color: #5865F2;
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.32), inset 0 0 10px rgba(88, 101, 242, 0.14);
}

.canal-panel {
  display: block;
}

.canal-panel.is-hidden {
  display: none !important;
}

.checkout-label-gamer {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #E4E4E7;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.canal-label-svg {
  flex-shrink: 0;
  margin-right: 4px;
}

.canal-label-svg.wa-color {
  color: #25D366;
}

.canal-label-svg.dc-color {
  color: #7983F5;
}

.checkout-phone-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.checkout-select-indicativo {
  height: 42px;
  width: 155px;
  flex-shrink: 0;
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0 10px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.checkout-select-indicativo:focus {
  border-color: #25D366;
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.25);
}

.checkout-select-indicativo option {
  background: #0B0E14;
  color: #FFFFFF;
}

.checkout-phone-input {
  height: 42px;
  flex: 1;
  min-width: 0;
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0 12px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.checkout-phone-input:focus {
  border-color: #25D366;
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.25);
}

.checkout-phone-input::placeholder {
  color: #64748B;
  font-weight: 500;
  opacity: 1;
}

.checkout-input-prefix-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 42px;
  min-height: 42px;
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-input-prefix-group:focus-within {
  border-color: #5865F2;
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.35);
}

.checkout-input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: rgba(88, 101, 242, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #7983F5;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.95rem;
  user-select: none;
  flex-shrink: 0;
}

.checkout-input-with-prefix {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 12px;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  box-sizing: border-box;
}

.checkout-input-with-prefix::placeholder {
  color: #64748B;
  font-weight: 500;
  opacity: 1;
}

.discord-join-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.12) 0%, rgba(18, 24, 38, 0.85) 100%);
  border: 1px solid rgba(88, 101, 242, 0.32);
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
  width: 100%;
}

.discord-join-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.discord-join-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(88, 101, 242, 0.2);
  border: 1px solid rgba(88, 101, 242, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #5865F2;
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.25);
}

.discord-join-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.discord-join-title {
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.discord-join-sub {
  color: #94A3B8;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
}

.discord-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #5865F2;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 10px rgba(88, 101, 242, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  white-space: nowrap;
}

.discord-join-btn:hover {
  background: #4752C4;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.5);
}

.discord-join-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.discord-join-btn:hover svg {
  transform: translate(1px, -1px);
}

.checkout-discord-chk-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  width: 100%;
}

.checkout-discord-chk-wrap:hover {
  background: rgba(88, 101, 242, 0.08);
  border-color: rgba(88, 101, 242, 0.35);
  box-shadow: 0 0 10px rgba(88, 101, 242, 0.15);
}

.checkout-discord-chk-wrap input[type="checkbox"] {
  accent-color: #5865F2;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.checkout-discord-chk-text {
  font-size: 0.82rem;
  color: #E2E8F0;
  font-weight: 500;
  line-height: 1.35;
}

.canal-subhint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #94A3B8;
  margin-top: 6px;
  line-height: 1.35;
}

.canal-subhint-icon {
  color: #00F0FF;
  flex-shrink: 0;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .checkout-canal-section {
    padding: 12px;
  }
  .checkout-phone-input-group {
    flex-direction: column;
    gap: 8px;
  }
  .checkout-select-indicativo {
    width: 100%;
  }
  .discord-join-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .discord-join-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   MÓDULO ROBUX COMERCIAL · GAMER DARK AAA & BENTO SYSTEM
   ========================================================================== */

.nav-robux-pill {
  color: #FFD700 !important;
  font-weight: 800 !important;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 9999px;
  padding: 6px 14px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-robux-pill:hover,
.nav-robux-pill.active {
  background: rgba(255, 215, 0, 0.2);
  border-color: #FFD700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
  transform: translateY(-1px);
}

.robux-page-main {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 16px 64px 16px;
  box-sizing: border-box;
  overflow-x: clip;
}

.robux-view-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

/* HERO BANNER ROBUX */
.robux-hero-banner {
  background: linear-gradient(135deg, rgba(17, 22, 34, 0.9) 0%, rgba(11, 14, 20, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 24px;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.06);
  backdrop-filter: none !important;
}

.robux-hero-banner::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.robux-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.robux-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: 0.5px;
}

.rhb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseNeonDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.robux-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
}

.text-neon-gold {
  color: #FFD700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
}

.text-neon-cyan {
  color: #00F0FF;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

.text-neon-emerald {
  color: #00FF88;
  text-shadow: 0 0 14px rgba(0, 255, 136, 0.4);
}

.robux-hero-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0;
}

/* BARRA SELECTORA DE MONEDA EN HERO ROBUX */
.robux-currency-bar-wrap {
  width: 100%;
  max-width: 860px;
  background: rgba(17, 22, 34, 0.75);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 16px;
  padding: 10px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.robux-curr-label-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.rcl-icon {
  font-size: 1.1rem;
}

.rcl-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #00F0FF;
  letter-spacing: 0.8px;
}

.robux-currency-pills-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  width: 100%;
}

.robux-currency-pills-rail::-webkit-scrollbar {
  display: none;
}

.robux-curr-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(24, 24, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 6px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #CBD5E1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.robux-curr-pill:hover {
  background: rgba(30, 30, 42, 0.95);
  border-color: rgba(0, 240, 255, 0.45);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.robux-curr-pill.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(124, 58, 237, 0.3) 100%);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.robux-curr-more {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.35);
  color: #FFD700;
}

.robux-curr-more:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: #FFD700;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.rcp-flag {
  font-size: 1.05rem;
  line-height: 1;
}

.rcp-code {
  letter-spacing: 0.5px;
}

/* BOTÓN RÁPIDO CAMBIO DE DIVISA EN CALCULADORA */
.shg-currency-quick-wrap {
  display: flex;
  align-items: center;
}

.btn-calc-currency-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(17, 22, 34, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 9999px;
  padding: 6px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-calc-currency-badge:hover {
  border-color: #00F0FF;
  background: rgba(24, 24, 36, 0.95);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.rcc-icon {
  font-size: 1rem;
}

.rcc-flag {
  font-size: 1.1rem;
}

.rcc-code {
  color: #00F0FF;
  letter-spacing: 0.5px;
}

.rcc-change {
  font-size: 0.76rem;
  color: #A1A1AA;
  margin-left: 2px;
}

/* TICKER DE STOCK EN VIVO */
.robux-stock-card-bento {
  width: 100%;
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 18px;
  padding: 20px 24px;
  margin-top: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.rsc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rsc-badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #00FF88;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  background: #00FF88;
  border-radius: 50%;
  box-shadow: 0 0 6px #00FF88;
  animation: none !important; /* 0% GPU idle */
}

.rsc-update-time {
  font-size: 0.78rem;
  color: #94A3B8;
}

.rsc-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.rsc-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.rsc-r-icon {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFD700;
}

.rsc-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #FFFFFF;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

.rsc-unit {
  font-size: 1rem;
  color: #94A3B8;
  font-weight: 600;
}

.rsc-guarantee-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rsc-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: #E2E8F0;
  font-weight: 600;
}

.rsc-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.rsc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00FF88 0%, #00F0FF 100%);
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
  transition: width 0.5s ease;
}

.rsc-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #94A3B8;
}

/* SECCIONES HEADERS */
.section-head-gamer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.shg-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 9999px;
  padding: 4px 14px;
}

.shg-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
}

.shg-sub {
  font-size: 0.95rem;
  color: #94A3B8;
  margin: 0;
  max-width: 600px;
}

/* DUAL DELIVERY METHODS BENTO GRID */
.robux-methods-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .robux-methods-bento-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.robux-method-card {
  background: rgba(17, 22, 34, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  backdrop-filter: none !important;
  box-sizing: border-box;
}

.robux-method-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.robux-method-card.is-selected {
  border-color: #FFD700;
  background: rgba(22, 28, 44, 0.92);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.robux-method-card[data-method="plus"].is-selected {
  border-color: #00F0FF;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.robux-method-card[data-method="gamepass"].is-selected {
  border-color: #10B981;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.rmc-badge-pill {
  position: static;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 9999px;
  padding: 4px 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rmc-badge-best {
  background: #FFD700;
  color: #0B0E14;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.rmc-badge-fast {
  background: #00F0FF;
  color: #0B0E14;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.rmc-badge-gamepass {
  background: #10B981;
  color: #0B0E14;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.rmc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.rmc-head-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rmc-icon-wrap {
  font-size: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 215, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.rmc-icon-cyan {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.25);
}

.rmc-icon-green {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
}

.rmc-title-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rmc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.1;
}

.rmc-tagline {
  font-size: 0.74rem;
  color: #94A3B8;
  font-weight: 500;
}

.rmc-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.rmc-rate {
  font-size: 0.82rem;
  color: #CBD5E1;
}

.rmc-rate strong {
  color: #FFD700;
  font-size: 0.92rem;
  font-weight: 800;
}

.rmc-chips-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.rmc-chip {
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.chip-green {
  background: rgba(16, 185, 129, 0.08);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.chip-cyan {
  background: rgba(0, 240, 255, 0.08);
  color: #38BDF8;
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.chip-warn {
  background: rgba(245, 158, 11, 0.08);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.rmc-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.btn-select-method {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-select-method:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn-method-active {
  background: #FFD700 !important;
  color: #0B0E14 !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}

.robux-method-card[data-method="plus"] .btn-method-active {
  background: #00F0FF !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.robux-method-card[data-method="gamepass"] .btn-method-active {
  background: #10B981 !important;
  border-color: #10B981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
}

.link-join-group {
  font-size: 0.74rem;
  color: #38BDF8;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: color 0.2s;
  padding-top: 2px;
}

.link-join-group:hover {
  color: #7DD3FC;
  text-decoration: underline;
}

.rmc-foot-hint {
  font-size: 0.72rem;
  color: #94A3B8;
  text-align: center;
  padding-top: 2px;
}

/* CALCULADORA BENTO GRID */
.robux-calc-bento {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 24px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.calc-summary-col {
  position: sticky;
  top: 90px;
  z-index: 10;
  width: 100%;
}

.calc-controls-col {
  background: rgba(17, 22, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.calc-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}

.mode-tab {
  height: 38px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-tab.active {
  background: rgba(255, 215, 0, 0.15);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.calc-input-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #CBD5E1;
}

.calc-input-group {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px;
  padding: 0 16px;
  height: 56px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.calc-input-group:focus-within {
  border-color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.calc-prefix {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFD700;
  margin-right: 8px;
}

.calc-main-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  outline: none;
  width: 100%;
}

.calc-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.calc-range-slider {
  width: 100%;
  accent-color: #FFD700;
  cursor: pointer;
}

.slider-marks {
  position: relative;
  width: 100%;
  height: 20px;
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 6px;
  user-select: none;
}

.slider-marks .mark-item {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 600;
  transition: color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.slider-marks .mark-item:first-child {
  transform: none;
  left: 0 !important;
}

.slider-marks .mark-item:last-child {
  transform: translateX(-100%);
  left: 100% !important;
}

.calc-presets-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-chip, .preset-money-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 6px 12px;
  color: #CBD5E1;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preset-chip:hover, .preset-money-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.preset-chip.active {
  background: rgba(255, 215, 0, 0.2);
  border-color: #FFD700;
  color: #FFD700;
}

.calc-user-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}

.calc-user-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0 14px;
  height: 46px;
}

.calc-user-input-wrap:focus-within {
  border-color: #FFD700;
}

/* ── Micro-indicador de estado de usuario Roblox ── */
.calc-user-status {
  position: absolute;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  pointer-events: none;
  transition: all 0.2s ease;
}

.calc-user-status.is-loading::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: #00F0FF;
  border-right-color: #00F0FF;
  border-radius: 50%;
  animation: none !important; /* 0% GPU idle */
}

.calc-user-status.is-valid {
  color: #00FF88;
}

.calc-user-status.is-invalid {
  color: #FF4D6D;
}

@keyframes spinRobuxUser {
  to { transform: rotate(360deg); }
}

.user-prefix {
  font-weight: 700;
  color: #FFD700;
  margin-right: 6px;
}

.calc-user-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
}

.calc-help-txt {
  font-size: 0.76rem;
  color: #94A3B8;
}

/* EFECTO ESPEJO: AVATAR LIVE PREVIEW EN PASO 3 WIZARD ROBUX */
.avatar-live-preview-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(14, 20, 32, 0.95) 0%, rgba(11, 14, 20, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: clip;
}

.avatar-live-preview-box.hidden {
  display: none !important;
}

.avatar-live-preview-box.is-loading {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.15);
}

.avatar-live-preview-box.is-verified {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.12);
}

.avatar-live-preview-box.is-error {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
}

.alpb-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.alpb-avatar-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00F0FF;
  background: #07090E;
  transition: border-color 0.25s ease;
  display: block;
}

.avatar-live-preview-box.is-verified .alpb-avatar-img {
  border-color: #22C55E;
}

.avatar-live-preview-box.is-error .alpb-avatar-img {
  border-color: #EF4444;
}

.alpb-status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #0B0E14;
}

.alpb-status-indicator.online {
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
}

.alpb-status-indicator.loading {
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF;
  animation: none !important; /* 0% GPU idle */
}

.alpb-status-indicator.offline {
  background: #EF4444;
}

.alpb-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex-grow: 1;
}

.alpb-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.alpb-display-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.5px;
}

.alpb-badge-verified {
  font-size: 0.68rem;
  font-weight: 700;
  color: #4ADE80;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 9999px;
  padding: 1px 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.alpb-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alpb-username {
  font-size: 0.80rem;
  font-weight: 600;
  color: #94A3B8;
}

.alpb-user-id {
  font-size: 0.72rem;
  color: #64748B;
  font-weight: 500;
}

.alpb-feedback-msg {
  font-size: 0.74rem;
  color: #38BDF8;
  font-weight: 500;
  margin-top: 2px;
}

.avatar-live-preview-box.is-error .alpb-feedback-msg {
  color: #F87171;
}

.avatar-live-preview-box.is-verified .alpb-feedback-msg {
  color: #4ADE80;
}

/* BADGE Y CAJA DE ESTADO DE MEMBRESÍA EN GRUPO OFICIAL */
.group-membership-status-box {
  margin-top: 10px;
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  transition: all 0.25s ease;
  overflow-x: clip;
}

.group-membership-status-box.hidden {
  display: none !important;
}

.group-membership-status-box.loading {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.1);
}

.group-membership-status-box.success {
  border-color: rgba(34, 197, 94, 0.45);
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.25) 0%, rgba(11, 14, 20, 0.95) 100%);
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.1);
}

.group-membership-status-box.warning {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.25) 0%, rgba(11, 14, 20, 0.95) 100%);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.1);
}

.group-membership-status-box.error {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.25) 0%, rgba(11, 14, 20, 0.95) 100%);
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.1);
}

.gms-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.gms-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.gms-text-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.gms-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.gms-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #F8FAFC;
}

.gms-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gms-badge.badge-loading {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.gms-badge.badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: #4ADE80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.gms-badge.badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.gms-badge.badge-warn {
  background: rgba(245, 158, 11, 0.2);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.gms-desc {
  font-size: 0.8rem;
  color: #94A3B8;
  line-height: 1.4;
}

.gms-desc strong {
  color: #E2E8F0;
}

.gms-action-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gms-action-row.hidden {
  display: none !important;
}

.btn-join-group-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #00F0FF 0%, #0099FF 100%);
  color: #07090E;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.25);
  cursor: pointer;
  border: none;
}

.btn-join-group-now:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.4);
}

.btn-switch-to-gamepass {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #FFD700;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-switch-to-gamepass:hover {
  background: rgba(255, 215, 0, 0.22);
  border-color: #FFD700;
  transform: translateY(-1px);
}

/* RESUMEN CALCULADORA (LADO DERECHO) */
.calc-summary-card {
  background: linear-gradient(145deg, rgba(22, 28, 44, 0.95) 0%, rgba(14, 18, 28, 0.98) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  height: auto !important;
  justify-content: flex-start !important;
}

.csc-trust-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ctf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 500;
}

.ctf-ico {
  font-size: 0.88rem;
}

.csc-badge-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.csc-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 9999px;
  padding: 4px 12px;
  letter-spacing: 0.5px;
}

.csc-badge-grupo {
  background: rgba(255, 215, 0, 0.15);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.csc-badge-plus {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.csc-mtx-pts {
  font-size: 0.78rem;
  font-weight: 700;
  color: #C084FC;
  background: rgba(192, 132, 252, 0.12);
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 9999px;
  padding: 4px 10px;
}

.csc-robux-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csc-label {
  font-size: 0.8rem;
  color: #94A3B8;
  font-weight: 600;
}

.csc-robux-val {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.csc-r-icon {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: #FFD700;
}

.csc-robux-val span:nth-child(2) {
  font-family: 'Rajdhani', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
}

.csc-r-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 0.5px;
}

.csc-breakdown-box {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.csc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.csc-price-main span {
  color: #CBD5E1;
}

.csc-total-price {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFD700;
}

.csc-official-price {
  color: #94A3B8;
  font-size: 0.84rem;
}

.csc-savings-highlight {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 8px;
  font-weight: 700;
}

.rsc-num-wrap.rsc-plus-wrap .rsc-r-icon {
  color: #00F0FF;
}

.rsc-num-wrap.rsc-plus-wrap .rsc-num {
  color: #00F0FF;
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.rmc-plus-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: #00F0FF;
  margin: 4px 0;
}

.rmc-plus-stock-status .status-dot {
  width: 7px;
  height: 7px;
  background: #00F0FF;
  border-radius: 50%;
  box-shadow: 0 0 6px #00F0FF;
}

/* ASISTENTE DE CUPO MENSUAL ROBLOX PLUS */
.calc-plus-helper-box {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.cph-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cph-ico {
  font-size: 1rem;
}

.cph-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #E2E8F0;
  cursor: pointer;
}

.cph-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cph-input {
  max-width: 180px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  outline: none;
}

.cph-input:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.cph-cupo-badge {
  font-size: 0.82rem;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
}

.cph-alert {
  color: #F87171;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* CHECKBOXES GAMER PARA ROBUX */
.calc-checkbox-block {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
}

.calc-checkbox-block .checkbox-gamer-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.84rem;
  color: #CBD5E1;
  line-height: 1.4;
}

.calc-checkbox-block .checkbox-gamer-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #FFD700;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.csc-stock-alert {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  color: #FCA5A5;
  font-size: 0.82rem;
  line-height: 1.4;
}

.csc-method-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: #FCD34D;
  line-height: 1.4;
}

.cmn-icon {
  flex-shrink: 0;
}

.csc-actions-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
}

.btn-buy-robux-direct {
  height: 48px;
  background: linear-gradient(90deg, #FFD700 0%, #FFB700 100%);
  color: #0B0E14;
  border: none;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
}

.btn-buy-robux-direct:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

.btn-add-robux-cart {
  height: 48px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-add-robux-cart:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00F0FF;
}

/* VITRINA DE PACKS POPULARES */
.robux-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
}

.robux-pack-card {
  background: rgba(17, 22, 34, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.robux-pack-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.robux-pack-card.is-popular {
  border-color: #FFD700;
  background: rgba(24, 30, 48, 0.85);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.rpk-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rpk-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.15);
  border-radius: 9999px;
  padding: 2px 8px;
}

.rpk-pts {
  font-size: 0.72rem;
  font-weight: 700;
  color: #C084FC;
}

.rpk-icon-center {
  font-size: 2.2rem;
  text-align: center;
  margin: 4px 0;
}

.rpk-robux-qty {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.rpk-r-symbol {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFD700;
}

.rpk-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: #FFFFFF;
}

.rpk-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
}

.rpk-tagline {
  font-size: 0.78rem;
  color: #94A3B8;
  text-align: center;
  margin: 0;
  line-height: 1.35;
  min-height: 32px;
}

.rpk-pricing-box {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
}

.rpk-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rpk-price-row .rpk-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
}

.rpk-official-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #94A3B8;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 4px;
}

.rpk-save-pill {
  background: rgba(0, 255, 136, 0.15);
  color: #00FF88;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 4px;
}

.btn-pack-quick-select {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #FFD700;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pack-quick-select:hover {
  background: #FFD700;
  color: #0B0E14;
}

/* COMPARATIVA BENTO */
.comparison-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.comp-card {
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.comp-themorotex {
  background: rgba(17, 22, 34, 0.9);
  border: 1px solid rgba(0, 255, 136, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.comp-official {
  background: rgba(14, 17, 24, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.comp-badge-top {
  display: inline-flex;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 0.5px;
}

.comp-badge-off {
  color: #94A3B8;
}

.comp-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.comp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.88rem;
  color: #CBD5E1;
  line-height: 1.45;
}

.comp-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.comp-cross {
  color: #EF4444;
  font-weight: bold;
  flex-shrink: 0;
}

/* GUÍA 4 PASOS */
.guide-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.guide-step-card {
  background: rgba(17, 22, 34, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-sizing: border-box;
}

.gsc-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
}

.gsc-icon {
  font-size: 1.6rem;
}

.gsc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.gsc-desc {
  font-size: 0.82rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.45;
}

/* FAQ BENTO ACCORDION */
.faq-bento-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}

.faq-item {
  background: rgba(17, 22, 34, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-item[open] {
  border-color: rgba(0, 240, 255, 0.3);
  background: rgba(20, 26, 40, 0.85);
}

.faq-summary {
  padding: 16px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  color: #00F0FF;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-body {
  padding: 0 20px 16px 20px;
  font-size: 0.88rem;
  color: #CBD5E1;
  line-height: 1.6;
}

.faq-body p {
  margin: 0;
}

/* BANNER CTA FOOTER */
.robux-cta-footer-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(0, 240, 255, 0.15) 100%);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 20px;
  padding: 32px;
  box-sizing: border-box;
}

.rcfb-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.rcfb-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.5px;
}

.rcfb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 4px 0;
}

.rcfb-sub {
  font-size: 0.9rem;
  color: #CBD5E1;
  margin: 0;
}

.rcfb-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-discord-community {
  height: 44px;
  padding: 0 18px;
  background: #5865F2;
  color: #FFFFFF;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-discord-community:hover {
  background: #4752C4;
  transform: translateY(-1px);
}

.btn-kick-live {
  height: 44px;
  padding: 0 18px;
  background: rgba(0, 255, 136, 0.15);
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: #00FF88;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-kick-live:hover {
  background: rgba(0, 255, 136, 0.25);
  transform: translateY(-1px);
}

/* RESPONSIVE MÓVIL (360px - 768px) */
@media (max-width: 768px) {
  .robux-methods-bento-grid,
  .robux-calc-bento,
  .comparison-bento-grid,
  .guide-steps-grid {
    grid-template-columns: 1fr;
  }

  .csc-actions-grid {
    grid-template-columns: 1fr;
  }

  .robux-hero-banner {
    padding: 24px 16px;
  }

  .calc-controls-col,
  .calc-summary-card {
    padding: 20px 16px;
  }
}

@media (max-width: 600px) {
  .robux-currency-bar-wrap {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
    gap: 8px;
  }

  .robux-curr-label-box {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .robux-page-main {
    padding: 16px 12px 48px 12px;
  }

  .rsc-main-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .rcfb-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .rcfb-actions {
    width: 100%;
  }

  .btn-discord-community,
  .btn-kick-live {
    width: 100%;
  }
}

/* ==========================================================================
   PROGRAMA DE CREADORES & STREAMERS: ECONOMÍA CIRCULAR GAMER (BENTO AAA)
   ========================================================================== */

.creadores-page-main {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 16px 80px 16px;
  box-sizing: border-box;
  overflow-x: clip;
}

.creadores-view-wrapper {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

/* HERO BANNER CREADORES */
.creadores-hero-banner {
  background: linear-gradient(135deg, rgba(20, 16, 36, 0.95) 0%, rgba(11, 14, 20, 0.98) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 24px;
  padding: 48px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 35px rgba(124, 58, 237, 0.15);
  backdrop-filter: none !important;
}

.creadores-hero-banner::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.16) 0%, rgba(124, 58, 237, 0.1) 50%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.creadores-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}

.creadores-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 9999px;
  padding: 6px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.chb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
}

.creadores-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.creadores-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.6;
  color: #C7CBD6;
  margin: 0;
  max-width: 820px;
}

.creadores-hero-sub strong {
  color: #FFFFFF;
}

.creadores-hero-sub em {
  color: #00F0FF;
  font-style: normal;
  font-weight: 600;
}

.creadores-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.creadores-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
  box-sizing: border-box;
}

.creadores-btn.primary {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #0B0E14;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
}

.creadores-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.5);
}

.creadores-btn.secondary {
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.5);
  color: #F5F5F7;
}

.creadores-btn.secondary:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: #8B5CF6;
  transform: translateY(-2px);
}

.creadores-hero-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  width: 100%;
}

.ch-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 24, 38, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: #A1A1AA;
}

.ch-pill strong {
  color: #F5F5F7;
}

/* SECCIONES BASE */
.creadores-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  box-sizing: border-box;
}

.creadores-sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
}

.sec-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #C084FC;
  letter-spacing: 0.5px;
}

.sec-badge-pill.gold {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.4);
  color: #FFD700;
}

.sec-badge-pill.purple {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #A78BFA;
}

.sec-badge-pill.emerald {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34D399;
}

.sec-badge-pill.cyan {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
}

.creadores-sec-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
}

.creadores-sec-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #A1A1AA;
  line-height: 1.5;
  margin: 0;
}

/* STREAMERS & CREADORES DESTACADOS (#streamers) - BENTO GAMER DARK (#0B0E14) */
.creadores-streamers-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

.streamer-bento-card {
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
  box-sizing: border-box;
}

.streamer-bento-card:hover {
  transform: translateY(-4px);
}

.streamer-bento-card.streamer-card-gold {
  border-color: rgba(255, 215, 0, 0.28);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 215, 0, 0.1);
}
.streamer-bento-card.streamer-card-gold:hover {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 215, 0, 0.22);
}

.streamer-bento-card.streamer-card-purple {
  border-color: rgba(168, 85, 247, 0.3);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 25px rgba(168, 85, 247, 0.12);
}
.streamer-bento-card.streamer-card-purple:hover {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.25);
}

.streamer-bento-card.streamer-card-vacant {
  border: 1px dashed rgba(0, 240, 255, 0.45);
  background: linear-gradient(180deg, #0B0E14 0%, rgba(11, 20, 28, 0.95) 100%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 240, 255, 0.1);
}
.streamer-bento-card.streamer-card-vacant:hover {
  border-color: rgba(0, 240, 255, 0.8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 240, 255, 0.25);
}

.sbc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.streamer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.streamer-status-badge.status-live {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #FF4D4D;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}

.streamer-status-badge.status-offline {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94A3B8;
}

.streamer-status-badge.status-vacant {
  background: rgba(0, 230, 118, 0.14);
  border: 1px solid rgba(0, 230, 118, 0.55);
  color: #00E676;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.2);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.pulse-dot.live {
  background: #EF4444;
  animation: none !important; /* 0% GPU idle */
}

.pulse-dot.offline {
  background: #64748B;
}

.pulse-dot.green-pulse {
  background: #00E676;
  animation: none !important; /* 0% GPU idle */
}

@keyframes neonLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75);
    transform: scale(0.95);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(239, 68, 68, 0);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    transform: scale(0.95);
  }
}

@keyframes neonGreenPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.75);
    transform: scale(0.95);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(0, 230, 118, 0);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
    transform: scale(0.95);
  }
}

.streamer-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.streamer-tier-pill.tier-partner-gold {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #FFD700;
}

.streamer-tier-pill.tier-partner-purple {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #C084FC;
}

.streamer-tier-pill.tier-vacant-cyan {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
}

.sbc-profile-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sbc-avatar-wrapper {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.sbc-avatar-wrapper.avatar-gold {
  background: linear-gradient(135deg, #FFD700 0%, #B45309 100%);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.35);
}

.sbc-avatar-wrapper.avatar-purple {
  background: linear-gradient(135deg, #C084FC 0%, #6D28D9 100%);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.sbc-avatar-wrapper.avatar-vacant {
  background: linear-gradient(135deg, #00F0FF 0%, #0284C7 100%);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.sbc-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #10141D;
  display: block;
}

.sbc-vacant-avatar-box {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.25) 0%, #0B0E14 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.sbc-avatar-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.sbc-avatar-badge.gold {
  background: #FFD700;
  color: #0B0E14;
}

.sbc-avatar-badge.purple {
  background: #A855F7;
  color: #FFFFFF;
}

.sbc-avatar-badge.cyan {
  background: #00F0FF;
  color: #0B0E14;
}

.sbc-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.sbc-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sbc-username {
  font-size: 1.15rem;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbc-verified-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 900;
  flex-shrink: 0;
}

.sbc-verified-check.gold {
  background: #FFD700;
  color: #0B0E14;
}

.sbc-verified-check.purple {
  background: #A855F7;
  color: #FFFFFF;
}

.sbc-verified-check.cyan {
  background: #00F0FF;
  color: #0B0E14;
}

.sbc-bio {
  font-size: 0.82rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.35;
}

.sbc-perks-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sbc-perk-item {
  font-size: 0.68rem;
  font-weight: 700;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 6px;
}

.sbc-socials-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sbc-socials-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sbc-socials-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sbc-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  min-height: 32px;
  box-sizing: border-box;
  transition: all 0.18s ease;
}

.sbc-social-btn:hover {
  transform: translateY(-2px);
}

.sbc-social-btn.kick {
  background: rgba(83, 252, 24, 0.1);
  border: 1px solid rgba(83, 252, 24, 0.35);
  color: #53FC18;
}
.sbc-social-btn.kick:hover {
  background: rgba(83, 252, 24, 0.2);
  box-shadow: 0 0 12px rgba(83, 252, 24, 0.4);
}

.sbc-social-btn.tiktok {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #F8FAFC;
}
.sbc-social-btn.tiktok:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.sbc-social-btn.youtube {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FF5A5A;
}
.sbc-social-btn.youtube:hover {
  background: rgba(239, 68, 68, 0.22);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.sbc-social-btn.discord {
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.4);
  color: #818CF8;
}
.sbc-social-btn.discord:hover {
  background: rgba(88, 101, 242, 0.25);
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.45);
}

.sbc-social-btn.static {
  cursor: default;
}
.sbc-social-btn.static:hover {
  transform: none;
}

.sbc-benefit-box {
  background: rgba(16, 20, 28, 0.85);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.sbc-benefit-box.gold-border {
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.sbc-benefit-box.purple-border {
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.sbc-benefit-box.cyan-border {
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.sbb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sbb-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.5px;
}

.sbb-off-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: #FFD700;
}

.sbb-off-badge.purple-tag {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #C084FC;
}

.sbb-off-badge.cyan-tag {
  background: rgba(0, 240, 255, 0.18);
  border: 1px solid rgba(0, 240, 255, 0.5);
  color: #00F0FF;
}

.sbb-code-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sbb-code-text {
  font-family: 'JetBrains Mono', monospace, Consolas;
  font-size: 1.35rem;
  font-weight: 900;
  color: #FFD700;
  letter-spacing: 1.5px;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.sbb-code-text.purple {
  color: #C084FC;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.sbb-sub {
  font-size: 0.74rem;
  color: #94A3B8;
}

.sbb-vacant-desc p {
  font-size: 0.8rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.4;
}

.sbc-actions-grid {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.sbc-btn-copy,
.sbc-btn-apply {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sbc-btn-copy {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #E2E8F0;
}

.sbc-btn-copy:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.sbc-btn-copy:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.18);
}

.sbc-btn-copy.copied {
  background: rgba(0, 230, 118, 0.18) !important;
  border-color: #00E676 !important;
  color: #00E676 !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.35) !important;
}

.sbc-btn-apply.gold-btn {
  background: linear-gradient(135deg, #FFD700 0%, #D97706 100%);
  border: none;
  color: #0B0E14;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.28);
}

.sbc-btn-apply.gold-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(255, 215, 0, 0.48);
}

.sbc-btn-apply.gold-btn:active {
  transform: scale(0.96);
  filter: brightness(0.95);
}

.sbc-btn-apply.purple-btn {
  background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
  border: none;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

.sbc-btn-apply.purple-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(168, 85, 247, 0.5);
}

.sbc-btn-apply.purple-btn:active {
  transform: scale(0.96);
}

.sbc-actions-grid.vacant-grid {
  width: 100%;
}

.sbc-btn-postular {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: linear-gradient(135deg, #00F0FF 0%, #0099FF 100%);
  color: #0B0E14;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.35);
  box-sizing: border-box;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sbc-btn-postular:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.55);
}

.sbc-btn-postular:active {
  transform: scale(0.96);
}

.creadores-oled-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  background: #0B0E14;
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 215, 0, 0.2);
  border-radius: 14px;
  padding: 14px 20px;
  color: #F8FAFC;
  font-size: 0.88rem;
  max-width: 380px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.creadores-oled-toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.creadores-oled-toast.success {
  border-color: rgba(0, 230, 118, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 230, 118, 0.25);
}

.creadores-oled-toast.error {
  border-color: rgba(255, 68, 68, 0.7);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 68, 68, 0.35);
  background: linear-gradient(135deg, #0B0E14 0%, rgba(255, 68, 68, 0.1) 100%);
}

.creadores-oled-toast.warning {
  border-color: rgba(255, 183, 3, 0.7);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 183, 3, 0.35);
  background: linear-gradient(135deg, #0B0E14 0%, rgba(255, 183, 3, 0.1) 100%);
}

.input-highlight-neon {
  border-color: #00F0FF !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5) !important;
  animation: neonGlowInput 1.5s ease-in-out;
}

@keyframes neonGlowInput {
  0% { box-shadow: 0 0 0 rgba(0, 240, 255, 0); }
  50% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.7); }
  100% { box-shadow: 0 0 0 rgba(0, 240, 255, 0); }
}

@media (max-width: 1080px) {
  .creadores-streamers-bento-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .creadores-streamers-bento-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .streamer-bento-card {
    padding: 20px 16px;
    gap: 16px;
  }

  .sbc-profile-block {
    gap: 12px;
  }

  .sbc-avatar-wrapper {
    width: 64px;
    height: 64px;
  }

  .sbc-username {
    font-size: 1.05rem;
  }

  .sbb-code-text {
    font-size: 1.2rem;
  }

  .sbc-actions-grid {
    flex-direction: column;
    width: 100%;
  }

  .sbc-btn-copy,
  .sbc-btn-apply {
    width: 100%;
  }

  .creadores-oled-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: calc(100vw - 32px);
  }
}

/* BENTO GRID 5 PILARES */
.creadores-bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
}

.creadores-bento-card {
  background: rgba(24, 24, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: none !important;
  transition: all 0.25s ease;
}

.creadores-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(124, 58, 237, 0.15);
}

.creadores-bento-card.bento-card-highlight {
  border-color: rgba(255, 215, 0, 0.35);
  background: linear-gradient(145deg, rgba(32, 28, 48, 0.85) 0%, rgba(20, 20, 28, 0.9) 100%);
}

.cbc-badge-top {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.cbc-badge-top.gold {
  background: rgba(255, 215, 0, 0.15);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.cbc-badge-top.purple {
  background: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.cbc-badge-top.cyan {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.cbc-badge-top.emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.cbc-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.cbc-icon-wrap.gold { background: rgba(255, 215, 0, 0.12); border: 1px solid rgba(255, 215, 0, 0.25); }
.cbc-icon-wrap.purple { background: rgba(124, 58, 237, 0.15); border: 1px solid rgba(124, 58, 237, 0.3); }
.cbc-icon-wrap.cyan { background: rgba(0, 240, 255, 0.12); border: 1px solid rgba(0, 240, 255, 0.25); }
.cbc-icon-wrap.emerald { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.25); }

.cbc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.cbc-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #A1A1AA;
  margin: 0;
}

.cbc-text strong {
  color: #E4E4E7;
}

.cbc-meta-pill {
  margin-top: auto;
  background: rgba(11, 14, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
}

.cbc-meta-pill span {
  color: #71717A;
}

.cbc-meta-pill strong {
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
}

/* =========================================================================
   BÓVEDA SEMANAL DE CREADORES (#boveda-creadores)
   Gamer Dark OLED (#0B0E14) · Acentos Neón Oro / Púrpura / Cian
   ========================================================================= */

.boveda-creadores-section {
  position: relative;
  width: 100%;
}

.boveda-creadores-countdown-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 222, 0, 0.08);
  border: 1px solid rgba(255, 222, 0, 0.3);
  padding: 8px 18px;
  border-radius: 9999px;
  margin-top: 10px;
  backdrop-filter: none !important;
}

.bcc-clock-ico {
  font-size: 1.1rem;
}

.bcc-clock-txt {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  color: #E4E4E7;
  letter-spacing: 0.5px;
}

.bcc-clock-txt strong {
  color: #FFDE00;
  font-weight: 700;
}

.bcc-clock-txt em {
  color: #94A3B8;
  font-style: normal;
}

.boveda-creadores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  width: 100%;
  margin-top: 24px;
  box-sizing: border-box;
}

.boveda-slot-card {
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.boveda-slot-card:hover {
  transform: translateY(-4px);
}

/* Variantes temáticas de Slots */
.boveda-slot-card.slot-card-gold {
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.08);
}
.boveda-slot-card.slot-card-gold:hover {
  border-color: #FFDE00;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 222, 0, 0.25);
}

.boveda-slot-card.slot-card-purple {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.08);
}
.boveda-slot-card.slot-card-purple:hover {
  border-color: #C084FC;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 30px rgba(168, 85, 247, 0.25);
}

.boveda-slot-card.slot-card-cyan {
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 240, 255, 0.06);
}
.boveda-slot-card.slot-card-cyan:hover {
  border-color: #00F0FF;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 26px rgba(0, 240, 255, 0.22);
}

.bsc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.bsc-slot-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #71717A;
  letter-spacing: 1px;
}

.bsc-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bsc-badge.badge-gold {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid #FFD700;
  color: #FFDE00;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.bsc-badge.badge-purple {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid #C084FC;
  color: #E9D5FF;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.bsc-badge.badge-cyan {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.bsc-img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background: radial-gradient(circle at center, rgba(30, 36, 52, 0.6) 0%, rgba(11, 14, 20, 0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.bsc-img-aura {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  filter: none !important;
  pointer-events: none;
}

.bsc-img-aura.aura-gold { background: rgba(255, 215, 0, 0.25); }
.bsc-img-aura.aura-purple { background: rgba(168, 85, 247, 0.25); }
.bsc-img-aura.aura-cyan { background: rgba(0, 240, 255, 0.22); }

.bsc-img {
  max-width: 90%;
  max-height: 85%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}

.boveda-slot-card:hover .bsc-img {
  transform: scale(1.05);
}

.bsc-stock-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
  backdrop-filter: none;
}

.bsc-stock-tag.tag-clean {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #FFDE00;
}

.bsc-stock-tag.tag-stock {
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: #00E676;
}

.bsc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bsc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  letter-spacing: 0.5px;
}

.bsc-desc {
  font-size: 0.85rem;
  color: #A1A1AA;
  line-height: 1.45;
  margin: 0 0 16px 0;
  min-height: 48px;
}

.bsc-pricing-box {
  background: rgba(18, 22, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  margin-top: auto;
  margin-bottom: 14px;
}

.bsc-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bsc-price-label {
  font-size: 0.78rem;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bsc-price-values {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bsc-price-old {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: #71717A;
  text-decoration: line-through;
}

.bsc-price-current {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.bsc-price-current.price-gold { color: #FFDE00; }
.bsc-price-current.price-purple { color: #C084FC; }
.bsc-price-current.price-cyan { color: #00F0FF; }

.bsc-price-sub {
  font-size: 0.72rem;
  color: #94A3B8;
  margin-top: 4px;
}

.bsc-claim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.bsc-claim-btn.btn-gold {
  background: linear-gradient(135deg, #FFDE00 0%, #EAB308 100%);
  color: #0B0E14;
  box-shadow: 0 4px 16px rgba(255, 222, 0, 0.3);
}
.bsc-claim-btn.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 222, 0, 0.5);
}

.bsc-claim-btn.btn-purple {
  background: linear-gradient(135deg, #A855F7 0%, #7E22CE 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}
.bsc-claim-btn.btn-purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(168, 85, 247, 0.5);
}

.bsc-claim-btn.btn-cyan {
  background: linear-gradient(135deg, #00F0FF 0%, #0099FF 100%);
  color: #0B0E14;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.25);
}
.bsc-claim-btn.btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 240, 255, 0.45);
}

.bsc-claim-btn:active {
  transform: translateY(1px);
}

@media (max-width: 1080px) {
  .boveda-creadores-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 680px) {
  .boveda-creadores-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .boveda-slot-card {
    padding: 16px;
  }

  .bsc-img-wrap {
    height: 140px;
  }
}

/* =========================================================================
   SUITE DE HERRAMIENTAS EN VIVO PARA STREAMERS (AAA GAMER DARK)
   OBS Radar · Live Alerts 60 FPS · Live Ticker · Flash Drops · Streamer Shield
   ========================================================================= */

.creadores-live-suite-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Mockup de Monitor OBS a 60 FPS */
.obs-mockup-frame {
  background: #0D1017;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 240, 255, 0.12);
  position: relative;
  box-sizing: border-box;
}

.obs-mockup-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(18, 22, 32, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: #94A3B8;
  gap: 12px;
  flex-wrap: wrap;
}

.obs-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.obs-dot-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.5);
  padding: 3px 9px;
  border-radius: 9999px;
  color: #FF4D4D;
  font-weight: 700;
  font-size: 0.72rem;
}

.obs-dot-pulse {
  width: 7px;
  height: 7px;
  background: #EF4444;
  border-radius: 50%;
  box-shadow: 0 0 8px #EF4444;
  animation: none !important; /* 0% GPU idle */
}

.obs-spec-tag {
  color: #00F0FF;
  font-weight: 600;
}

.obs-screen-canvas {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: radial-gradient(circle at center, rgba(17, 24, 39, 0.8) 0%, #080A0F 100%);
  overflow: hidden;
  box-sizing: border-box;
}

.obs-screen-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.obs-game-watermark {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Alerta Neón 3D Flotante */
.obs-alert-preview {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, rgba(20, 26, 40, 0.95) 0%, rgba(11, 14, 22, 0.98) 100%);
  border: 1.5px solid #FFD700;
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.35);
  animation: none !important; /* 0% GPU idle */
  max-width: 440px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.obs-alert-preview.alert-active-flash {
  animation: alertBurst 0.6s ease forwards;
  border-color: #00F0FF;
  box-shadow: 0 0 45px rgba(0, 240, 255, 0.65), 0 16px 40px rgba(0, 0, 0, 0.9);
}

@keyframes floatAlertBanner {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes alertBurst {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

.oap-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFD700 0%, #D97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.45);
  flex-shrink: 0;
}

.oap-text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.oap-headline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.oap-headline strong {
  color: #00F0FF;
}

.oap-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 9999px;
  padding: 3px 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #FFDE00;
  letter-spacing: 0.5px;
  width: fit-content;
}

/* Barra inferior con botón de demo interactiva */
.obs-mockup-footer {
  padding: 16px 20px;
  background: rgba(14, 18, 26, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-demo-obs-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFDE00 0%, #F59E0B 100%);
  color: #0B0E14;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 222, 0, 0.35);
  transition: all 0.2s ease;
}

.btn-demo-obs-alert:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 222, 0, 0.55);
}

.obs-footer-note {
  font-size: 0.76rem;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Columna de tarjetas de herramientas */
.live-tools-cards-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.live-tool-card {
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.live-tool-card:hover {
  border-color: rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 240, 255, 0.08);
}

.ltc-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ltc-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ltc-title-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ltc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.3px;
}

.ltc-sub {
  font-size: 0.76rem;
  color: #00F0FF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ltc-desc {
  font-size: 0.86rem;
  color: #A1A1AA;
  line-height: 1.5;
  margin: 0;
}

.ltc-preview-box {
  background: rgba(18, 22, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
}

/* Banner de Cupos Exclusivos Moderno */
.creadores-plazas-card-modern {
  width: 100%;
  max-width: 920px;
  background: linear-gradient(135deg, rgba(16, 22, 36, 0.9) 0%, rgba(10, 14, 22, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 18px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 240, 255, 0.1);
  box-sizing: border-box;
  margin-top: 8px;
  flex-wrap: wrap;
}

.cpm-left-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
  flex: 1;
}

.cpm-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.cpm-desc {
  font-size: 0.82rem;
  color: #94A3B8;
  line-height: 1.4;
  margin: 0;
}

.cpm-badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cpm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.cpm-badge.badge-active {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34D399;
}

.cpm-badge.badge-waiting {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #FBBF24;
}

/* Tabs de Categorías en Bóveda Gamer */
.boveda-tabs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 14px;
  box-sizing: border-box;
}

.boveda-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(18, 22, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #A1A1AA;
  padding: 8px 18px;
  min-height: 44px;
  box-sizing: border-box;
  border-radius: 9999px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.boveda-tab-btn:hover {
  border-color: rgba(0, 240, 255, 0.4);
  color: #FFFFFF;
}

.boveda-tab-btn.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

/* Arsenal Permanente de Streaming */
.boveda-permanent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  margin-top: 24px;
  box-sizing: border-box;
}

.boveda-permanent-card {
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, border-color 0.25s ease;
  box-sizing: border-box;
}

.boveda-permanent-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.35);
}

.bpc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bpc-icon {
  font-size: 1.8rem;
}

.bpc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.3px;
}

.bpc-desc {
  font-size: 0.82rem;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0;
}

.bpc-tier-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #C084FC;
}

@media (max-width: 990px) {
  .creadores-live-suite-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .boveda-permanent-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .creadores-plazas-card-modern {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .cpm-badges-row {
    width: 100%;
    justify-content: flex-start;
  }
  .obs-alert-preview {
    padding: 14px 16px;
    gap: 12px;
  }
  .oap-icon-box {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
  .oap-headline {
    font-size: 0.95rem;
  }
  .obs-mockup-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-demo-obs-alert {
    width: 100%;
  }
}

/* =========================================================================
   TEASER BENTO HOME: PROGRAMA DE CREADORES (render.js)
   Gamer Dark OLED (#0B0E14) · Zero Overflow (360px - 390px)
   ========================================================================= */

.inicio-creadores-teaser-section {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 8px 24px 24px 24px !important;
  box-sizing: border-box !important;
}

.creadores-teaser-bento-card {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 20, 32, 0.95) 0%, #0B0E14 100%);
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65), 0 0 28px rgba(0, 240, 255, 0.12);
  overflow: hidden;
  box-sizing: border-box;
  backdrop-filter: none !important;
}

.ctb-glow-aura {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(0, 240, 255, 0.08) 50%, transparent 70%);
  pointer-events: none;
}

.ctb-inner-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ctb-main-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ctb-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ctb-pill-gold {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid #FFD700;
  color: #FFDE00;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.ctb-pill-cyan {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid #00F0FF;
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.ctb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.25;
}

.ctb-description {
  font-size: 0.95rem;
  color: #D1D5DB;
  line-height: 1.5;
  margin: 0;
}

.ctb-pills-rotation {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ctb-rotation-label {
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ctb-rotation-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ctb-chip {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

.ctb-chip.chip-gold {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #FFDE00;
}

.ctb-chip.chip-purple {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #E9D5FF;
}

.ctb-chip.chip-cyan {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
}

.ctb-cta-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.ctb-perks-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: rgba(11, 14, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
}

.ctb-perk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.cpi-ico {
  font-size: 1.2rem;
}

.cpi-txt {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #E4E4E7;
  line-height: 1.2;
}

.ctb-btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00F0FF 0%, #0077FF 100%);
  color: #0B0E14;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.35);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.ctb-btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 240, 255, 0.55);
  color: #0B0E14;
}

.ctb-btn-action:active {
  transform: translateY(1px);
}

@media (max-width: 900px) {
  .inicio-creadores-teaser-section {
    padding: 8px 16px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ctb-inner-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .creadores-teaser-bento-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  .ctb-title {
    font-size: 1.3rem;
  }

  .ctb-description {
    font-size: 0.88rem;
  }

  .ctb-perks-box {
    gap: 8px;
    padding: 10px;
  }

  .cpi-txt {
    font-size: 0.75rem;
  }

  .ctb-btn-action {
    padding: 12px 16px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .inicio-creadores-teaser-section {
    padding: 6px 12px 20px 12px !important;
  }

  .ctb-perks-box {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ctb-perk-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
  }

  .ctb-rotation-chips {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .ctb-chip {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* SIMULADOR INTERACTIVO GAMER */
.creadores-simulador-card {
  background: linear-gradient(135deg, rgba(24, 20, 42, 0.85) 0%, rgba(14, 18, 28, 0.95) 100%);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(124, 58, 237, 0.1);
  backdrop-filter: none !important;
}

.sim-controls-pane {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sim-field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sim-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #E4E4E7;
}

.sim-label-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.sim-range-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #1F2430;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.sim-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFD700;
  box-shadow: 0 0 12px #FFD700;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.sim-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.sim-range-marks {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #71717A;
}

.sim-tier-indicator-box {
  background: rgba(11, 14, 20, 0.75);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stib-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFD700;
}

.stib-rate {
  font-size: 0.85rem;
  color: #34D399;
  font-weight: 600;
}

/* RESULTADOS DEL SIMULADOR */
.sim-results-pane {
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sim-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.srh-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.srh-badge {
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  border-radius: 9999px;
  padding: 3px 10px;
}

.sim-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sim-res-box {
  background: rgba(24, 28, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sim-res-box.highlight-gold {
  border-color: rgba(255, 215, 0, 0.35);
  background: rgba(36, 32, 20, 0.5);
  grid-column: 1 / -1;
}

.sim-res-box.highlight-cyan {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(14, 32, 42, 0.5);
  grid-column: 1 / -1;
}

.srb-ico {
  font-size: 1.3rem;
  line-height: 1;
}

.srb-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.srb-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #71717A;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.srb-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #F5F5F7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srb-sub {
  font-size: 0.75rem;
  color: #A1A1AA;
}

.sim-cta-row {
  margin-top: auto;
  display: flex;
}

.sim-claim-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #7C3AED 0%, #00F0FF 100%);
  color: #FFFFFF;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.sim-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 240, 255, 0.5);
}

/* NIVELES DE CREADOR (TIERS GRID) */
.creadores-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  width: 100%;
}

.creador-tier-card {
  background: rgba(24, 24, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: none !important;
  transition: all 0.25s ease;
}

.creador-tier-card:hover {
  transform: translateY(-4px);
}

.creador-tier-card.popular {
  border-color: rgba(0, 240, 255, 0.4);
  background: linear-gradient(145deg, rgba(20, 32, 48, 0.85) 0%, rgba(18, 24, 34, 0.95) 100%);
  box-shadow: 0 12px 36px rgba(0, 240, 255, 0.15);
}

.creador-tier-card.tier-black {
  background: linear-gradient(145deg, rgba(16, 16, 24, 0.95) 0%, rgba(28, 22, 10, 0.95) 100%);
  border: 1px solid rgba(255, 222, 0, 0.45);
  box-shadow: 0 12px 36px rgba(255, 222, 0, 0.12);
}

.creador-tier-card.tier-elite {
  background: linear-gradient(145deg, rgba(26, 22, 14, 0.85) 0%, rgba(18, 18, 24, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.creador-tier-card.tier-aspirante {
  background: linear-gradient(145deg, rgba(24, 18, 34, 0.85) 0%, rgba(18, 18, 24, 0.95) 100%);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.ctc-popular-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #00F0FF 0%, #7C3AED 100%);
  color: #0B0E14;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.ctc-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.ctc-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  align-self: flex-start;
}

.ctc-badge.aspirante { background: rgba(168, 85, 247, 0.2); color: #C084FC; border: 1px solid rgba(168, 85, 247, 0.5); }
.ctc-badge.bronze { background: rgba(205, 127, 50, 0.2); color: #E5A65D; border: 1px solid rgba(205, 127, 50, 0.4); }
.ctc-badge.silver { background: rgba(192, 192, 192, 0.2); color: #E2E8F0; border: 1px solid rgba(192, 192, 192, 0.4); }
.ctc-badge.elite { background: rgba(245, 158, 11, 0.2); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.5); }
.ctc-badge.gold { background: rgba(255, 215, 0, 0.2); color: #FFD700; border: 1px solid rgba(255, 215, 0, 0.4); }
.ctc-badge.black { background: linear-gradient(135deg, rgba(255, 222, 0, 0.25) 0%, rgba(0, 0, 0, 0.7) 100%); color: #FFDE00; border: 1px solid rgba(255, 222, 0, 0.6); }

.ctc-season-combo-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 222, 0, 0.3);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 4px;
}

.ctc-scb-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #FFDE00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2px;
}

.ctc-scb-val {
  font-size: 0.84rem;
  color: #F8FAFC;
  font-weight: 600;
  line-height: 1.3;
}

.ctc-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.ctc-rate {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #FFFFFF;
}

.ctc-rate small {
  font-size: 0.9rem;
  font-weight: 600;
  color: #A1A1AA;
}

.ctc-req {
  font-size: 0.8rem;
  color: #71717A;
}

.ctc-perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.88rem;
  color: #C7CBD6;
}

.ctc-perks-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.ctc-perks-list .chk {
  color: #00FF88;
  font-weight: 700;
}

.ctc-footer {
  margin-top: auto;
}

.ctc-btn {
  display: block;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ctc-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.ctc-btn.primary {
  background: linear-gradient(135deg, #00F0FF 0%, #7C3AED 100%);
  border: none;
  color: #0B0E14;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.3);
}

.ctc-btn.primary:hover {
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
  transform: translateY(-2px);
}

/* COMPARACIÓN (PSICOLOGÍA GAMER) */
.creadores-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.compare-card {
  background: rgba(24, 24, 32, 0.75);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: none !important;
}

.compare-card.old-way {
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.compare-card.new-way {
  border: 1px solid rgba(0, 255, 136, 0.35);
  background: linear-gradient(145deg, rgba(16, 36, 28, 0.7) 0%, rgba(20, 24, 32, 0.85) 100%);
}

.compare-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.compare-head h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.compare-list.bad li {
  color: #A1A1AA;
  position: relative;
  padding-left: 20px;
}

.compare-list.bad li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #EF4444;
  font-weight: 700;
}

.compare-list.good li {
  color: #E4E4E7;
  position: relative;
  padding-left: 20px;
}

.compare-list.good li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #00FF88;
  font-weight: 700;
}

/* PASO A PASO (STEPS) */
.creadores-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.creador-step-box {
  background: rgba(24, 24, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: none !important;
}

.step-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #7C3AED;
  line-height: 1;
}

.creador-step-box h4 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.creador-step-box p {
  font-size: 0.85rem;
  color: #A1A1AA;
  line-height: 1.45;
  margin: 0;
}

/* FORMULARIO DE POSTULACIÓN */
.creadores-form-card {
  background: linear-gradient(135deg, rgba(24, 20, 42, 0.9) 0%, rgba(14, 18, 28, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  backdrop-filter: none !important;
}

.cfc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.cfc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.cfc-desc {
  font-size: 0.9rem;
  color: #A1A1AA;
  margin: 0;
  max-width: 600px;
}

.creadores-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cform-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cform-group.full-width {
  grid-column: 1 / -1;
}

.cform-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #E4E4E7;
}

.cinput-wrap {
  display: flex;
  align-items: center;
  background: #121622;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.cinput-wrap:focus-within {
  border-color: #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.ci-prefix {
  padding: 0 12px;
  color: #71717A;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  height: 44px;
  display: flex;
  align-items: center;
}

.cinput, .cselect, .ctextarea {
  width: 100%;
  height: 44px;
  background: #121622;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.cinput:focus, .cselect:focus, .ctextarea:focus {
  border-color: #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.cinput-wrap .cinput {
  border: none;
  border-radius: 0;
}

.cselect-inline {
  background: #181E2E;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 12px;
  height: 44px;
  outline: none;
  cursor: pointer;
}

.inline-grow {
  flex: 1;
}

.ctextarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}

.form-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.csubmit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #0B0E14;
  border: none;
  padding: 14px 36px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.4);
  transition: all 0.2s ease;
}

.csubmit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6);
}

.csubmit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-feedback-box {
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.5;
}

.form-feedback-box.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10B981;
  color: #D1FAE5;
}

.form-feedback-box.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #EF4444;
  color: #FEE2E2;
}

/* FAQ CREADORES */
.creadores-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cfaq-card {
  background: rgba(24, 24, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: none !important;
}

.cfaq-card h4 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #00F0FF;
  margin: 0;
}

.cfaq-card p {
  font-size: 0.85rem;
  color: #A1A1AA;
  line-height: 1.5;
  margin: 0;
}

/* RESPONSIVE MÓVIL (ZERO OVERFLOW) */
@media (max-width: 990px) {
  .creadores-simulador-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .creadores-tiers-grid {
    grid-template-columns: 1fr;
  }

  .creadores-steps-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .creadores-page-main {
    padding: 16px 12px 64px 12px;
  }

  .creadores-hero-banner {
    padding: 32px 16px;
  }

  .creadores-compare-grid,
  .creadores-faq-grid,
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .sim-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .creadores-steps-grid {
    grid-template-columns: 1fr;
  }

  .creadores-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .creadores-btn {
    width: 100%;
  }

  .creadores-form-card {
    padding: 24px 16px;
  }

  .csubmit-btn {
    width: 100%;
  }

  .bsc-badge {
    font-size: 0.68rem;
    letter-spacing: 0;
    padding: 3px 8px;
  }
}

/* ==========================================================================
   OPTIMIZACIONES RESPONSIVE MULTIPANTALLA & TOUCH TARGETS (WCAG AAA)
   ========================================================================== */

/* Contención estricta para evitar scroll horizontal por resplandores o sombras neón */
.neon-contained,
.arena-tiers-incentive-bar,
.creadores-streamers-bento-grid,
.boveda-creadores-grid,
.catalogo-bento-grid,
.perfil-bento-grid,
.packs-bento-grid,
.valores-bento-grid,
.robux-methods-bento-grid {
  overflow-x: clip !important;
  contain: paint;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Blindaje de contención y alineación idéntica para secciones Bento de Sorteos y Creadores */
.inicio-ganador-stream-section,
.inicio-creadores-teaser-section {
  overflow-x: clip !important;
  contain: paint;
  max-width: 1240px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Target táctil mínimo de 44px en móvil para botones interactivos y cabecera */
@media (max-width: 900px) {
  .gaming-header {
    min-height: 54px !important;
  }

  .gaming-header .menu-toggle,
  .gaming-header .search-toggle,
  .gaming-header .icon-btn,
  .gaming-header .notif-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .gaming-header .cart-btn {
    display: none !important;
  }

  .gaming-header .brand-badge-shop {
    display: none !important;
  }

  .gaming-header .login-btn {
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
    border-radius: 16px !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .header-actions {
    gap: 4px !important;
  }

  .gaming-header .currency-toggle,
  .gaming-header .currency-selector-wrap {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .gaming-header .currency-pill-btn,
  .gaming-header .btn-currency-selector {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .gaming-header .btn-search-clear,
  .btn-search-clear {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
  }

  .rank-filter-btn {
    min-height: 44px !important;
  }
}

/* Grilla en 1 columna y ajustes de compactación para viewports ultra-compactos (<= 360px) */
@media (max-width: 360px) {
  .atib-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .atib-card {
    padding: 10px 8px !important;
  }

  .gaming-header {
    padding: 0 4px !important;
  }

  .gaming-header .header-brand {
    max-width: none !important;
    flex: 0 1 auto !important;
    gap: 4px !important;
  }

  .gaming-header .brand-title {
    font-size: 13px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .gaming-header .header-actions {
    gap: 4px !important;
    min-width: 0 !important;
  }

  .gaming-header .menu-toggle,
  .gaming-header .search-toggle,
  .gaming-header .currency-pill-btn,
  .gaming-header .btn-currency-selector {
    min-height: 44px !important;
  }

  /* Marquesina Drops en Pantallas Ultra-Compactas (<= 360px) */
  .live-drops-ticker {
    padding: 0 4px !important;
    gap: 4px !important;
    height: 32px !important;
  }

  .ticker-item {
    font-size: 10px !important;
    gap: 3px !important;
  }

  .ti-icon {
    font-size: 12px !important;
  }

  .ti-user {
    max-width: 75px !important;
  }

  .ticker-cta-btn {
    padding: 2px 5px !important;
    font-size: 10px !important;
  }
}

/* ==========================================================================
   FASE 1 MASTER ARCHITECTURE: CONTENEDOR GLOBAL, NAVBAR & HERO BANNER
   Optimizado para Tablets (600px - 1200px), especial foco en 901x642 y 768x1024.
   ========================================================================== */

/* 1. BLINDAJE GLOBAL ZERO-OVERFLOW (HTML & BODY) */
html,
body.site-body {
  overflow-x: clip !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. RESOLUCIÓN DE CONFLICTO DE BREAKPOINTS (<= 960px / DOCK INFERIOR ACTIVO) */
@media (max-width: 960px) {
  /* Erradicación de la franja fantasma de 76px: contenedor al 100% de ancho */
  .site-main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 20px)) !important;
  }
}

/* 3. HERO BANNER ELÁSTICO & ADAPTABLE A LANDSCAPE / TABLETS (<= 1024px, 901x642 & 768x1024) */
@media (max-width: 1024px) {
  .hero-banner-wrap {
    padding: clamp(10px, 2vh, 18px) clamp(12px, 2.5vw, 24px) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-banner-inner {
    min-height: clamp(220px, 36vh, 380px) !important;
    max-height: 480px !important;
    height: auto !important;
    padding: clamp(16px, 3vh, 28px) clamp(14px, 2.5vw, 24px) !important;
    box-sizing: border-box !important;
  }

  .hero-jailbreak-title {
    font-size: clamp(28px, 4.5vw, 52px) !important;
    line-height: 1.06 !important;
    margin-bottom: clamp(6px, 1.2vh, 12px) !important;
    text-shadow: 0 0 25px rgba(0, 0, 0, 0.9) !important;
  }

  .hero-title-slash {
    width: clamp(80px, 15vw, 130px) !important;
    height: 3.5px !important;
    margin: 8px auto 0 !important;
  }

  .hero-tagline {
    font-size: clamp(12px, 1.7vw, 14.5px) !important;
    line-height: 1.35 !important;
    margin-bottom: clamp(10px, 1.8vh, 16px) !important;
    max-width: min(540px, 92%) !important;
  }

  .hero-trust-bar {
    gap: clamp(6px, 1.2vw, 12px) !important;
    margin-bottom: clamp(10px, 1.8vh, 16px) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .hero-trust-pill {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }

  /* TICKER DE CATEGORÍAS FLUIDO ZERO-OVERFLOW: scroll horizontal suave con scrollbar oculta */
  .hero-categories-ticker {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: clamp(6px, 1vw, 10px) !important;
    padding: 7px 14px !important;
    scroll-padding-inline: 14px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 9999px !important;
  }

  .hero-categories-ticker::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .hero-categories-ticker .ticker-pill {
    flex: 0 0 auto !important;
    font-size: clamp(11.5px, 1.4vw, 13px) !important;
    padding: 5px 12px !important;
    white-space: nowrap !important;
  }

  .hero-categories-ticker .ticker-dot {
    display: none !important;
  }
}

/* 4. NAVBAR TABLET (600px - 1024px, incluyendo 901x642 y 768x1024): FLUJO LIMPIO Y ACCIONES ALINEADAS */
@media (min-width: 600px) and (max-width: 1024px) {
  .gaming-header {
    height: 52px !important;
    padding: 0 clamp(10px, 2vw, 18px) !important;
    gap: clamp(6px, 1.2vw, 12px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .gaming-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .gaming-header .header-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .gaming-header .logo-badge {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .brand-title {
    font-size: clamp(13px, 1.8vw, 15px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  .gaming-header .brand-sub {
    display: none !important;
  }

  .gaming-header .header-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(4px, 1vw, 8px) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .header-actions .search-toggle {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 215, 0, 0.12) !important;
    border: 1px solid rgba(255, 215, 0, 0.45) !important;
    color: #FFD700 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .gaming-header .header-actions .search-toggle svg {
    width: 17px !important;
    height: 17px !important;
  }

  .gaming-header .currency-toggle,
  .gaming-header .currency-selector-wrap {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .btn-currency-selector,
  .gaming-header .currency-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    padding: 0 clamp(6px, 1vw, 10px) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #A6B4C9 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .gaming-header .cart-btn:hover {
    color: #FFD700 !important;
    border-color: #FFD700 !important;
  }

  .gaming-header .notif-wrapper {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .notif-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #A6B4C9 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .gaming-header .user-area {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    padding: 0 clamp(8px, 1.2vw, 14px) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .gaming-header .login-btn:hover {
    background: #FFD700 !important;
    color: #0E1017 !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4) !important;
  }

  .gaming-header .user-pill-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .user-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .gaming-header .user-pill-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    border: 1.5px solid #FFD700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
  }

  .gaming-header .user-pill-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   FASE 2 MASTER ARCHITECTURE: GRILLAS BENTO, TARJETAS & TABLAS DE VALORES
   Responsive Tablet (600px a 1200px), especial foco en 901x642 y 768x1024.
   ========================================================================== */

/* 1. TABLA DE VALORES EN TABLET (601px a 1080px): 2 COLUMNAS BALANCEADAS (NO CELULAR GIGANTE) */
@media (min-width: 601px) and (max-width: 1080px) {
  .vtable-body {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .vrow-item {
    padding: 12px 14px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .vtd-item-title {
    font-size: 13.5px !important;
  }

  .vtd-item-sub {
    font-size: 10.5px !important;
  }

  .vtd-val .vval-badge-main {
    font-size: 15.5px !important;
  }

  .vrow-meta {
    gap: 5px !important;
  }

  .vrow-meta .vcat-badge,
  .vrow-meta .vtend-badge-pill {
    font-size: 10px !important;
    padding: 2.5px 6px !important;
  }
}

/* 2. CATÁLOGO Y BENTO GRIDS FLUIDOS EN TABLET (600px a 1200px, FOCO EN 901px) */
@media (min-width: 600px) and (max-width: 1200px) {
  .catalogo-bento-grid,
  .catalogo-modern-grid,
  .populares-section .grid,
  .destacados-section .grid,
  .populares-grid,
  .catalogo .grid,
  .home-section .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: clamp(12px, 1.6vw, 18px) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .catalogo-armory-bento {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .catalogo-hogar-panoramic {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Padding simétrico interior y estética Gamer Dark OLED */
  .producto-card,
  .catalogo-bento-card,
  .bento-cat-card,
  .sub-cat-card,
  .item-card,
  .cat-card {
    padding: clamp(12px, 1.6vw, 16px) !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .producto-body {
    padding: 12px 0 0 0 !important;
    gap: 8px !important;
  }

  .producto-nombre {
    font-size: clamp(14px, 1.8vw, 16px) !important;
    line-height: 1.25 !important;
  }

  /* Alineación simétrica de badges de stock (clean / duped / disponibilidad) */
  .stock-badge,
  .dupe-badge,
  .clean-badge,
  .custodia-stock,
  .bs-stock,
  .in-stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 3px 9px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   FASE 3 MASTER ARCHITECTURE: BUSCADOR, FILTROS, MODALES & FOOTER
   Responsive Tablet (600px a 1200px), especial foco en 901x642 y 768x1024.
   ========================================================================== */

/* 1. FILTROS Y BÚSQUEDA EN TABLET (600px - 1200px, INCLUYENDO 901px) */
@media (min-width: 600px) and (max-width: 1200px) {
  .catalogo-control-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(8px, 1.4vw, 14px) !important;
    padding: clamp(8px, 1.4vh, 12px) clamp(12px, 1.8vw, 18px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
  }

  .catalogo-chips-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 2px 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .catalogo-chips-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .cat-chip-btn {
    flex-shrink: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    touch-action: manipulation !important;
  }

  .catalogo-control-bar .cat-search-wrap,
  .catalogo-control-bar #catQuickSearch {
    min-height: 40px !important;
    height: 40px !important;
    max-width: min(280px, 35%) !important;
    flex-shrink: 0 !important;
  }

  .ranking-controls-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(8px, 1.2vw, 12px) !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ranking-controls-bar .rcb-search-wrap {
    flex: 0 1 260px !important;
    max-width: 280px !important;
    min-width: 160px !important;
  }

  .ranking-controls-bar .rcb-input {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 13px !important;
  }

  .ranking-controls-bar .rcb-filters-rail {
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  .ranking-controls-bar .rcb-filters-rail::-webkit-scrollbar {
    display: none !important;
  }

  .rank-filter-btn {
    min-height: 38px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
}

/* 2. MODALES Y POPUPS EN TABLET Y VIEWPORTS LANDSCAPE (~642px) */
@media (min-width: 600px) {
  .modal-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 2vh, 24px) !important;
    z-index: 100000 !important;
    box-sizing: border-box !important;
  }

  .modal-backdrop.abierto {
    display: flex !important;
  }

  .modal,
  .pack-modal-content,
  .mchart-modal-content,
  .picker-modal-content {
    box-sizing: border-box !important;
    max-width: min(92vw, 540px) !important;
    width: 100% !important;
    max-height: clamp(320px, 86vh, 580px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    padding: clamp(16px, 2.5vh, 24px) !important;
    border-radius: 18px !important;
    margin: auto !important;
  }
}

/* 3. FOOTER PROPORCIONADO EN TABLET (600px a 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {
  .pie-top {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: clamp(16px, 2.5vw, 28px) !important;
    max-width: 100% !important;
    padding: 0 clamp(12px, 2vw, 20px) !important;
    box-sizing: border-box !important;
  }

  .pie-marca {
    text-align: left !important;
  }

  .pie-tagline {
    max-width: 220px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  .pie-roblox-disclaimer {
    max-width: 220px !important;
    margin-top: 12px !important;
  }

  .pie-cols {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
    gap: 20px !important;
    text-align: left !important;
  }

  .pie-col h4 {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
  }

  .pie-col a {
    font-size: 0.82rem !important;
    gap: 6px !important;
    line-height: 1.4 !important;
  }
}









/* ==========================================================================
   PULSO DEL MERCADO: TOP ALZAS & OPORTUNIDADES (WALL STREET GAMER)
   ========================================================================== */
.valores-movers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 28px auto;
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .valores-movers-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.vmover-card {
  background: rgba(14, 18, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vmover-card.vmover-rising {
  border-top: 3px solid #10B981;
}

.vmover-card.vmover-dropping {
  border-top: 3px solid #EF4444;
}

.vmover-card:hover {
  transform: translateY(-2px);
}

.vmover-card.vmover-rising:hover {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.12);
}

.vmover-card.vmover-dropping:hover {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 16px 40px rgba(239, 68, 68, 0.12);
}

.vmover-card-header {
  margin-bottom: 14px;
}

.vmover-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.vmover-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 6px;
}

.vmover-tag.tag-rising {
  color: #10B981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.vmover-tag.tag-opportunity {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.vmover-live-pill {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vmover-title {
  font-size: 16px;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 3px 0;
  letter-spacing: -0.2px;
}

.vmover-subtitle {
  font-size: 12px;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

.vmover-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vmover-row-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: all 0.18s ease;
}

.vmover-row-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 222, 0, 0.25);
  transform: translateX(3px);
}

.vmover-rank-badge {
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  font-family: monospace, sans-serif;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.vmover-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #0B0E16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

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

.vmover-col-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.vmover-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vmover-item-cat {
  font-size: 11px;
  color: #64748B;
}

.vmover-col-val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.vmover-val-text {
  font-size: 13px;
  font-weight: 800;
  color: #FFDE00;
  font-family: monospace, sans-serif;
}

.vmover-delta-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
}

.vmover-delta-pill.delta-up {
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
}

.vmover-delta-pill.delta-down {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.12);
}

.vmover-col-cta {
  flex-shrink: 0;
  margin-left: 4px;
}

.vmover-stock-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.vmover-view-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* OPTIMIZACIÓN COMPACTA DE LA TABLA MAESTRA EN DESKTOP */
@media (min-width: 901px) {
  .valores-controls-card,
  .valores-table-card {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .vtable-header {
    padding: 10px 18px !important;
    font-size: 10.5px !important;
  }

  .vrow-item {
    padding: 8px 18px !important;
  }

  .vtd-thumb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
  }

  .vtd-item-title {
    font-size: 13px !important;
  }

  .vval-badge-main {
    font-size: 13px !important;
  }

  .btn-row-action {
    padding: 5px 9px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
}


/* ==========================================================================
   REDISEÑO VALORES HOME: COMPACTO 2 COLUMNAS (WALL STREET GAMER)
   ========================================================================== */
.valores-section {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px 20px !important;
  box-sizing: border-box !important;
}

.valores-home-grid-card {
  background: rgba(14, 18, 30, 0.94) !important;
  border: 1px solid rgba(0, 240, 255, 0.16) !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* 1. Telemetría y contextualización superior */
.vhgc-telemetry-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.vhgc-telemetry-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.vhgc-pulse-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #10B981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.vhgc-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 8px #10B981 !important;
  animation: none !important; /* 0% GPU idle */
}

.vhgc-sub-note {
  font-size: 12px !important;
  color: #94A3B8 !important;
}

.vhgc-telemetry-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.vhgc-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #CBD5E1 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
}

/* 2. Cuadrícula de 8 ítems en 2 columnas simétricas */
.valores-section .valores-lista {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 18px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Filas de ítems: layout horizontal estricto, sin colisiones */
.valores-section .valor-fila {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: rgba(20, 26, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.valores-section .valor-fila:hover {
  transform: translateY(-2px) !important;
  background: rgba(28, 36, 58, 0.88) !important;
  border-color: rgba(255, 222, 0, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 222, 0, 0.12) !important;
}

.valores-section .valor-pos {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #64748B !important;
  min-width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

.valores-section .valor-fila.rank-gold .valor-pos {
  color: #FFDE00 !important;
  background: rgba(255, 222, 0, 0.12) !important;
  border-color: rgba(255, 222, 0, 0.4) !important;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.25) !important;
}

.valores-section .valor-fila.rank-silver .valor-pos {
  color: #E2E8F0 !important;
  background: rgba(226, 232, 240, 0.12) !important;
  border-color: rgba(226, 232, 240, 0.4) !important;
  box-shadow: 0 0 10px rgba(226, 232, 240, 0.2) !important;
}

.valores-section .valor-fila.rank-bronze .valor-pos {
  color: #F59E0B !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

.valores-section .valor-thumb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #090C15 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
}

.valores-section .valor-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) !important;
}

/* Columna central: Nombre y Categoría con elipsis blindada */
.valores-section .valor-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.valores-section .valor-nombre {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #F8FAFC !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  display: block !important;
  word-break: normal !important;
}

.valores-section .valor-cat {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  word-break: normal !important;
}

/* Columna derecha: Monto y Tendencia */
.valores-section .valor-datos {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.valores-section .valor-monto {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFDE00 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  text-shadow: 0 0 10px rgba(255, 222, 0, 0.25) !important;
}

.valores-section .valor-delta {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-transform: uppercase !important;
}

.valores-section .valor-delta.estable {
  background: rgba(255, 222, 0, 0.1) !important;
  color: #FFDE00 !important;
  border: 1px solid rgba(255, 222, 0, 0.25) !important;
}

.valores-section .valor-delta.subiendo {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.valores-section .valor-delta.bajando {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.valores-section .valor-delta.fluctuando {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #A855F7 !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* 4. Footer CTA con los 2 botones simétricos al 100% */
.valores-section .valores-home-cta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 6px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-home-valores-main {
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.2), rgba(245, 158, 11, 0.15)) !important;
  color: #FFDE00 !important;
  border: 1px solid rgba(255, 222, 0, 0.45) !important;
  padding: 13px 22px !important;
  border-radius: 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 14px rgba(255, 222, 0, 0.15) !important;
}

.btn-home-valores-main:hover {
  background: linear-gradient(135deg, #FFDE00, #F59E0B) !important;
  color: #0B0E14 !important;
  box-shadow: 0 0 20px rgba(255, 222, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

.btn-home-valores-calc {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(124, 58, 237, 0.2)) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  padding: 13px 22px !important;
  border-radius: 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.12) !important;
}

.btn-home-valores-calc:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(124, 58, 237, 0.35)) !important;
  border-color: #00F0FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* 5. Responsive / Tablet & Mobile */
@media (max-width: 860px) {
  .valores-section .valores-lista {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .valores-section .valor-fila {
    display: flex !important;
  }
  .vhgc-telemetry-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .valores-section .valores-home-cta {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .valores-home-grid-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }
  .valores-section .valor-fila {
    display: flex !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .valores-section .valor-pos {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .valores-section .valor-thumb {
    width: 36px !important;
    height: 36px !important;
  }
  .valores-section .valor-nombre {
    font-size: 13.5px !important;
  }
  .valores-section .valor-cat {
    font-size: 10px !important;
  }
  .valores-section .valor-monto {
    font-size: 15px !important;
  }
  .valores-section .valor-delta {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}

/* ================== NUEVOS 4 TIERS ECONÓMICOS THEMOROTEX ================== */
.tier-subtitulo.olimpo { color: #FFD700; background: linear-gradient(90deg, rgba(255,215,0,0.22), rgba(255,215,0,0.05)); border-left: 4px solid #FFD700; box-shadow: 0 0 20px rgba(255,215,0,0.15); }
.tier-subtitulo.elite { color: #C084FC; background: linear-gradient(90deg, rgba(192,132,252,0.22), rgba(192,132,252,0.05)); border-left: 4px solid #A855F7; box-shadow: 0 0 20px rgba(168,85,247,0.15); }
.tier-subtitulo.accesible { color: #38BDF8; background: linear-gradient(90deg, rgba(56,189,248,0.2), rgba(56,189,248,0.05)); border-left: 4px solid #0284C7; }
.tier-subtitulo.obtenible { color: #34D399; background: linear-gradient(90deg, rgba(52,211,153,0.2), rgba(52,211,153,0.05)); border-left: 4px solid #10B981; }

.producto-card.tier-olimpo {
  border: 1.5px solid rgba(255, 215, 0, 0.45) !important;
  background: linear-gradient(165deg, rgba(16, 20, 32, 0.95), rgba(255, 215, 0, 0.05)) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(255, 215, 0, 0.04) !important;
}
.producto-card.tier-olimpo:hover {
  border-color: #FFD700 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 215, 0, 0.35) !important;
}

.producto-card.tier-elite {
  border: 1.5px solid rgba(192, 132, 252, 0.4) !important;
  background: linear-gradient(165deg, rgba(16, 20, 32, 0.95), rgba(168, 85, 247, 0.05)) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(168, 85, 247, 0.04) !important;
}
.producto-card.tier-elite:hover {
  border-color: #C084FC !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(168, 85, 247, 0.35) !important;
}

.producto-card.tier-accesible {
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  background: linear-gradient(165deg, rgba(16, 20, 32, 0.95), rgba(56, 189, 248, 0.04)) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(56, 189, 248, 0.03) !important;
}
.producto-card.tier-accesible:hover {
  border-color: #38BDF8 !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 22px rgba(56, 189, 248, 0.3) !important;
}

.producto-card.tier-obtenible {
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  background: linear-gradient(165deg, rgba(16, 20, 32, 0.95), rgba(16, 185, 129, 0.03)) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(16, 185, 129, 0.02) !important;
}
.producto-card.tier-obtenible:hover {
  border-color: #10B981 !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 20px rgba(16, 185, 129, 0.25) !important;
}

/* ==========================================================================
   BENTO SORTEO SEMANAL HERMOSO Y HERO VEHICLE STAGE (THEMOROTEX)
   ========================================================================== */

/* Alineación de ancho maestro */
.inicio-ganador-stream-section,
.inicio-creadores-teaser-section {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.ganador-stream-banner-card {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: 24px 28px !important;
}

.gsb-inner-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr !important;
  gap: 28px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
}

.gsb-main-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.gsb-action-row {
  margin: 4px 0 2px 0 !important;
}

.gsb-btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #FFDE00 0%, #FF9900 100%) !important;
  color: #0B0E14 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(255, 222, 0, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
}

.gsb-btn-action:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(255, 222, 0, 0.5) !important;
}

.gsb-perks-row-inline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}

.gsb-perk-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

/* Columna Derecha: Escenario Hero del Molten M12 */
.gsb-prize-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.gsb-hero-prize-stage {
  position: relative !important;
  width: 100% !important;
  background: radial-gradient(circle at center, rgba(255, 222, 0, 0.12) 0%, rgba(11, 14, 20, 0.8) 75%) !important;
  border: 1.5px solid rgba(255, 222, 0, 0.3) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 222, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.gsb-stage-aura {
  position: absolute !important;
  top: 15% !important;
  left: 20% !important;
  width: 60% !important;
  height: 60% !important;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.25) 0%, transparent 70%) !important;
  filter: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.gsb-hero-prize-img-wrap {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 260px !important;
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.gsb-hero-prize-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px rgba(255, 222, 0, 0.45)) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gsb-hero-prize-stage:hover .gsb-hero-prize-img {
  transform: scale(1.08) translateY(-3px) !important;
}

.gsb-hero-prize-info {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
}

.gsb-hero-prize-eyebrow {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #FFDE00 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.gsb-hero-prize-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
}

@media (max-width: 860px) {
  .gsb-inner-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .gsb-prize-col {
    order: -1 !important;
  }
}


/* --- COMMERCIAL TIER BANNERS --- */
.tier-header-banner {
  background: rgba(15, 23, 42, 0.65);
  border-radius: 14px;
  padding: 12px 18px;
  margin: 20px 0 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}
.tier-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tier-pill-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}
.tier-pill-olimpo { background: rgba(255, 215, 0, 0.15); color: #FFD700; border: 1px solid rgba(255, 215, 0, 0.4); }
.tier-pill-elite { background: rgba(249, 115, 22, 0.15); color: #FB923C; border: 1px solid rgba(249, 115, 22, 0.4); box-shadow: 0 0 10px rgba(249, 115, 22, 0.2); }
.tier-pill-accesible { background: rgba(56, 189, 248, 0.15); color: #38BDF8; border: 1px solid rgba(56, 189, 248, 0.4); }
.tier-pill-obtenible { background: rgba(52, 211, 153, 0.15); color: #34D399; border: 1px solid rgba(52, 211, 153, 0.4); }

.tier-count-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-2, #94A3B8);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 6px;
}
.tier-header-banner .tier-subtitulo {
  margin: 0 0 6px 0 !important;
  border-radius: 8px;
}
.tier-header-sub {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.4;
}
.tier-header-sub strong {
  color: #F1F5F9;
  font-weight: 600;
}
.tier-banner-olimpo {
  border-left: 4px solid #FFD700 !important;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, rgba(14, 18, 28, 0.6) 100%) !important;
}
.tier-banner-elite {
  border-left: 4px solid #C084FC !important;
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.08) 0%, rgba(14, 18, 28, 0.6) 100%) !important;
}
.tier-banner-accesible {
  border-left: 4px solid #38BDF8 !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.08) 0%, rgba(14, 18, 28, 0.6) 100%) !important;
}
.tier-banner-obtenible {
  border-left: 4px solid #10B981 !important;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, rgba(14, 18, 28, 0.6) 100%) !important;
}


.stock-badge.badge-superventas {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(249, 115, 22, 0.25));
  color: #FFA500;
  border: 1px solid rgba(249, 115, 22, 0.5);
  font-weight: 800;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.25);
  animation: none !important; /* 0% GPU idle */
}
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(0.98); }
}

/* --- BADGES LIMPIOS GAMER DARK: TIERS & STOCK --- */
.tier-sello.tier-olimpo,
.tier-sello.tier-elite,
.tier-sello.tier-accesible,
.tier-sello.tier-obtenible,
.tier-sello.tier-premio-diamante {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  white-space: normal;
  text-transform: uppercase;
  box-sizing: border-box;
}

.tier-sello.tier-olimpo {
  color: #FFD700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

.tier-sello.tier-elite {
  color: #C084FC;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
}

.tier-sello.tier-accesible {
  color: #38BDF8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}

.tier-sello.tier-obtenible {
  color: #34D399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
}

.tier-sello.tier-premio-diamante {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.stock-badge.stock-bajo,
.stock-badge.hay,
.stock-badge.nohay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.5px;
  white-space: normal;
  box-sizing: border-box;
}

.stock-badge.stock-bajo {
  color: #FFA500;
  background: rgba(255, 165, 0, 0.14);
  border: 1px solid rgba(255, 165, 0, 0.45);
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.2);
}

.stock-badge.hay {
  color: #3DDC84;
  background: rgba(61, 220, 132, 0.12);
  border: 1px solid rgba(61, 220, 132, 0.4);
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.12);
}

.stock-badge.nohay {
  color: #F87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.12);
}

.producto-card .tier-sello.tier-olimpo,
.producto-card .tier-sello.tier-elite,
.producto-card .tier-sello.tier-accesible,
.producto-card .tier-sello.tier-obtenible,
.producto-card .tier-sello.tier-premio-diamante,
.producto-card .stock-badge.stock-bajo,
.producto-card .stock-badge.hay,
.producto-card .stock-badge.nohay {
  white-space: normal;
  border-radius: 6px;
  padding: 3px 8px;
}


/* --- CATALOG TIERS GRID --- */
.catalogo-tiers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1024px) {
  .catalogo-tiers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .catalogo-tiers-grid { grid-template-columns: 1fr; }
}

.cat-tier-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.cat-tier-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}
.ctc-olimpo { border-top: 3px solid #FFD700; background: linear-gradient(180deg, rgba(255, 215, 0, 0.06), rgba(15, 23, 42, 0.7)); }
.ctc-olimpo:hover { box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2); }

.ctc-elite { border-top: 3px solid #C084FC; background: linear-gradient(180deg, rgba(168, 85, 247, 0.1), rgba(15, 23, 42, 0.7)); }
.ctc-elite:hover { box-shadow: 0 8px 25px rgba(168, 85, 247, 0.25); }
.ctc-elite .ctc-badge.badge-hot { color: #C084FC; }

.ctc-accesible { border-top: 3px solid #38BDF8; background: linear-gradient(180deg, rgba(56, 189, 248, 0.06), rgba(15, 23, 42, 0.7)); }
.ctc-accesible:hover { box-shadow: 0 8px 25px rgba(56, 189, 248, 0.2); }

.ctc-obtenible { border-top: 3px solid #10B981; background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), rgba(15, 23, 42, 0.7)); }
.ctc-obtenible:hover { box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2); }

.ctc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ctc-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #CBD5E1;
}
.ctc-badge.badge-hot {
  color: #FFA500;
}
.ctc-tag {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  padding: 2px 7px;
  border-radius: 6px;
}
.ctc-title {
  font-size: 16px;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 6px 0;
}
.ctc-cars {
  font-size: 12px;
  color: #94A3B8;
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.ctc-link {
  font-size: 12px;
  font-weight: 700;
  color: #38BDF8;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s;
}
.cat-tier-card:hover .ctc-link {
  transform: translateX(4px);
}

/* ===== BARRA DE CONTROLES INTERACTIVOS DE CATEGORÍA & CRO ===== */
.cat-page-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px 40px;
  box-sizing: border-box;
  overflow-x: clip;
}

/* Cabecera Prolija de Categoría (Jerarquía Vertical Centrada) */
.cat-page-head,
.cat-page-container .tabs-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  margin: 14px auto 18px !important;
  max-width: 860px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

.cat-page-head .cat-eyebrow,
.cat-page-container .tabs-head .cat-eyebrow {
  margin: 0 0 4px 0 !important;
  display: inline-block !important;
}

.cat-page-head .tabs-titulo,
.cat-page-container .tabs-head .tabs-titulo {
  margin: 0 !important;
  font-size: 2.2rem !important;
  line-height: 1.15 !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  width: 100% !important;
}

.cat-lead-sub {
  color: #94A3B8;
  font-size: 13.5px;
  margin: 4px 0 0 !important;
  line-height: 1.5;
  text-align: center !important;
  max-width: 680px !important;
}

.cat-controls-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px 0;
  padding: 16px 18px;
  background: rgba(14, 18, 28, 0.7);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Fila superior de controles: Buscador y Selector de Orden */
.cat-controls-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.cat-search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  min-width: 200px;
}

.cat-search-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: #64748B;
  pointer-events: none;
}

.cat-search-input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 40px 0 38px;
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 13.5px;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.cat-search-input:focus {
  outline: none;
  border-color: #00E5FF;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
  background: rgba(11, 14, 20, 0.98);
}

.cat-search-clear {
  position: absolute;
  right: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94A3B8;
  font-size: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cat-search-clear:hover {
  background: rgba(255, 23, 68, 0.3);
  color: #FF1744;
}

/* Selector de Orden Gamer Dark */
.cat-sort-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cat-sort-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.cat-sort-select {
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.cat-sort-select:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.cat-sort-select option {
  background: #0B0E14;
  color: #F8FAFC;
}

.cat-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.cat-filter-chips::-webkit-scrollbar {
  display: none;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
  box-sizing: border-box;
}

.cat-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.2);
}

.cat-chip.active {
  background: rgba(0, 229, 255, 0.15);
  border-color: #00E5FF;
  color: #00E5FF;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

/* FILTROS DE DEMANDA COMERCIAL EN CATÁLOGO */
.cat-demand-chips {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cat-demand-chips::-webkit-scrollbar {
  display: none !important;
}

.cdc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #94A3B8;
  white-space: nowrap;
}

.cat-demand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  touch-action: manipulation;
  user-select: none;
}

.cat-demand-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.cat-demand-btn.active {
  background: rgba(124, 58, 237, 0.25);
  border-color: #7C3AED;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.35);
}

.cat-demand-btn[data-demand="muy-alta"].active {
  background: rgba(0, 240, 255, 0.18) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4) !important;
}

.cat-demand-btn[data-demand="alta"].active {
  background: rgba(255, 215, 0, 0.18) !important;
  border-color: #FFD700 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35) !important;
}

.cat-demand-btn[data-demand="media"].active {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: #10B981 !important;
  color: #10B981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35) !important;
}

.cat-demand-btn[data-demand="baja"].active {
  background: rgba(100, 116, 139, 0.25) !important;
  border-color: #94A3B8 !important;
  color: #F1F5F9 !important;
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.25) !important;
}

/* PÍLDORAS FLOTANTES SOBRE IMAGEN DE PRODUCTO (FLOATING PILLS) */
.floating-pill-demand {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 9999px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  line-height: 1.2;
}

.floating-pill-demand.demand-muy-alta {
  background: rgba(0, 240, 255, 0.2);
  border: 1px solid #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

.floating-pill-demand.demand-alta {
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid #FFD700;
  color: #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.floating-pill-demand.demand-media {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid #10B981;
  color: #10B981;
}

.floating-pill-demand.demand-baja {
  background: rgba(100, 116, 139, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #94A3B8;
}

.floating-pill-stock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 9999px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  line-height: 1.2;
}

.floating-pill-stock.pill-clean {
  background: rgba(0, 255, 136, 0.18);
  border: 1px solid #00FF88;
  color: #00FF88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.25);
}

.floating-pill-stock.pill-duped {
  background: rgba(255, 184, 0, 0.2);
  border: 1px solid #FFB800;
  color: #FFB800;
  box-shadow: 0 0 10px rgba(255, 184, 0, 0.25);
}

/* Colores de Identidad por Gama en los Chips de Filtro */
.cat-chip[data-filter="tier-olimpo"] {
  color: #FFD700 !important;
  border-color: rgba(255, 215, 0, 0.35) !important;
  background: rgba(255, 215, 0, 0.06) !important;
}
.cat-chip[data-filter="tier-olimpo"]:hover {
  background: rgba(255, 215, 0, 0.14) !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.3) !important;
}
.cat-chip[data-filter="tier-olimpo"].active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 170, 0, 0.18) 100%) !important;
  border-color: #FFD700 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.45) !important;
}

.cat-chip[data-filter="tier-elite"] {
  color: #C084FC !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  background: rgba(168, 85, 247, 0.06) !important;
}
.cat-chip[data-filter="tier-elite"]:hover {
  background: rgba(168, 85, 247, 0.14) !important;
  border-color: #C084FC !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.3) !important;
}
.cat-chip[data-filter="tier-elite"].active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(124, 58, 237, 0.18) 100%) !important;
  border-color: #C084FC !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.45) !important;
}

.cat-chip[data-filter="tier-accesible"] {
  color: #38BDF8 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(56, 189, 248, 0.06) !important;
}
.cat-chip[data-filter="tier-accesible"]:hover {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.3) !important;
}
.cat-chip[data-filter="tier-accesible"].active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(0, 229, 255, 0.18) 100%) !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

.cat-chip[data-filter="tier-obtenible"] {
  color: #34D399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  background: rgba(16, 185, 129, 0.06) !important;
}
.cat-chip[data-filter="tier-obtenible"]:hover {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: #34D399 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3) !important;
}
.cat-chip[data-filter="tier-obtenible"].active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(52, 211, 153, 0.18) 100%) !important;
  border-color: #34D399 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45) !important;
}

.badge-urgente {
  background: rgba(255, 23, 68, 0.2) !important;
  color: #FF5252 !important;
  border: 1px solid rgba(255, 23, 68, 0.5) !important;
  font-weight: 900 !important;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseUrgent {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

.cat-no-results-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(14, 18, 28, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  text-align: center;
  margin: 20px 0;
  width: 100%;
  box-sizing: border-box;
}

.cat-no-results-box .empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.cat-no-results-box h3 {
  font-size: 16px;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}

.cat-no-results-box p {
  font-size: 13px;
  color: #64748B;
  margin: 0;
}

.cat-hogar-section {
  opacity: 0.92;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.cat-card-secundario {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.cat-card-secundario:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

@media (max-width: 640px) {
  .cat-controls-bar {
    padding: 12px 14px;
    margin: 12px 0 18px 0;
    gap: 10px;
  }
  .cat-controls-top-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cat-search-box {
    flex: 1 1 100%;
    width: 100%;
  }
  .cat-search-input {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
  .cat-sort-box {
    width: 100%;
    justify-content: space-between;
  }
  .cat-sort-select {
    flex: 1;
    min-height: 44px !important;
    height: 44px !important;
  }
  .cat-chip {
    padding: 8px 14px !important;
    min-height: 44px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }
  .cat-demand-btn {
    padding: 8px 12px !important;
    min-height: 44px !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   UTILIDADES & ESTILOS DE CALCULADORA ROBUX 3 MÉTODOS OFICIALES
   ========================================================================== */

.hidden {
  display: none !important;
}

/* SELECTOR DE MÉTODO EN CALCULADORA */
.calc-method-nav-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
}

.cmn-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmn-step-pill {
  background: linear-gradient(135deg, #FFD700 0%, #FF9500 100%);
  color: #0B0E14;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.cmn-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #F1F5F9;
}

.calc-method-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

@media (max-width: 880px) {
  .calc-method-pills-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.calc-method-btn {
  background: rgba(22, 28, 44, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: left;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.calc-method-btn:hover {
  background: rgba(30, 38, 60, 0.9);
  border-color: rgba(255, 215, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.calc-method-btn.is-active {
  background: linear-gradient(135deg, rgba(30, 38, 60, 0.95) 0%, rgba(18, 24, 38, 0.98) 100%);
  border: 1.5px solid #FFD700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.25), inset 0 0 12px rgba(255, 215, 0, 0.08);
}

.calc-method-btn[data-set-method="plus"].is-active {
  border-color: #00F0FF;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25), inset 0 0 12px rgba(0, 240, 255, 0.08);
}

.calc-method-btn[data-set-method="gamepass"].is-active {
  border-color: #10B981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25), inset 0 0 12px rgba(16, 185, 129, 0.08);
}

.cmb-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.cmb-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.cmb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.cmb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #FFFFFF;
}

.calc-method-btn.is-active .cmb-title {
  color: #FFD700;
}

.calc-method-btn[data-set-method="plus"].is-active .cmb-title {
  color: #00F0FF;
}

.calc-method-btn[data-set-method="gamepass"].is-active .cmb-title {
  color: #10B981;
}

.cmb-sub {
  font-size: 0.72rem;
  color: #94A3B8;
  white-space: normal;
  line-height: 1.35;
}

.cmb-badge-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
  gap: 6px;
  flex-wrap: wrap;
}

.cmb-rate-badge {
  font-size: 0.76rem;
  font-weight: 700;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.calc-method-btn[data-set-method="plus"] .cmb-rate-badge {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
}

.calc-method-btn[data-set-method="gamepass"] .cmb-rate-badge {
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
}

.cmb-check-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #10B981;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.calc-method-btn.is-active .cmb-check-badge {
  opacity: 1;
}

/* BANNER DINÁMICO DEL MÉTODO ACTIVO */
.calc-method-banner {
  border-radius: 14px;
  padding: 16px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s ease;
}

.calc-method-banner.banner-grupo {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(20, 24, 36, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.08);
}

.calc-method-banner.banner-plus {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(20, 24, 36, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.08);
}

.calc-method-banner.banner-gamepass {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(20, 24, 36, 0.95) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
}

.cmb-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cmb-banner-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.banner-grupo .cmb-banner-badge { color: #FFD700; }
.banner-plus .cmb-banner-badge { color: #00F0FF; }
.banner-gamepass .cmb-banner-badge { color: #10B981; }

.cmb-banner-tasa {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 10px;
  border-radius: 9999px;
}

.cmb-banner-desc {
  font-size: 0.85rem;
  color: #CBD5E1;
  line-height: 1.45;
  margin: 0;
}

.cmb-banner-desc strong {
  color: #FFFFFF;
}

.calc-mode-switch-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* WIDGET MATEMÁTICO GAMEPASS */
.gamepass-calc-bento {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gcb-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gcb-icon {
  font-size: 1.8rem;
}

.gcb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #FFD700;
  margin: 0;
}

.gcb-sub {
  font-size: 0.78rem;
  color: #94A3B8;
  margin: 2px 0 0 0;
}

.gcb-math-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 16px;
  border-radius: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.gcb-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}

.gcb-lbl {
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 600;
}

.gcb-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.gcb-sep {
  font-size: 1.2rem;
  color: #64748B;
  font-weight: 700;
}

/* 2FA TOGGLE Y CONTROL PARENTAL EN PLUS */
.calc-2fa-selector-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.plus-limit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
}

.plus-limit-pill.warn {
  color: #FB923C;
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.25);
}

.checkbox-warn-parental {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 12px 14px;
  border-radius: 12px;
}

.checkbox-warn-retencion {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 12px 14px;
  border-radius: 12px;
}

.csc-badge-gamepass {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-discount-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #00FF88;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ==========================================================================
   WIZARD STEP-BY-STEP ROBUX CALCULATOR (GAMER DARK BENTO)
   Zero horizontal overflow · Fluid pills · Touch target >= 44px
   ========================================================================== */
.calc-wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px 12px;
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}

.wizard-step-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 28, 44, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
  box-sizing: border-box;
  text-align: left;
}

.wizard-step-pill:hover {
  background: rgba(30, 38, 60, 0.85);
  border-color: rgba(255, 215, 0, 0.3);
  color: #F1F5F9;
}

.wizard-step-pill .wsp-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.wizard-step-pill .wsp-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.wizard-step-pill .wsp-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}

.wizard-step-pill .wsp-sub {
  font-size: 0.7rem;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.wizard-step-pill .wsp-check {
  display: none;
  font-size: 0.85rem;
  color: #00FF88;
  font-weight: 800;
}

/* Estado activo */
.wizard-step-pill.is-active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 149, 0, 0.08) 100%);
  border: 1.5px solid #FFD700;
  color: #FFD700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.2);
}

.wizard-step-pill.is-active .wsp-num {
  background: linear-gradient(135deg, #FFD700 0%, #FF9500 100%);
  color: #0B0E14;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.wizard-step-pill.is-active .wsp-sub {
  color: #FDE047;
}

/* Estado completado */
.wizard-step-pill.is-completed {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
  color: #A7F3D0;
}

.wizard-step-pill.is-completed .wsp-num {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
}

.wizard-step-pill.is-completed .wsp-check {
  display: inline-block;
}

/* Conectores entre pasos */
.wz-step-connector {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.wz-step-connector.is-filled {
  background: linear-gradient(90deg, #10B981 0%, #FFD700 100%);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

/* Paneles del Wizard */
.wizard-panel-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  animation: wzFadeIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Barras de navegación dentro de los paneles (Next / Prev) */
.wizard-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  flex-wrap: wrap;
}

.wz-hint-txt {
  font-size: 0.78rem;
  color: #94A3B8;
  flex: 1;
  min-width: 160px;
}

.btn-wz-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFD700 0%, #FF9500 100%);
  color: #0B0E14;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 46px;
  box-sizing: border-box;
}

.btn-wz-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5);
  filter: brightness(1.1);
}

.btn-wz-prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(22, 28, 44, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  border-radius: 12px;
  padding: 12px 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 46px;
  box-sizing: border-box;
}

.btn-wz-prev:hover {
  background: rgba(30, 38, 60, 0.95);
  border-color: rgba(255, 215, 0, 0.3);
  color: #FFD700;
  transform: translateY(-1px);
}

/* Responsividad para móviles y tablets */
@media (max-width: 680px) {
  .calc-wizard-stepper {
    padding: 6px 8px;
    gap: 4px;
  }
  .wizard-step-pill {
    padding: 6px 8px;
    gap: 6px;
    min-height: 42px;
  }
  .wizard-step-pill .wsp-num {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
  }
  .wizard-step-pill .wsp-label {
    font-size: 0.72rem;
  }
  .wizard-step-pill .wsp-sub {
    font-size: 0.65rem;
  }
  .wz-step-connector {
    width: 8px;
  }
  .wizard-actions-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn-wz-next,
  .btn-wz-prev {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 390px) {
  .wizard-step-pill .wsp-sub {
    display: none;
  }
  .wizard-step-pill {
    justify-content: center;
    padding: 6px 4px;
  }
}

/* ==========================================================================
   CAR TAGS & BADGES REDESIGN: GAMER DARK & ZERO OVERFLOW RESPONSIVE
   ========================================================================== */

/* Tablets (600px - 1200px): Protección contra desbordamiento y solapamiento */
@media (min-width: 600px) and (max-width: 1200px) {
  .producto-badges {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .tier-sello,
  .producto-card .stock-badge {
    font-size: 0.68rem !important;
    padding: 2.5px 7px !important;
    border-radius: 6px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
}

/* Móviles compactos (360px - 390px): Ajuste exacto, sin cortes ni desbordes */
@media (max-width: 420px) {
  .producto-badges {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .tier-sello,
  .producto-card .stock-badge {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
    letter-spacing: 0.4px !important;
    border-radius: 5px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
}

/* ==========================================================================
   ALINEACIÓN Y MÁRGENES RESPONSIVOS (CREADORES & ROBUX ESTILO BÓVEDAS)
   ========================================================================== */
@media (max-width: 768px) {
  .creadores-view-wrapper,
  .robux-view-wrapper {
    padding: 16px 14px 64px !important;
  }
}





/* Fallback de avatar en podio 3D: medalla circular neón */
.podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full[src*="mtxlogo"] {
  border-radius: 50% !important;
  width: 100px !important;
  height: 100px !important;
  max-height: 100px !important;
  object-fit: cover !important;
  border: 3px solid #FFD700 !important;
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.5) !important;
  margin-bottom: 2px !important;
  background: #0B0E14 !important;
}

.podio-silver .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full[src*="mtxlogo"] {
  border-color: #CBD5E1 !important;
  box-shadow: 0 0 18px rgba(203, 213, 225, 0.45) !important;
}

.podio-bronze .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full[src*="mtxlogo"] {
  border-color: #CD7F32 !important;
  box-shadow: 0 0 18px rgba(205, 127, 50, 0.45) !important;
}

.podio-username {
  background: rgba(11, 14, 20, 0.75);
  padding: 2px 6px;
  border-radius: 999px;
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   LOOPS DE RETENCIÓN, GAMIFICACIÓN SENSORIAL Y ALERTAS DE RESTOCK (AAA GAMING)
   ========================================================================== */

/* 1. Indicador de Bóveda Diaria en Sidebar / Dock Lateral (Elegante y Sin Estorbar) */
.sidebar-vault-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
}

.sidebar-daily-badge {
  position: absolute !important;
  top: -3px !important;
  right: -5px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #00FF88 !important;
  box-shadow: 0 0 10px #00FF88 !important;
  border: 1.5px solid #0E1017 !important;
  display: none;
}

.sidebar-daily-badge.is-ready {
  display: block !important;
  animation: none !important; /* 0% GPU idle */
}

.ticker-cta-btn.is-ready {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(0, 255, 136, 0.2)) !important;
  border-color: #00FF88 !important;
  color: #00FF88 !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.35) !important;
}

.ticker-cta-btn.is-claimed {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
}

/* 2. Botón Interactivo "Avisarme al Restock" en Tarjetas */
.btn-restock-alert {
  background: rgba(255, 42, 75, 0.12) !important;
  border: 1px solid rgba(255, 42, 75, 0.35) !important;
  color: #FF5577 !important;
  cursor: pointer !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  margin-top: auto !important;
  box-sizing: border-box !important;
}

.btn-restock-alert:hover {
  background: rgba(255, 42, 75, 0.24) !important;
  border-color: #FF2A4B !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(255, 42, 75, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* 3. Ticker Motivacional de Duelo Ranked (#ranking) */
.arena-rival-motivation-ticker {
  background: linear-gradient(135deg, rgba(20, 24, 38, 0.95), rgba(11, 14, 21, 0.98));
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 240, 255, 0.1);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  backdrop-filter: none !important;
}

.armt-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.armt-sword {
  font-size: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

.armt-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.armt-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.armt-desc {
  font-size: 13px;
  color: #CBD5E1;
  margin: 0;
  line-height: 1.4;
}

.armt-desc strong {
  color: #FFD700;
}

.armt-desc em {
  font-style: normal;
  color: #00F0FF;
  font-weight: 700;
}

.armt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.armt-action-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.armt-btn-vault {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
  border: 1px solid #FFD700;
  color: #FFD700;
}

.armt-btn-vault:hover {
  background: #FFD700;
  color: #0B0E14;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
}

.armt-btn-shop {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.05));
  border: 1px solid #00F0FF;
  color: #00F0FF;
}

.armt-btn-shop:hover {
  background: #00F0FF;
  color: #0B0E14;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.5);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .arena-rival-motivation-ticker {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    gap: 12px;
  }
  .armt-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .armt-action-btn {
    justify-content: center;
    padding: 9px 8px;
    font-size: 11.5px;
  }
}

/* 4. Notificaciones de Misiones Diarias (Celebratory Gamification Toasts) */
.quest-toast-card {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 100000;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(11, 14, 21, 0.98));
  border: 1px solid #10B981;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(16, 185, 129, 0.4);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  animation: questSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 380px;
  box-sizing: border-box;
}

@keyframes questSlideUp {
  from { transform: translateY(30px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.quest-toast-icon {
  font-size: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
}

.quest-toast-body {
  flex: 1;
  min-width: 0;
}

.quest-toast-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.quest-toast-desc {
  font-size: 12px;
  color: #E2E8F0;
  line-height: 1.3;
}

/* ==========================================================================
   THEMOROTEX CREATOR STUDIO & STREAMING MONOPOLY COCKPIT (AAA GAMER DARK)
   ========================================================================== */

.creator-cockpit-wrapper {
  max-width: 1332px !important;
  margin: 0 auto 40px !important;
  padding: 24px 30px 60px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Header de Identidad 3D */
.cockpit-header-card {
  background: #0B0E14;
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.98) 0%, rgba(20, 16, 35, 0.95) 100%);
  border: 1px solid rgba(157, 78, 221, 0.35);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(157, 78, 221, 0.12);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.cockpit-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #9D4EDD 0%, #00F0FF 50%, #FFDE00 100%);
}

.chc-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.chc-avatar-stage {
  position: relative;
  width: 84px;
  height: 84px;
  min-width: 84px;
  border-radius: 50%;
  border: 2.5px solid #9D4EDD;
  background: #000;
  box-shadow: 0 0 20px rgba(157, 78, 221, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chc-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.chc-live-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 13px;
  animation: none !important; /* 0% GPU idle */
}

.chc-profile-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.chc-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chc-rank-badge {
  background: rgba(157, 78, 221, 0.2);
  border: 1px solid #9D4EDD;
  color: #D8B4FE;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.chc-streak-badge {
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.4);
  color: #FFA500;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}

.chc-code-pill {
  background: rgba(255, 222, 0, 0.1);
  border: 1px solid rgba(255, 222, 0, 0.35);
  color: #FFDE00;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
}

.chc-creator-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chc-verified {
  font-size: 11.5px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid #00F0FF;
  color: #00F0FF;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.chc-creator-sub {
  font-size: 13px;
  color: #94A3B8;
  font-weight: 600;
}

/* Tokens Card */
.chc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chc-tokens-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 222, 0, 0.4);
  border-radius: 14px;
  padding: 12px 18px;
  text-align: right;
  min-width: 220px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.ctc-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 1px;
}

.ctc-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #FFDE00;
  text-shadow: 0 0 14px rgba(255, 222, 0, 0.4);
  line-height: 1.1;
  margin: 3px 0;
}

.ctc-hint {
  font-size: 10.5px;
  color: #64748B;
}

.chc-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-streamer-mode {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #E2E8F0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-streamer-mode.active {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.btn-toggle-live {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-toggle-live.is-live {
  background: rgba(255, 42, 75, 0.2);
  border-color: #FF2A4B;
  color: #FF5577;
  box-shadow: 0 0 14px rgba(255, 42, 75, 0.4);
}

/* Season Progress Bar */
.cockpit-season-bar-section {
  margin-bottom: 24px;
}

.csb-card {
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.csb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.csb-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #FFDE00;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.csb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.csb-meta-secured {
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 6px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.csb-secured-lbl {
  font-size: 11px;
  font-weight: 800;
  color: #94A3B8;
}

.csb-secured-val {
  font-size: 12.5px;
  font-weight: 800;
  color: #00FF88;
}

.csb-progress-wrap {
  width: 100%;
}

.csb-progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.csb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #9D4EDD 0%, #00F0FF 60%, #00FF88 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  transition: width 0.6s cubic-bezier(0.12, 0.8, 0.2, 1);
}

.csb-progress-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

.csb-progress-labels strong {
  color: #FFFFFF;
}

/* Funnel Bento Cards */
.cockpit-funnel-section {
  margin-bottom: 24px;
}

.funnel-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.funnel-card {
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.funnel-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.funnel-card.highlight-green {
  border-color: rgba(0, 255, 136, 0.35);
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.9) 0%, rgba(0, 255, 136, 0.06) 100%);
}

.fc-ico-wrap {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ico-cyan { background: rgba(0, 240, 255, 0.15); border: 1px solid rgba(0, 240, 255, 0.35); }
.ico-purple { background: rgba(157, 78, 221, 0.15); border: 1px solid rgba(157, 78, 221, 0.35); }
.ico-gold { background: rgba(255, 222, 0, 0.15); border: 1px solid rgba(255, 222, 0, 0.35); }
.ico-green { background: rgba(0, 255, 136, 0.15); border: 1px solid rgba(0, 255, 136, 0.4); }

.fc-data {
  flex: 1;
  min-width: 0;
}

.fc-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 2px;
}

.fc-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.fc-desc {
  font-size: 11px;
  color: #64748B;
  margin-top: 4px;
  line-height: 1.3;
}

/* Tools Grid (OBS & Flash Drops) */
.cockpit-tools-section {
  margin-bottom: 28px;
}

.tools-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cockpit-card {
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.ct-head {
  margin-bottom: 10px;
}

.ct-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.ct-badge-ico { font-size: 14px; }
.ct-badge-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ct-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF;
}

.ct-desc {
  font-size: 12.5px;
  color: #94A3B8;
  line-height: 1.45;
  margin-bottom: 16px;
}

.obs-url-box {
  margin-bottom: 14px;
}

.obs-url-lbl {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.obs-input-row {
  display: flex;
  gap: 8px;
}

.obs-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  font-family: monospace;
  font-size: 11.5px;
  padding: 8px 12px;
  border-radius: 8px;
  outline: none;
}

.btn-copy-obs, .btn-copy-drop {
  background: #00F0FF;
  color: #0B0E14;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.obs-actions-row {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.btn-test-alert {
  flex: 1;
  background: linear-gradient(135deg, rgba(157, 78, 221, 0.3) 0%, rgba(0, 240, 255, 0.2) 100%);
  border: 1.5px solid #9D4EDD;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-test-alert:hover {
  box-shadow: 0 0 16px rgba(157, 78, 221, 0.5);
}

.btn-regen-token {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Flash Drops */
.flash-drop-creator-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.fdc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fdc-col label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.fdc-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  outline: none;
}

.btn-gen-drop {
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.25) 0%, rgba(255, 107, 0, 0.2) 100%);
  border: 1.5px solid #FFDE00;
  color: #FFDE00;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.active-drop-card {
  background: rgba(255, 222, 0, 0.08);
  border: 1px dashed #FFDE00;
  border-radius: 10px;
  padding: 10px 14px;
}

.adc-head {
  font-size: 10.5px;
  font-weight: 800;
  color: #FFDE00;
  margin-bottom: 4px;
}

.adc-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.adc-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 1.5px;
}

.adc-timer {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 4px;
}

/* Bóveda Gamer */
.cockpit-vault-section {
  margin-top: 10px;
}

.cvs-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 24px;
}

.cvs-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #FFDE00;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cvs-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 4px 0 6px;
}

.cvs-desc {
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.4;
}

.creator-vault-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.vault-gamer-card {
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.vault-gamer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Modificadores Temáticos de Gama / Categoría */
.vault-gamer-card.card-theme-cyan {
  border-color: rgba(0, 240, 255, 0.35);
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.95) 0%, rgba(0, 240, 255, 0.06) 100%);
}
.vault-gamer-card.card-theme-cyan:hover {
  border-color: #00F0FF;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}

.vault-gamer-card.card-theme-purple {
  border-color: rgba(157, 78, 221, 0.35);
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.95) 0%, rgba(157, 78, 221, 0.06) 100%);
}
.vault-gamer-card.card-theme-purple:hover {
  border-color: #9D4EDD;
  box-shadow: 0 0 20px rgba(157, 78, 221, 0.25);
}

.vault-gamer-card.card-theme-gold {
  border-color: rgba(255, 222, 0, 0.45);
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.95) 0%, rgba(255, 222, 0, 0.07) 100%);
}
.vault-gamer-card.card-theme-gold:hover {
  border-color: #FFDE00;
  box-shadow: 0 0 22px rgba(255, 222, 0, 0.3);
}

.vault-gamer-card.card-theme-emerald {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.95) 0%, rgba(16, 185, 129, 0.06) 100%);
}
.vault-gamer-card.card-theme-emerald:hover {
  border-color: #10B981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.vault-gamer-card.highlight-gold {
  border-color: rgba(255, 222, 0, 0.5);
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.95) 0%, rgba(255, 222, 0, 0.07) 100%);
}

.vgc-badge-tier {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.5px;
}

.vgc-badge-tier.cyan {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border-color: #00F0FF;
}

.vgc-badge-tier.purple {
  background: rgba(157, 78, 221, 0.18);
  color: #C77DFF;
  border-color: #9D4EDD;
}

.vgc-badge-tier.gold {
  background: rgba(255, 222, 0, 0.18);
  color: #FFDE00;
  border-color: #FFDE00;
}

.vgc-badge-tier.emerald {
  background: rgba(16, 185, 129, 0.18);
  color: #10B981;
  border-color: #10B981;
}

.vgc-cost.cost-cyan { color: #00F0FF; }
.vgc-cost.cost-purple { color: #C77DFF; }
.vgc-cost.cost-gold { color: #FFDE00; }
.vgc-cost.cost-emerald { color: #10B981; }

.btn-canjear-vault.btn-theme-cyan {
  background: linear-gradient(135deg, #00F0FF 0%, #00B4D8 100%);
  color: #0B0E14;
}
.btn-canjear-vault.btn-theme-cyan:hover {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.btn-canjear-vault.btn-theme-purple {
  background: linear-gradient(135deg, #9D4EDD 0%, #7B2CBF 100%);
  color: #FFFFFF;
}
.btn-canjear-vault.btn-theme-purple:hover {
  box-shadow: 0 0 15px rgba(157, 78, 221, 0.5);
}

.btn-canjear-vault.btn-theme-gold {
  background: linear-gradient(135deg, #FFDE00 0%, #FFB703 100%);
  color: #0B0E14;
}
.btn-canjear-vault.btn-theme-gold:hover {
  box-shadow: 0 0 15px rgba(255, 222, 0, 0.5);
}

.btn-canjear-vault.btn-theme-emerald {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #0B0E14;
}
.btn-canjear-vault.btn-theme-emerald:hover {
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

.vgc-img-wrap {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin-bottom: 12px;
}

.vgc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vgc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  color: #FFFFFF;
}

.vgc-meta {
  font-size: 11.5px;
  color: #94A3B8;
  margin: 3px 0 8px;
}

.vgc-cost {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: #FFDE00;
  margin-bottom: 12px;
}

.btn-canjear-vault {
  width: 100%;
  background: #FFDE00;
  color: #0B0E14;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* PIN Modal */
.pin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Animación Shake de rechazo en tarjetas y PIN */
.shake-card-denied {
  animation: shakeCardDenied 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shakeCardDenied {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

.pin-modal-box {
  background: #0B0E14;
  border: 2px solid #9D4EDD;
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 380px;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(157, 78, 221, 0.3);
}

.btn-close-pin-modal {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 18px;
  cursor: pointer;
}

.pm-ico { font-size: 32px; display: block; margin-bottom: 6px; }
.pm-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #FFFFFF;
}

.pm-sub {
  font-size: 12.5px;
  color: #94A3B8;
  margin: 6px 0 16px;
}

.pm-input-row {
  margin-bottom: 14px;
}

.pin-digit-input {
  width: 140px;
  height: 48px;
  text-align: center;
  font-size: 24px;
  letter-spacing: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1.5px solid #00F0FF;
  border-radius: 12px;
  color: #00F0FF;
  outline: none;
}

.pm-error-msg {
  color: #FF5577;
  font-size: 12px;
  margin-bottom: 12px;
}

.pm-actions {
  display: flex;
  gap: 10px;
}

.btn-confirm-pin {
  flex: 1;
  background: #00FF88;
  color: #0B0E14;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}

.btn-cancel-pin {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
}

/* RESPONSIVE BREAKPOINTS (360px - 768px) */
@media (max-width: 900px) {
  .cockpit-header-card {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
  .chc-right {
    align-items: stretch;
  }
  .chc-tokens-card {
    text-align: center;
  }
  .funnel-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tools-grid-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .creator-cockpit-wrapper {
    padding: 16px 12px 60px !important;
  }
  .chc-left {
    flex-direction: column;
    text-align: center;
  }
  .chc-badge-row {
    justify-content: center;
  }
  .chc-creator-name {
    justify-content: center;
    font-size: 22px;
  }
  .funnel-bento-grid {
    grid-template-columns: 1fr;
  }
}



/* ==========================================================================
   THEMOROTEX PRO 2026 — SISTEMA DE ANIMACIONES & MICRO-INTERACCIONES
/* ==========================================================================
   GPU OVERLOAD NEUTRALIZED: Epic animations and heavy compositor layers removed.
   60 FPS smooth rendering for all client devices.
   ========================================================================== */


/* ==========================================================================
   UI/UX IMPROVEMENTS (DEMAND FILTERS, BADGES, HOME & BUTTONS)
   ========================================================================== */

/* Bloque 1 — Barra de Demanda en Catálogo */
.catalogo-demand-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 4px;
}
.demand-chip-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #94A3B8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.demand-chip-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7C3AED;
  color: #C4B5FD;
}
.demand-chip-btn.active {
  background: rgba(124, 58, 237, 0.28);
  border-color: #7C3AED;
  color: #FFFFFF;
}
.demand-chip-btn[data-demand="muy-alta"].active {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}
.demand-chip-btn[data-demand="alta"].active {
  background: rgba(255, 215, 0, 0.15);
  border-color: #FFD700;
  color: #FFD700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}
.demand-chip-btn[data-demand="media"].active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10B981;
  color: #10B981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}
.demand-chip-btn[data-demand="baja"].active {
  background: rgba(100, 116, 139, 0.15);
  border-color: #94A3B8;
  color: #CBD5E1;
  box-shadow: 0 0 12px rgba(148, 163, 184, 0.25);
}

@media (max-width: 768px) {
  .catalogo-demand-bar {
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    padding: 2px 2px 6px 2px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .catalogo-demand-bar::-webkit-scrollbar {
    display: none !important;
  }
  .demand-chip-btn {
    flex-shrink: 0 !important;
    font-size: 11.5px !important;
    padding: 5px 11px !important;
  }
}

/* Bloque 2 — CTA Bóvedas en Home */
.btn-bovedas-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #0B0B0F !important;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn-bovedas-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 215, 0, 0.5);
  color: #0B0B0F !important;
}

/* Bloque 3 — Badges de Demanda en Catálogo de Coches */
.badge-ruleta-creador {
  background: rgba(157, 78, 221, 0.18);
  color: #C77DFF;
  border: 1px solid rgba(157, 78, 221, 0.45);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 10px rgba(157, 78, 221, 0.25);
}
.badge-demand-top {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.4);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
}
.badge-demand-alta {
  background: rgba(255, 215, 0, 0.12);
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
}
.badge-demand-media {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
}
.badge-demand-baja {
  background: rgba(100, 116, 139, 0.1);
  color: #94A3B8;
  border: 1px solid rgba(100, 116, 139, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
}

/* Bloque 4 — Alineación .btn-comprar, Botones Bóvedas por Tier y Ajuste Mobile */
.producto-card {
  display: flex !important;
  flex-direction: column !important;
}
.btn-comprar {
  margin-top: auto !important;
}

.btn-vault-silver { background: linear-gradient(135deg, #94A3B8, #CBD5E1) !important; color: #0B0B0F !important; }
.btn-vault-gold { background: linear-gradient(135deg, #D97706, #F59E0B) !important; color: #0B0B0F !important; }
.btn-vault-diamond { background: linear-gradient(135deg, #00B4D8, #00F0FF) !important; color: #0B0B0F !important; }
.btn-vault-supreme { background: linear-gradient(135deg, #7C3AED, #A855F7) !important; color: #fff !important; }

@media (max-width: 768px) {
  .vault-card {
    width: 74% !important;
    min-width: 215px !important;
    max-width: 255px !important;
  }
}

/* ==========================================================================
   FASE A CRO: GAMEPASS DUAL TAX SELECTOR & ASISTENTE INTERACTIVO 30s
   Estética Gamer Dark (#0B0E14) · Acentos Neón Cían (#00F0FF) y Oro (#FFD700)
   ========================================================================== */

.gamepass-tax-toggle-box {
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
}

.gamepass-tax-toggle-box:hover {
  border-color: rgba(0, 240, 255, 0.45);
}

.gttb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.gttb-icon {
  font-size: 1.5rem;
  background: rgba(0, 240, 255, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
}

.gttb-title {
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

.gttb-sub {
  margin: 2px 0 0 0;
  font-size: 0.82rem;
  color: #94A3B8;
}

.gttb-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.gttb-option-card {
  position: relative;
  display: block;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.gttb-option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gttb-option-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.gttb-option-card.active {
  background: rgba(0, 240, 255, 0.06);
  border-color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2), inset 0 0 12px rgba(0, 240, 255, 0.05);
}

.gttb-option-card#gttbCardWithTax.active {
  background: rgba(16, 185, 129, 0.06);
  border-color: #10B981;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.2), inset 0 0 12px rgba(16, 185, 129, 0.05);
}

.gttb-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.gttb-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.gttb-badge-eco {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.gttb-badge-full {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.gttb-card-rate {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFD700;
}

.gttb-card-desc {
  margin: 0;
  font-size: 0.82rem;
  color: #CBD5E1;
  line-height: 1.4;
}

/* Asistente Gamepass en 30 Segundos */
.gamepass-wizard-assistant-box {
  background: rgba(11, 14, 20, 0.92);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.gwa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.gwa-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gwa-ico {
  font-size: 1.4rem;
  background: rgba(255, 215, 0, 0.1);
  padding: 6px 10px;
  border-radius: 8px;
}

.gwa-title {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFD700;
}

.gwa-sub {
  display: block;
  font-size: 0.8rem;
  color: #94A3B8;
}

.btn-gwa-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-gwa-toggle:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.gwa-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.gwa-steps-grid.collapsed {
  display: none;
}

.gwa-step-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.gwa-step-card.highlight {
  background: rgba(255, 215, 0, 0.04);
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.1);
}

.gwa-step-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gwa-step-badge.highlight {
  background: rgba(255, 215, 0, 0.2);
  color: #FFD700;
}

.gwa-step-tit {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 6px;
  display: block;
}

.gwa-step-txt {
  font-size: 0.78rem;
  color: #94A3B8;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.gwa-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 6px 10px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.gwa-link-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  color: #FFFFFF;
}

.gwa-price-copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed rgba(255, 215, 0, 0.4);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.gwa-price-target {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.gwa-price-r {
  font-size: 0.85rem;
  font-weight: 800;
  color: #FFD700;
}

.gwa-price-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
}

.btn-gwa-copy {
  background: linear-gradient(135deg, #FFD700, #F59E0B);
  color: #0B0E14;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-gwa-copy:hover {
  transform: scale(1.04);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.btn-gwa-copy.copied {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.gwa-calc-note {
  font-size: 0.72rem;
  color: #CBD5E1;
  display: block;
  line-height: 1.25;
}

.gwa-paste-helper {
  font-size: 0.75rem;
  color: #94A3B8;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  display: block;
}

.gamepass-url-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.gamepass-url-status-badge.valid {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10B981;
}

.gamepass-url-status-badge.warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #F59E0B;
}

@media (max-width: 768px) {
  .gwa-steps-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gttb-options-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CHECKOUT EXPRESS DIRECTO ROBUX (FASE B 1-CLIC)
   Gamer Dark (#0B0E14) · Acentos Neón · Zero-Overflow · Touch Targets >= 44px
   ========================================================================== */

.modal-checkout-express {
  max-width: 620px;
  width: 95%;
  background: #0B0E14 !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.15) !important;
  color: #F8FAFC !important;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.rcm-head {
  text-align: left;
  margin-bottom: 16px;
}

.rcm-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.rcm-badge-vip {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.rcm-badge-stock {
  font-size: 0.72rem;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 999px;
}

.rcm-title {
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rcm-sub {
  margin: 0;
  font-size: 0.86rem;
  color: #94A3B8;
  line-height: 1.4;
}

/* Resumen Bento */
.rcm-summary-bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.rcm-sum-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rcm-sum-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rcm-sum-qty {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rcm-sum-r {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  color: #00F0FF;
  font-size: 0.95rem;
}

.rcm-sum-qty strong {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: #FFFFFF;
}

.rcm-sum-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.rcm-sum-user-val {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.95rem;
  color: #38BDF8;
  font-weight: 700;
}

.rcm-sum-total-val strong {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #10B981;
}

.rcm-usd-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: #00F0FF;
  display: block;
}

/* Pestañas de Métodos */
.rcm-tabs-bar {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

.btn-rcm-tab {
  flex: 1;
  min-height: 44px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #94A3B8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  padding: 8px 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-rcm-tab.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(124, 58, 237, 0.3) 100%);
  border: 1px solid #00F0FF;
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
}

/* Tarjetas de Medios de Pago */
.rcm-metodos-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.rcm-metodo-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-sizing: border-box;
}

.rcm-metodo-card:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(0, 240, 255, 0.4);
}

.rcm-metodo-card.checked {
  background: rgba(0, 240, 255, 0.05);
  border-color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.15);
}

.rcm-radio-col {
  padding-top: 3px;
}

.rcm-radio-col input[type="radio"] {
  accent-color: #00F0FF;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.rcm-card-body {
  flex: 1;
}

.rcm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.rcm-card-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rcm-card-name {
  font-size: 0.96rem;
  color: #FFFFFF;
  font-weight: 800;
  font-family: 'Rajdhani', sans-serif;
}

.rcm-card-desc {
  margin: 0 0 6px 0;
  font-size: 0.8rem;
  color: #94A3B8;
  line-height: 1.35;
}

.rcm-card-data-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
}

.rcm-data-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rcm-data-lbl {
  color: #64748B;
  font-weight: 700;
  font-size: 0.75rem;
}

.rcm-data-code {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 700;
}

.rcm-data-tip {
  color: #38BDF8;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Canal de Contacto */
.rcm-contact-box {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.rcm-contact-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.rcm-contact-ico {
  font-size: 1.2rem;
}

.rcm-contact-title {
  display: block;
  font-size: 0.92rem;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
}

.rcm-contact-sub {
  display: block;
  font-size: 0.76rem;
  color: #94A3B8;
}

.rcm-canal-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.btn-rcm-canal {
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  color: #94A3B8;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-rcm-canal.active {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

#rcmTabCanalDc.active {
  background: #5865F2;
  border-color: #5865F2;
  box-shadow: 0 0 10px rgba(88, 101, 242, 0.3);
}

.rcm-field-lbl {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #CBD5E1;
  margin-bottom: 4px;
}

.rcm-phone-input-group,
.rcm-discord-input-group {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.rcm-select-indicativo {
  min-height: 44px;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 0.82rem;
  padding: 0 8px;
  cursor: pointer;
  outline: none;
}

.rcm-input {
  flex: 1;
  min-height: 44px;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #FFFFFF;
  padding: 0 12px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.rcm-input:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.rcm-dc-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: rgba(88, 101, 242, 0.2);
  border: 1px solid rgba(88, 101, 242, 0.4);
  border-radius: 8px;
  color: #5865F2;
  font-weight: 800;
  font-size: 1rem;
}

/* Cupón */
.rcm-cupon-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.rcm-cupon-inp {
  flex: 1;
  min-height: 44px;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #FFFFFF;
  padding: 0 12px;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.btn-rcm-cupon {
  min-height: 44px;
  padding: 0 16px;
  background: rgba(124, 58, 237, 0.25);
  border: 1px solid #7C3AED;
  border-radius: 8px;
  color: #DDD6FE;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-rcm-cupon:hover {
  background: #7C3AED;
  color: #FFFFFF;
}

.rcm-cupon-aviso {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
}

.rcm-cupon-aviso.ok { color: #10B981; }
.rcm-cupon-aviso.err { color: #EF4444; }

/* Botón de Enviar y Avisos */
.btn-rcm-submit {
  width: 100%;
  min-height: 52px;
  background: linear-gradient(135deg, #00FF88 0%, #00F0FF 100%);
  border: none;
  border-radius: 12px;
  color: #050811;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-rcm-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(0, 255, 136, 0.6);
}

.btn-rcm-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.rcm-aviso {
  margin-top: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
}

.rcm-aviso.err { color: #EF4444; }
.rcm-aviso.ok { color: #10B981; }

.rcm-legal-note {
  margin: 10px 0 0 0;
  font-size: 0.74rem;
  color: #64748B;
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 680px) {
  .modal-checkout-express {
    padding: 16px !important;
    width: 96% !important;
  }
  .rcm-summary-bento {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .btn-rcm-tab {
    font-size: 0.78rem;
    padding: 6px 8px;
  }
  .rcm-title {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   FASE 2 CRO ROBUX: PRESETS, SOCIAL REVIEWS WALL & LIVE TOAST (GAMER DARK)
   ========================================================================== */
.robux-game-presets-box {
  background: rgba(11, 14, 20, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.rgp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.rgp-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 4px 10px;
  border-radius: 6px;
}

.rgp-hint {
  font-size: 0.8rem;
  color: #94A3B8;
}

.rgp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.rgp-card {
  background: #111520;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.rgp-card:hover {
  border-color: #00F0FF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.15);
}

.rgp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rgp-game-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.game-blox { background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.game-jb { background: rgba(59, 130, 246, 0.15); color: #60A5FA; border: 1px solid rgba(59, 130, 246, 0.3); }
.game-brook { background: rgba(16, 185, 129, 0.15); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.3); }

.rgp-robux-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFDE00;
}

.rgp-title {
  font-size: 0.88rem;
  color: #F8FAFC;
  margin-bottom: 4px;
}

.rgp-sub {
  font-size: 0.74rem;
  color: #64748B;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.btn-rgp-load {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00F0FF;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rgp-card:hover .btn-rgp-load {
  background: #00F0FF;
  color: #0B0E14;
}

/* MURO DE RESEÑAS VERIFICADAS */
.robux-reviews-wall-section {
  margin: 40px 0;
  padding: 30px 20px;
  background: rgba(11, 14, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
}

.rrw-header {
  text-align: center;
  margin-bottom: 28px;
}

.rrw-badge {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.rrw-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #F8FAFC;
  margin: 0 0 8px 0;
}

.rrw-rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.rrw-stars {
  color: #FFDE00;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.rrw-score {
  font-size: 0.9rem;
  color: #94A3B8;
}

.rrw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.rrw-card {
  background: #111520;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rrw-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.rrw-user-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rrw-avatar {
  font-size: 1.4rem;
}

.rrw-user {
  display: block;
  font-size: 0.9rem;
  color: #F8FAFC;
}

.rrw-time {
  display: block;
  font-size: 0.72rem;
  color: #64748B;
}

.rrw-stars-mini {
  color: #FFDE00;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.rrw-text {
  font-size: 0.84rem;
  color: #CBD5E1;
  line-height: 1.45;
  margin: 0 0 12px 0;
  font-style: italic;
}

.rrw-chip {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
}

.rrw-action-row {
  text-align: center;
}

.btn-rrw-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5865F2;
  color: #FFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.btn-rrw-discord:hover {
  background: #4752C4;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.35);
}

/* TOAST PRUEBA SOCIAL EN VIVO */
.robux-live-delivery-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.35);
  backdrop-filter: none !important;
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.15);
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.robux-live-delivery-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rld-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: none !important; /* 0% GPU idle */
}

@keyframes rldPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.rld-info {
  display: flex;
  flex-direction: column;
}

.rld-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #10B981;
}

.rld-desc {
  font-size: 0.82rem;
  font-weight: 600;
  color: #F8FAFC;
}

@media (max-width: 680px) {
  .robux-live-delivery-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}





/* ==========================================================================
   RANKING COMPACTO HIGH-DENSITY 2026 (LEADERBOARD ULTRA-CLEAN)
   ========================================================================== */

/* 1. Header del ranking más estilizado y compacto */
.ranked-header-box {
  margin-bottom: 8px !important;
  text-align: center;
}
.ranked-title {
  font-size: 24px !important;
  letter-spacing: 0.8px !important;
  margin: 4px 0 !important;
}
.ranked-sub {
  font-size: 13px !important;
  margin-top: 2px !important;
  opacity: 0.85;
}

/* 2. Barra de telemetría compacta estilo HUD Gamer: Mobile-first 2x2 */
.arena-telemetry-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px auto 14px auto !important;
  max-width: 100% !important;
}

@media (min-width: 901px) {
  .arena-telemetry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.atg-pill {
  padding: 8px 10px !important;
  border-radius: 10px !important;
  gap: 8px !important;
  min-height: 42px !important;
  min-width: 0 !important;
}
.atg-ico {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}
.atg-info {
  min-width: 0 !important;
  overflow: hidden !important;
}
.atg-val {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.atg-lbl {
  font-size: 10.5px !important;
  opacity: 0.75 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 3. Podio Olímpico Compacto (Reducción de altura vertical a ~300px) */
.podio-olimpico-container {
  gap: 12px !important;
  margin-top: 4px !important;
  margin-bottom: 14px !important;
  padding-top: 24px !important;
  isolation: isolate !important;
}
.podio-card {
  padding: 10px 10px 10px 10px !important;
  border-radius: 14px !important;
  gap: 5px !important;
}
.podio-gold {
  padding-top: 14px !important;
  padding-bottom: 12px !important;
  margin-top: 0 !important;
}
.podio-silver {
  margin-top: 0 !important;
}
.podio-bronze {
  margin-top: 8px !important;
}
.podio-crown {
  font-size: 22px !important;
  top: -16px !important;
}
.podio-medal-wrap {
  gap: 6px !important;
  margin-bottom: 2px !important;
}
.podio-medal {
  font-size: 18px !important;
}
.podio-metal-pill {
  font-size: 11px !important;
  padding: 2px 8px !important;
}

/* Avatares 3D y pedestales de escala contenida */
.podio-avatar-wrap.podio-avatar-stage-3d {
  width: 100% !important;
  max-width: 150px !important;
  height: 115px !important;
  margin: 0 auto 6px auto !important;
}
.podio-gold .podio-avatar-wrap.podio-avatar-stage-3d {
  max-width: 180px !important;
  height: 135px !important;
  margin-bottom: 8px !important;
}
.podio-silver .podio-avatar-wrap.podio-avatar-stage-3d {
  max-width: 150px !important;
  height: 120px !important;
}
.podio-bronze .podio-avatar-wrap.podio-avatar-stage-3d {
  max-width: 140px !important;
  height: 115px !important;
}

.podio-character-stage {
  height: 98px !important;
}
.podio-gold .podio-character-stage {
  height: 118px !important;
}
.podio-silver .podio-character-stage {
  height: 102px !important;
}
.podio-bronze .podio-character-stage {
  height: 98px !important;
}

.podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-height: 90px !important;
  margin-bottom: -10px !important;
}
.podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-height: 110px !important;
  margin-bottom: -14px !important;
}
.podio-silver .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-height: 95px !important;
  margin-bottom: -10px !important;
}
.podio-bronze .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-height: 90px !important;
  margin-bottom: -10px !important;
}

/* Auras reducidas */
.podio-stage-aura {
  filter: blur(6px) !important;
}
.stage-aura-gold {
  width: 120px !important;
  height: 120px !important;
}
.stage-aura-silver {
  width: 100px !important;
  height: 100px !important;
}
.stage-aura-bronze {
  width: 95px !important;
  height: 95px !important;
}

/* Pedestales 3D reducidos */
.pedestal-gold .pedestal-top-surface {
  height: 14px !important;
}
.pedestal-silver .pedestal-top-surface {
  height: 12px !important;
}
.pedestal-bronze .pedestal-top-surface {
  height: 11px !important;
}
.pedestal-gold .pedestal-pillar {
  height: 20px !important;
}
.pedestal-silver .pedestal-pillar {
  height: 16px !important;
}
.pedestal-bronze .pedestal-pillar {
  height: 14px !important;
}

/* Información del jugador en podio: Blindaje anti-desborde total */
.podio-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

.podio-player-info {
  margin: 4px 0 6px 0 !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 0 2px !important;
}

.podio-username-link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  text-align: center !important;
  text-decoration: none !important;
  margin: 0 auto !important;
}

.podio-username {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  word-break: normal !important;
  letter-spacing: 0.2px !important;
  color: #FFF !important;
}

.gold-name {
  font-size: 14.5px !important;
  color: #FFD700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
}

@media (max-width: 768px) {
  .podio-username {
    font-size: 11.5px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .gold-name {
    font-size: 12.5px !important;
  }
}

.podio-metrics-row {
  padding: 0 !important;
  gap: 6px !important;
  justify-content: center !important;
}

.pm-score {
  font-size: 12.5px !important;
}

.pm-score.gold-score {
  font-size: 13.5px !important;
}

.pm-streak {
  font-size: 11px !important;
}

.pm-streak.gold-streak {
  font-size: 11.5px !important;
}

.podio-gap-tag {
  font-size: 10px !important;
  padding: 2px 6px !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: inline-block !important;
}

/* Premio principal destacado (#2 y #3) */
.podio-featured-prize {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  margin-top: auto !important;
  margin-bottom: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.podio-prize-silver {
  color: #E2E8F0 !important;
  border-color: rgba(203, 213, 225, 0.35) !important;
  background: rgba(203, 213, 225, 0.12) !important;
}

.podio-prize-bronze {
  color: #F59E0B !important;
  border-color: rgba(205, 127, 50, 0.35) !important;
  background: rgba(205, 127, 50, 0.12) !important;
}

/* 4. Acordeón interactivo de premios en Podio (#2 y #3) */
.podio-prizes-accordion {
  width: 100% !important;
  margin-top: 2px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.podio-prizes-accordion.silver-prizes {
  border-color: rgba(203, 213, 225, 0.25) !important;
}

.podio-prizes-accordion.bronze-prizes {
  border-color: rgba(205, 127, 50, 0.25) !important;
}

.ppa-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  list-style: none !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  color: #E2E8F0 !important;
  user-select: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  transition: background 0.15s ease !important;
}

.ppa-summary::-webkit-details-marker {
  display: none !important;
}

.ppa-summary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.ppa-title-txt {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ppa-arrow {
  font-size: 9px !important;
  transition: transform 0.2s ease !important;
  opacity: 0.8 !important;
}

details[open].podio-prizes-accordion .ppa-arrow {
  transform: rotate(180deg) !important;
}

details[open].podio-prizes-accordion .ppb-chips-list {
  padding: 4px 4px 6px 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Tarjeta compacta del premio en custodia (#1) */
.custodia-premio-card-mini {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  min-width: 0 !important;
  margin-top: auto !important;
}

.cpc-mini-thumb {
  width: 36px !important;
  height: 26px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.cpc-mini-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cpc-mini-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

.cpc-mini-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
}

.cpc-mini-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cpc-mini-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #00F0FF !important;
  flex-shrink: 0 !important;
}

.cpc-mini-action {
  display: none !important;
}

/* Suavizado de imágenes y avatares en pedestales */
.podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  max-width: 88% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

.podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
  border-radius: 14px !important;
}

/* 5. Acordeón de Recompensas por Divisiones (#4 al #100) */
details.arena-tiers-accordion {
  background: linear-gradient(180deg, rgba(18, 22, 34, 0.95) 0%, rgba(14, 18, 28, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0 !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.atib-toggle-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.atib-toggle-summary::-webkit-details-marker {
  display: none;
}
.atib-toggle-summary:hover {
  background: rgba(255, 255, 255, 0.03);
}
.atib-summary-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.atib-toggle-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}
.atib-toggle-summary:hover .atib-toggle-btn {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}
details[open].arena-tiers-accordion .atib-toggle-btn {
  background: rgba(0, 240, 255, 0.25);
  color: #FFFFFF;
}
details[open].arena-tiers-accordion .atib-grid {
  padding: 12px 16px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* 6. Ticker de Duelo Ranked Pro (Aesthetic Cyber Matchup Bar) */
.arena-rival-motivation-ticker {
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(135deg, rgba(17, 23, 40, 0.94) 0%, rgba(9, 13, 23, 0.98) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.22) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px rgba(0, 240, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 12px 18px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.armt-content-zone {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.armt-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.armt-duel-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #00F0FF !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.armt-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #00F0FF !important;
  box-shadow: 0 0 8px #00F0FF !important;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseNeonDot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 10px #00F0FF; }
}

.armt-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #F8FAFC !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

.armt-desc {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  color: #CBD5E1 !important;
  line-height: 1.35 !important;
}

.armt-matchup-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.armt-pill-fighter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.armt-pill-silver {
  background: rgba(148, 163, 184, 0.15) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #E2E8F0 !important;
}

.armt-pill-gold {
  background: rgba(255, 215, 0, 0.15) !important;
  border: 1px solid rgba(255, 215, 0, 0.4) !important;
  color: #FFD700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
}

.armt-vs-tag {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #EF4444 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
}

.armt-gap-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(0, 240, 255, 0.1) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #00F0FF !important;
}

/* Acciones Gamer en Cápsulas Neón */
.armt-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.armt-action-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  user-select: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
}

.armt-btn-vault {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 158, 0, 0.1)) !important;
  border: 1px solid rgba(255, 215, 0, 0.45) !important;
  color: #FFD700 !important;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15) !important;
}

.armt-btn-vault:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 158, 0, 0.2)) !important;
  border-color: #FFD700 !important;
  color: #FFF !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.45) !important;
  transform: translateY(-2px) !important;
}

.armt-btn-shop {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(124, 58, 237, 0.25)) !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  color: #00F0FF !important;
  box-shadow: 0 2px 12px rgba(0, 240, 255, 0.15) !important;
}

.armt-btn-shop:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.35), rgba(124, 58, 237, 0.4)) !important;
  border-color: #00F0FF !important;
  color: #FFF !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   CREADORES MAX-LEVEL UPGRADE: LIVE OBS PREVIEW, AVATAR CAPSULE, BOT VIP & FAQ
   ========================================================================== */

/* 1. Roblox User Live Preview Capsule */
.roblox-user-preview-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(11, 15, 25, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 8px;
  animation: fadeIn 0.25s ease-out;
}
.roblox-user-preview-box.valid {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}
.roblox-user-preview-box.invalid {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.08);
}
.rupb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #00F0FF;
  background: #0B0E14;
  object-fit: cover;
  flex-shrink: 0;
}
.roblox-user-preview-box.valid .rupb-avatar {
  border-color: #10B981;
}
.rupb-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rupb-name {
  font-size: 13.5px;
  color: #F8FAFC;
}
.rupb-display {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
}
.rupb-status {
  font-size: 11px;
  font-weight: 700;
  color: #10B981;
  letter-spacing: 0.3px;
}
.rupb-loading {
  font-size: 12px;
  color: #00F0FF;
}
.rupb-error {
  font-size: 12px;
  color: #EF4444;
  font-weight: 600;
}
.input-valid-roblox {
  border-color: #10B981 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25) !important;
}
.input-invalid-roblox {
  border-color: #EF4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25) !important;
}
.highlight-glow {
  border-color: #00F0FF !important;
  box-shadow: 0 0 20px #00F0FF !important;
  transition: all 0.3s ease;
}

/* 2. FAQ Dynamic Search Bar */
.faq-search-bar-wrap {
  display: flex;
  align-items: center;
  max-width: 900px;
  margin: 0 auto 20px auto;
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px 16px;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s;
}
.faq-search-bar-wrap:focus-within {
  border-color: #00F0FF;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}
.fsb-ico {
  font-size: 16px;
  opacity: 0.7;
}
.faq-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #F8FAFC;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.faq-search-input::placeholder {
  color: #64748B;
}
.faq-search-clear {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94A3B8;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: background 0.2s;
}
.faq-search-clear:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFF;
}

/* 3. Season Pass Milestones Track */
.csb-milestones-track {
  position: relative;
  width: 100%;
  height: 38px;
  margin-top: 14px;
}
.csb-milestone-node {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cmn-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1E293B;
  border: 2px solid #0B0E14;
  margin-bottom: 4px;
  transition: all 0.3s;
}
.csb-milestone-node.reached .cmn-dot {
  background: #00F0FF;
  box-shadow: 0 0 10px #00F0FF;
}
.cmn-pct {
  font-size: 10px;
  font-weight: 800;
  color: #64748B;
  line-height: 1;
}
.csb-milestone-node.reached .cmn-pct {
  color: #00F0FF;
}
.cmn-gift {
  font-size: 11px;
  font-weight: 700;
  color: #CBD5E1;
  white-space: nowrap;
  margin-top: 2px;
}
.csb-milestone-node.reached .cmn-gift {
  color: #F8FAFC;
}

/* 4. OBS Skin Selector & 16:9 Live Monitor */
.obs-skin-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px 0;
  flex-wrap: wrap;
}
.oss-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.5px;
}
.oss-pills {
  display: flex;
  gap: 8px;
}
.oss-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.3px;
}
.oss-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFF;
}
.oss-pill.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}
.obs-preview-monitor {
  background: #05070B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.opm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.opm-dots {
  display: flex;
  gap: 6px;
}
.opm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.opm-dot.dot-red { background: #EF4444; }
.opm-dot.dot-yellow { background: #F59E0B; }
.opm-dot.dot-green { background: #10B981; }
.opm-screen-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.5px;
}
.opm-fps-tag {
  font-size: 10px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.opm-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, #07090E 1px);
  background-size: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: all 0.3s ease;
}
.opm-watermark {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.12);
  font-weight: 800;
  letter-spacing: 1.5px;
  pointer-events: none;
}
.opm-idle-hint {
  font-size: 12px;
  color: #64748B;
  text-align: center;
  line-height: 1.4;
}
.opm-idle-hint strong {
  color: #00F0FF;
}
.opm-alert-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(11, 15, 25, 0.94);
  border: 2px solid #00F0FF;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  z-index: 2;
  max-width: 90%;
}
.oab-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.oab-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #0B0E14;
}
.oab-avatar-ring {
  position: absolute;
  inset: -3px;
  border: 2px dashed #00F0FF;
  border-radius: 50%;
  animation: none !important; /* 0% GPU idle */
}
.oab-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oab-tag {
  font-size: 10px;
  font-weight: 800;
  color: #F59E0B;
  letter-spacing: 0.5px;
}
.oab-title {
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
}
.oab-desc {
  font-size: 12px;
  color: #00F0FF;
  font-weight: 700;
}
.oab-code {
  font-size: 10px;
  color: #94A3B8;
}
.animate-alert-pop {
  animation: alertPopAnim 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes alertPopAnim {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Skins del monitor */
.opm-screen.skin-gold .opm-alert-box {
  border-color: #F59E0B;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}
.opm-screen.skin-gold .oab-avatar-ring {
  border-color: #F59E0B;
}
.opm-screen.skin-gold .oab-desc {
  color: #F59E0B;
}
.opm-screen.skin-minimal .opm-alert-box {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
  background: #090C12;
}
.opm-screen.skin-minimal .oab-avatar-ring {
  border-color: #94A3B8;
}
.opm-screen.skin-minimal .oab-desc {
  color: #E2E8F0;
}

/* 5. Historial de Canjes & Bot VIP Tracking */
.canjes-tracking-container {
  margin-top: 18px;
}
.canjes-tracking-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.canje-track-card {
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  transition: all 0.2s ease;
}
.canje-track-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
}
.ctc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.ctc-reward-name {
  font-size: 15px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ctc-id-tag {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  color: #94A3B8;
  font-weight: 700;
  font-family: monospace;
}
.ctc-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.ctc-status-pill.status-pendiente {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.ctc-status-pill.status-proceso {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
}
.ctc-status-pill.status-entregado {
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.ctc-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  margin-bottom: 14px;
  overflow: hidden;
}
.ctc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00F0FF, #10B981);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ctc-details-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.ctc-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cdi-label {
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
}
.cdi-val {
  font-size: 13px;
  font-weight: 700;
}
.text-neon-gold {
  color: #F59E0B !important;
}
.text-neon-cyan {
  color: #00F0FF !important;
}
.canjes-empty-box {
  text-align: center;
  padding: 40px 20px;
  background: #0B0E14;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}
.ceb-ico {
  font-size: 32px;
  margin-bottom: 8px;
}
.ceb-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 1px;
}
.ceb-desc {
  font-size: 12px;
  color: #64748B;
  max-width: 400px;
  margin: 6px auto 0 auto;
  line-height: 1.4;
}

/* ==========================================================================
   UPGRADE CREATORS MAXIMUM LEVEL: TRUST TICKER, TELEMETRY & LIVE STREAMERS
   ========================================================================== */

/* 1. Live Trust Ticker */
.creadores-trust-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  width: 100%;
}
.ctt-pill {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #E2E8F0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
}
.ctt-pill:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 240, 255, 0.15);
}
.ctt-ico {
  font-size: 1rem;
}

/* 2. Interactive Jailbreak Vehicle Telemetry Panel */
.btn-toggle-jb-stats {
  width: 100%;
  margin: 10px 0 6px 0;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00F0FF;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-toggle-jb-stats:hover,
.btn-toggle-jb-stats.open {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}
.btn-toggle-jb-stats .jt-arrow {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}
.btn-toggle-jb-stats.open .jt-arrow {
  transform: rotate(180deg);
}

.jb-stats-panel {
  background: #07090E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: none;
}
.jb-stats-panel.active {
  display: block;
  animation: jbStatsSlideDown 0.3s ease;
}
@keyframes jbStatsSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.jb-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #94A3B8;
  margin-bottom: 3px;
}
.jb-stat-row strong {
  font-weight: 800;
}
.jb-stat-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  width: 100%;
  overflow: hidden;
  margin-bottom: 6px;
}
.jb-stat-fill {
  height: 100%;
  background: linear-gradient(90deg, #00F0FF, #10B981);
  border-radius: 2px;
}
.jb-stat-meta {
  margin-top: 8px;
  font-size: 0.72rem;
  color: #64748B;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 6px;
  line-height: 1.35;
}

/* 3. Streamer Card Live Glow (Conic Gradient) */
.streamer-bento-card.streamer-card-live-glow {
  position: relative;
  border-color: transparent !important;
}
.streamer-bento-card.streamer-card-live-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: conic-gradient(from 0deg, #FF0055, #00F0FF, #FFD700, #FF0055);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: none !important; /* 0% GPU idle */
  pointer-events: none;
}
@keyframes spinLiveGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 4. Cockpit Funnel Conversion Rate (CR%) Badge */
.fc-cr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #10B981;
}

/* 5. PIN Modal Lock Warning */
.pm-lock-warning {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}

/* ==========================================================================
   OPTIMIZACIÓN ESPACIAL Y ERGONÓMICA DE RANKING (VISTA RÁPIDA, STICKY & NAV)
   ========================================================================== */

/* 1. Navegación Rápida Superior (Header Quick Nav) */
.ranked-quick-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.rqn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(14, 18, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  user-select: none;
}

.rqn-chip:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.45);
  color: #00F0FF;
  transform: translateY(-1.5px);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.rqn-chip-me {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(124, 58, 237, 0.25));
  border-color: rgba(255, 215, 0, 0.45);
  color: #FFD700;
}

.rqn-chip-me:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.28), rgba(124, 58, 237, 0.38));
  border-color: #FFD700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
}

/* 2. Barra de Controles Sticky Pro & Responsive */
.ranking-controls-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  position: sticky !important;
  top: 66px !important;
  z-index: 25 !important;
  background: rgba(11, 14, 23, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.2s ease !important;
}

.rcb-right-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 3. Selector de Vista (Arena 3D / Solo Tabla) */
.rcb-view-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(18, 24, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.rcb-view-btn {
  background: transparent;
  border: none;
  color: rgba(226, 232, 240, 0.7);
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.rcb-view-btn:hover {
  color: #FFFFFF;
}

.rcb-view-btn.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(124, 58, 237, 0.35));
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

/* Modo 'Solo Tabla' (Colapso suave de elementos superiores) */
.inicio-ranking-section.ranking-mode-table-only .arena-telemetry-grid,
.inicio-ranking-section.ranking-mode-table-only .arena-rival-motivation-ticker,
.inicio-ranking-section.ranking-mode-table-only .podio-olimpico-container {
  display: none !important;
}

.inicio-ranking-section.ranking-mode-table-only .ranking-scroll-box .rsb-list-wrap {
  max-height: 720px !important;
}

/* 4. Resaltado Pulso Neón para Mi Puesto o Salto Rápido */
.pulse-highlight {
  animation: rowPulseNeon 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@keyframes rowPulseNeon {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8), inset 0 0 20px rgba(255, 215, 0, 0.4);
    border-color: #FFD700;
  }
  30% {
    box-shadow: 0 0 28px 4px rgba(255, 215, 0, 0.7), inset 0 0 25px rgba(255, 215, 0, 0.35);
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
  }
  100% {
    box-shadow: none;
  }
}

/* 5. Ajustes Responsivos Móviles */
@media (max-width: 900px) {
  .ranking-controls-bar {
    top: 56px !important;
  }
}
@media (max-width: 768px) {
  .arena-rival-motivation-ticker {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .armt-matchup-bar {
    gap: 6px !important;
  }
  .armt-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .armt-action-pill {
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
  }
  .ranking-controls-bar {
    position: sticky !important;
    top: 54px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .rcb-right-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
  .ranked-quick-nav {
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .rqn-chip {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
}

/* Feedback de Stock en Tarjetas de Metodo Robux */
.robux-method-card.is-out-of-stock {
  opacity: 0.65;
  filter: grayscale(0.4);
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.stock-feedback-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  margin-top: 8px;
  letter-spacing: 0.02em;
}

.stock-feedback-badge.badge-agotado {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.stock-feedback-badge.badge-escasez {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseEscasez {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

/* ==========================================================================
   ROBUX — ELEMENTOS NUEVOS: Reintentar, Delivery Badges, Warn Gamepass
   Plan de Acción 1-4 · TheMorotex Gamer Dark
   ========================================================================== */

/* Botón inline de Reintentar (Acciones 3) — aparece en errores de API Roblox */
.btn-retry-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-left: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.08);
  color: #00F0FF;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  vertical-align: middle;
  white-space: nowrap;
  min-height: 28px;
  min-width: 44px; /* táctil: mínimo 44px */
}
.btn-retry-inline:hover,
.btn-retry-inline:focus-visible {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.7);
  transform: scale(1.04);
  outline: 2px solid rgba(0, 240, 255, 0.4);
  outline-offset: 2px;
}
.btn-retry-inline:active {
  transform: scale(0.97);
}

/* Badge de tiempo de entrega en tarjetas de método — Paso 1 Wizard (Acción 4) */
.cmb-delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94A3B8;
  margin-top: 2px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}
.cmb-delivery-badge.cmb-delivery-fast {
  color: #00F0FF;
}
@media (max-width: 480px) {
  .cmb-delivery-badge {
    font-size: 0.64rem;
    white-space: normal;
  }
}

/* Advertencia de experiencia pública en Paso 1 del Asistente Gamepass (Acción 4) */
.gwa-public-warn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 10px;
  margin: 6px 0 8px;
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  color: #94A3B8;
  line-height: 1.45;
}
.gwa-public-warn .gwa-warn-ico {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1.3;
}
.gwa-public-warn strong {
  color: #F59E0B;
}
@media (max-width: 390px) {
  .gwa-public-warn {
    font-size: 0.74rem;
    padding: 6px 8px;
  }
}

/* ==========================================================================
   TUTORIAL ACORDEÓN GAMEPASS — REDISEÑO BENTO GAMER DARK
   ========================================================================== */
.gp-tutorial-toggle-wrap {
  margin: 12px 0 6px 0;
}

.btn-gp-tutorial-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  color: #E4E4E7;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.btn-gp-tutorial-toggle:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.3);
  color: #FFFFFF;
}

.btn-gp-tutorial-toggle .icon {
  font-size: 1.15rem;
}

.btn-gp-tutorial-toggle .chevron {
  font-size: 1.1rem;
  color: #A1A1AA;
  transition: transform 0.25s ease;
}

.btn-gp-tutorial-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.btn-gp-tutorial-toggle strong {
  color: #FFDE00;
}

.gp-tutorial-card {
  background: #0E121A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
  margin-top: 10px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.gp-tutorial-card.hidden {
  display: none !important;
}

.gp-tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.gp-tut-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gp-tut-icon {
  font-size: 1.25rem;
}

.gp-tut-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

.gp-tut-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gp-tut-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gp-tut-step-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
  list-style: none !important;
}

.gp-tut-step-card::before,
.gp-tut-step-card::marker {
  content: none !important;
  display: none !important;
}

.gp-tut-step-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(124, 58, 237, 0.2);
}

.gp-tut-step-card .step-num {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: #FFDE00 !important;
  color: #000000 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  box-shadow: 0 0 10px rgba(255, 222, 0, 0.3);
}

.gp-tut-step-card .step-body {
  flex: 1;
  min-width: 0;
}

.gp-tut-step-card .step-title {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.gp-tut-step-card .step-desc {
  font-size: 0.88rem;
  color: #A1A1AA;
  line-height: 1.45;
  margin: 0 0 8px 0;
}

.gp-tut-step-card .step-desc:last-child {
  margin-bottom: 0;
}

.gp-tut-step-card .step-desc strong {
  color: #E4E4E7;
}

.gp-tut-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #22D3EE !important;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.gp-tut-link-btn:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: #22D3EE;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.gp-tut-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 222, 0, 0.05);
  border: 1px solid rgba(255, 222, 0, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 10px 0;
  flex-wrap: wrap;
}

.gp-tut-price-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-tut-price-label {
  font-size: 0.75rem;
  color: #A1A1AA;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.gp-tut-price-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFDE00;
  letter-spacing: 0.02em;
}

.btn-copy-tut-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7C3AED;
  border: 1px solid #9061F9;
  color: #FFFFFF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-tut-price:hover {
  background: #6D28D9;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
  transform: translateY(-1px);
}

.btn-copy-tut-price.copied {
  background: #10B981 !important;
  border-color: #059669 !important;
}

.step-subhint {
  font-size: 0.8rem;
  color: #71717A;
  margin: 0;
  line-height: 1.4;
}

.gp-tut-footer-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
}

.gp-tut-tip-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.gp-tut-tip-content {
  font-size: 0.84rem;
  color: #D1D5DB;
  line-height: 1.4;
}

.gp-tut-tip-content strong {
  color: #10B981;
}

@media (max-width: 600px) {
  .gp-tutorial-card {
    padding: 14px 12px;
  }
  .gp-tut-step-card {
    padding: 12px 10px;
    gap: 10px !important;
  }
  .gp-tut-price-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-copy-tut-price {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   MASTER RESPONSIVE OPTIMIZATION: MÓVILES Y TABLETS (ALL VIEWPORTS)
   - Móviles Ultra-Compactos y Estándar: <= 480px (iPhone SE, 13-16, Galaxy S/A)
   - Tablets Vertical / Portrait: 481px - 834px (iPad 10.2, Air, Mini)
   - Tablets Horizontal / Landscape: 835px - 1180px (iPad Pro, Fold)
   ========================================================================== */

/* PREVENCIÓN GLOBAL DE DESBORDAMIENTO HORIZONTAL EN MÓVIL */
html, body {
  max-width: 100vw;
  overflow-x: clip !important;
}

/* 1. MÓVILES COMPACTOS Y ESTÁNDAR (<= 480px) */
@media (max-width: 480px) {
  /* Contenedores con prevención estricta de fuga */
  .container, .wrap, .pagina-inicio, .main-content, .site-main-wrapper {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  /* Hero Banner Real (.hero-banner-wrap y .hero-banner-inner) */
  .hero-banner-wrap {
    padding: 10px 4px !important;
    margin-bottom: 14px !important;
  }
  .hero-banner-inner {
    min-height: clamp(220px, 32vh, 290px) !important;
    padding: 16px 12px 14px !important;
    border-radius: 16px !important;
  }
  .hero-jailbreak-title {
    font-size: clamp(24px, 7.5vw, 34px) !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }
  .hero-title-slash {
    width: 90px !important;
    height: 3px !important;
    margin: 6px auto 0 !important;
  }
  .hero-tagline {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }
  .hero-trust-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .hero-trust-pill {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 9999px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
  }
  .hero-categories-ticker {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .hero-categories-ticker::-webkit-scrollbar {
    display: none !important;
  }
  .ticker-pill {
    font-size: 11px !important;
    padding: 5px 10px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Bento Categorías: Grid asimétrico 2 columnas móvil (Card 1 completa, 2 y 3 compactas sin overflow) */
  body .bento-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 4px !important;
    margin: 16px auto !important;
  }
  body .bento-cat-grid .bento-card:first-child {
    grid-column: span 2 !important;
    padding: 18px 16px !important;
    min-height: 135px !important;
  }
  body .bento-cat-grid .bento-card:not(:first-child) {
    padding: 12px 10px !important;
    min-height: 115px !important;
  }
  body .bento-card .bento-badge {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.8px !important;
  }
  body .bento-card .bento-content h3 {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    margin: 4px 0 !important;
  }
  body .bento-cat-grid .bento-card:not(:first-child) .bento-content p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    opacity: 0.85 !important;
  }
  body .bento-cat-grid .bento-card:first-child .bento-content p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 4px 0 8px 0 !important;
  }
  body .bento-card .bento-link {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  /* Packs Gamer VIP: Carrusel horizontal con scroll snap nativo (elimina 2x2 comprimido) */
  body .packs-bento-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 8px 10px 18px !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    scrollbar-width: none !important;
    scroll-padding: 0 12px !important;
  }
  body .packs-bento-grid::-webkit-scrollbar {
    display: none !important;
  }
  body .pack-bento-card {
    flex: 0 0 calc(85% - 6px) !important;
    min-width: 255px !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }
  body .pack-title {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 6px 0 4px 0 !important;
  }
  body .pack-desc {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  body .pack-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 8px 0 !important;
  }
  body .pack-feat-tag {
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
  }
  body .pack-pricing-row {
    margin-top: 10px !important;
    gap: 8px !important;
  }
  body .pack-actions-group {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }
  body .pack-actions-group .btn {
    flex: 1 1 50% !important;
    min-height: 42px !important;
    font-size: 0.8rem !important;
    padding: 8px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Grilla de Productos Populares y Destacados: 2 columnas estables con alineación de botones */
  body .grid, body .grid-productos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body .producto-card {
    padding: 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body .producto-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 6px !important;
  }
  body .producto-nombre {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    min-height: 2.5em !important;
  }
  body .producto-card .btn-comprar {
    min-height: 42px !important;
    font-size: 12.5px !important;
    padding: 8px 6px !important;
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* Bóvedas Diarias 24H: Stack optimizado con selectores canónicos reales */
  body .inicio-bovedas-banner-section .bovedas-callout-card {
    padding: 16px 10px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }
  body .bcc-content {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  body .bcc-tiers-track {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 10px 0 14px !important;
  }
  body .bcc-tier-capsule {
    padding: 6px 2px !important;
    min-width: 0 !important;
  }
  body .bcc-tier-icon {
    font-size: 17px !important;
  }
  body .bcc-tier-name {
    font-size: 9px !important;
  }
  body .bcc-actions-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  body .bcc-actions-row .btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Podio Olímpico 3D en Celulares (Selectores reales .podio-card, .pedestal-pillar, .rr-name) */
  body .podio-olimpico-container {
    grid-template-columns: 1fr 1.15fr 1fr !important;
    gap: 5px !important;
    padding: 8px 2px !important;
    align-items: end !important;
  }
  body .podio-card {
    padding: 10px 4px 8px !important;
    min-width: 0 !important;
  }
  body .podio-card.podio-gold {
    padding-top: 22px !important;
  }
  body .podio-card.podio-gold .pedestal-pillar {
    height: 22px !important;
  }
  body .podio-card.podio-silver .pedestal-pillar,
  body .podio-card.podio-bronze .pedestal-pillar {
    height: 16px !important;
  }
  body .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 115px !important;
  }
  body .podio-gold .podio-avatar-wrap.podio-avatar-stage-3d img.podio-char-full {
    max-height: 135px !important;
  }
  body .rr-avatar-frame {
    width: 36px !important;
    height: 36px !important;
  }
  body .rr-name {
    font-size: 12.5px !important;
    max-width: 105px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  /* FAQ Acordeón: Selectores reales con áreas táctiles cómodas */
  body .faq-accordion .faq-item summary.faq-question {
    padding: 14px 12px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  body .faq-item summary .faq-q-text {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }
  body .faq-answer {
    padding: 6px 12px 14px !important;
  }
  body .faq-ans-lead {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
  }

  /* Dock Navigation inferior móvil con Safe Area */
  body .gaming-sidebar {
    height: calc(58px + env(safe-area-inset-bottom, 12px)) !important;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 12px)) !important;
  }
  body .site-main-wrapper, body main {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 14px)) !important;
  }
}

/* 2. TABLETS VERTICAL / PORTRAIT (481px a 960px) */
@media (min-width: 481px) and (max-width: 960px) {
  /* Bento Categorías: 2 columnas balanceadas con card líder arriba */
  body .bento-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  body .bento-cat-grid .bento-card:first-child {
    grid-column: span 2 !important;
  }

  /* Catálogo y destacados: 3 columnas fluidas */
  body .grid, body .grid-productos {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Packs VIP: 2 columnas proporcionadas */
  body .packs-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
  }
  body .pack-bento-card {
    flex: unset !important;
    max-width: none !important;
  }

  /* Floating Dock en Tablets: barra centrada elegante tipo iPadOS */
  body .gaming-sidebar {
    width: 90% !important;
    max-width: 580px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(109, 40, 217, 0.3) !important;
    padding: 6px 16px !important;
    height: 60px !important;
  }
  body .site-main-wrapper, body main {
    padding-bottom: 92px !important;
  }
}

/* 3. TABLETS HORIZONTAL / LANDSCAPE (961px a 1180px) */
@media (min-width: 961px) and (max-width: 1180px) {
  /* Grilla de productos: 4 columnas balanceadas */
  body .grid, body .grid-productos {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* Packs VIP: 3 columnas bento equilibradas */
  body .packs-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* Bento Categorías: 3 columnas fluidas */
  body .bento-cat-grid {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   CATALOGO HEADER GAMER DARK (HERO SEARCH, CHIPS & CUSTOM DROPDOWN)
   ========================================================================== */

.catalogo-actions-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

.cat-quick-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  background: rgba(22, 27, 40, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  color: #A1A1AA !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.cat-quick-chip:hover {
  background: rgba(0, 240, 255, 0.1) !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #FFFFFF !important;
}

.cat-quick-chip.active {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25) !important;
}

.cat-quick-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: inherit !important;
}

.cat-quick-chip.active .cat-quick-badge {
  background: rgba(0, 240, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* Custom Gamer Dark Dropdown Component */
.cat-custom-dropdown {
  position: relative !important;
  display: inline-block !important;
  user-select: none !important;
}

.cat-custom-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  background: rgba(18, 22, 34, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  color: #F8FAFC !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box !important;
}

.cat-custom-dropdown-btn:hover {
  border-color: rgba(124, 58, 237, 0.6) !important;
  background: rgba(24, 30, 48, 0.98) !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.25) !important;
  transform: translateY(-1px) !important;
}

.cat-custom-dropdown.open .cat-custom-dropdown-btn,
.cat-custom-dropdown.is-filtered .cat-custom-dropdown-btn {
  border-color: #7C3AED !important;
  background: rgba(124, 58, 237, 0.15) !important;
  color: #E9D5FF !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.35) !important;
}

.ccdb-arrow {
  font-size: 12px !important;
  color: #94A3B8 !important;
  transition: transform 0.25s ease !important;
}

.cat-custom-dropdown.open .ccdb-arrow {
  transform: rotate(180deg) !important;
  color: #00F0FF !important;
}

.cat-custom-dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 220px !important;
  background: rgba(15, 19, 31, 0.98) !important;
  border: 1px solid rgba(124, 58, 237, 0.4) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(124, 58, 237, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1000 !important;
  animation: catDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  box-sizing: border-box !important;
}

.cat-custom-dropdown.open .cat-custom-dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

@keyframes catDropdownFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cat-custom-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  color: #CBD5E1 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.cat-custom-dropdown-item:hover {
  background: rgba(124, 58, 237, 0.18) !important;
  color: #FFFFFF !important;
  border-left: 3px solid #7C3AED !important;
  padding-left: 17px !important;
}

.cat-custom-dropdown-item.active {
  background: rgba(124, 58, 237, 0.28) !important;
  color: #00F0FF !important;
  border-left: 3px solid #00F0FF !important;
  font-weight: 800 !important;
}

.ccdi-icon {
  font-size: 14px !important;
}

.ccdi-text {
  flex: 1 !important;
}

/* Proteccion y compatibilidad nativa */
.cat-demand-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

select, .cat-demand-select {
  color-scheme: dark !important;
}

select option, .cat-demand-select option {
  background-color: #0B0E14 !important;
  color: #F8FAFC !important;
}

@media (max-width: 680px) {
  .catalogo-control-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .catalogo-global-search {
    max-width: 100% !important;
    width: 100% !important;
  }
  .catalogo-actions-bar {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .cat-quick-chip {
    flex: 0 0 auto !important;
    justify-content: center !important;
  }
  .cat-custom-dropdown {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  .cat-custom-dropdown-btn {
    width: 100% !important;
  }
  .cat-custom-dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* ==========================================================================
   MASTER RESPONSIVE ENGINE: TIER-1 STORE MOBILE & TABLET CORRECTIONS
   ========================================================================== */

/* 1. PREVENCIÓN DEFINITIVA DE AUTO-ZOOM EN DISPOSITIVOS TÁCTILES / SAFARI IOS */
@media (max-width: 960px) {
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea,
  .cat-search-input,
  .gaming-header .header-search input[type="search"],
  .cgs-input,
  .cupon-input,
  .checkout-input,
  .canjear-input,
  .lfc-search-input,
  .vsearch-field input,
  .picker-search-wrap input {
    font-size: 16px !important;
  }
}

/* 2. ERGONOMÍA TÁCTIL Y TOUCH TARGETS MÍNIMOS (44x44px) */
@media (max-width: 960px) {
  .icon-btn,
  .search-toggle,
  .cart-btn,
  .notif-btn,
  .menu-toggle,
  .btn-logout-mini,
  .modal-close-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .icon-btn svg,
  .search-toggle svg,
  .cart-btn svg,
  .notif-btn svg,
  .menu-toggle svg {
    pointer-events: none !important;
  }

  .gaming-nav a,
  .nav-more-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* 3. MODALES / BOTTOM SHEET NATIVO Y CONTENCIÓN DE SCROLL */
@media (max-width: 768px) {
  .modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 100000 !important;
  }

  .modal,
  .pack-modal-content,
  .mchart-modal-content,
  .picker-modal-content {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 88vh !important;
    max-height: calc(88dvh - env(safe-area-inset-top, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 16px)) 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }

  /* Drag handle visual para Bottom Sheet en móvil */
  .modal::before,
  .pack-modal-content::before,
  .picker-modal-content::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 4.5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    margin: 0 auto 14px auto !important;
  }

  /* Contenedores con scroll interno protegido */
  #carritoContenido,
  .buscar-sugerencias,
  .site-nav,
  .notif-list {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .modal-backdrop {
    z-index: 100000 !important;
  }
}

/* Lock scroll de fondo cuando hay modal abierto en móvil/tablet */
body.modal-open {
  overflow: hidden !important;
}

/* Animación de rebote pop para el badge del carrito */
@keyframes badgePop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.dock-cart-badge.badge-bounce,
.cart-count.badge-bounce {
  animation: badgePop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 4. PROTECCIÓN EN ORIENTACIÓN HORIZONTAL (LANDSCAPE) CON MUESCA */
@media (orientation: landscape) and (max-height: 560px) {
  body {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
  .gaming-header {
    padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
  }
  .site-main-wrapper,
  main,
  .pie,
  footer {
    padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 10px)) !important;
  }
  body .gaming-sidebar,
  .gaming-sidebar {
    height: 52px !important;
    bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
    max-width: 420px !important;
  }
  .gaming-sidebar .sidebar-item .sidebar-label {
    display: none !important;
  }
  .gaming-sidebar .sidebar-item .sidebar-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* 5. DISCRIMINACIÓN DE HARDWARE: COARSE (TÁCTIL) VS FINE (CURSOR/TECLADO) */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .btn-comprar,
  .sidebar-item,
  .cat-chip,
  .cat-demand-btn,
  .producto-card,
  .pack-bento-card,
  .bento-card,
  .icon-btn,
  .search-toggle,
  .cart-btn,
  .notif-btn,
  .menu-toggle,
  .btn-currency-selector,
  .modal-close-btn {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .btn:active,
  .btn-comprar:active,
  .sidebar-item:active,
  .cat-chip:active,
  .cat-demand-btn:active {
    transform: scale(0.97) !important;
    transition: transform 0.08s ease !important;
  }

  .icon-btn:active,
  .search-toggle:active,
  .cart-btn:active,
  .notif-btn:active,
  .menu-toggle:active,
  .btn-currency-selector:active,
  .modal-close-btn:active {
    transform: scale(0.92) !important;
    transition: transform 0.08s ease !important;
  }
}

/* 6. HEADER COMPACTO EN CELULARES ULTRA-ESTRECHOS (<= 380px) */
@media (max-width: 380px) {
  .header-actions {
    gap: 3px !important;
  }
  .btn-canjear-pill {
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  .canjear-txt {
    display: none !important;
  }
  .btn-currency-selector {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  #currCode {
    display: none !important;
  }
  .header-brand .logo-badge {
    height: 32px !important;
    width: 32px !important;
  }
}

@keyframes shakeGlowError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake-glow-error {
  animation: shakeGlowError 0.45s ease-in-out !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
}

/* 7. DOCK FLOTANTE CÁPSULA UNIFICADO PARA CELULARES Y TABLETS (<= 960px) */
@media (max-width: 960px) {
  body .gaming-sidebar,
  .gaming-sidebar {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
    max-width: 460px !important;
    height: 60px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(14, 18, 28, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(124, 58, 237, 0.25) !important;
    padding: 0 10px !important;
    margin: 0 !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: stretch !important;
  }

  body .site-main-wrapper,
  body main,
  body .pie,
  body footer {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 16px)) !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  .gaming-sidebar .sidebar-brand,
  .gaming-sidebar .sidebar-footer,
  .gaming-sidebar .sidebar-item.desktop-only,
  .gaming-sidebar .sidebar-item[href="/robux"],
  .gaming-sidebar .sidebar-item[href="/creadores"] {
    display: none !important;
  }

  .gaming-sidebar .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 4px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  .gaming-sidebar .sidebar-item {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 44px !important;
    height: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    color: #9C9BAF !important;
    padding: 4px 2px !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, color 0.15s ease !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-icon {
    font-size: 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    position: relative !important;
    transition: transform 0.15s ease !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #9C9BAF !important;
    transition: stroke 0.15s ease !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-label {
    display: block !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin-top: 2px !important;
    line-height: 1 !important;
    color: #9C9BAF !important;
    transition: color 0.15s ease !important;
  }

  /* Estado Activo: Barra superior brillante y acento dorado */
  .gaming-sidebar .sidebar-item.active {
    color: #FFD836 !important;
    background: transparent !important;
  }

  .gaming-sidebar .sidebar-item.active::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #FFD836 !important;
    box-shadow: 0 0 10px #FFD836, 0 2px 14px rgba(255, 216, 54, 0.6) !important;
  }

  .gaming-sidebar .sidebar-item.active .sidebar-icon {
    transform: translateY(-1px) !important;
  }

  .gaming-sidebar .sidebar-item.active .sidebar-icon svg {
    stroke: #FFD836 !important;
    filter: drop-shadow(0 0 6px rgba(255, 216, 54, 0.6)) !important;
  }

  .gaming-sidebar .sidebar-item.active .sidebar-label {
    color: #FFD836 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(255, 216, 54, 0.4) !important;
  }

  /* Badge de Bóveda Diaria (Punto Neón Verde) */
  .sidebar-vault-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sidebar-daily-badge.is-ready {
    display: block !important;
    position: absolute !important;
    top: -1px !important;
    right: -3px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #00E676 !important;
    box-shadow: 0 0 8px #00E676, 0 0 14px rgba(0, 230, 118, 0.9) !important;
  }

  /* Badge de Carrito (Píldora Roja Coral) */
  .dock-cart-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .dock-cart-badge,
  .gaming-sidebar .cart-count {
    position: absolute !important;
    top: -3px !important;
    right: -5px !important;
    background: #FF4D6D !important;
    color: #FFFFFF !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    box-shadow: 0 0 10px rgba(255, 77, 109, 0.6) !important;
    border: 1.5px solid #0E1017 !important;
    z-index: 2 !important;
    line-height: 1 !important;
  }

  .dock-cart-badge[hidden],
  .gaming-sidebar .cart-count[hidden],
  .gaming-sidebar .cart-count:empty {
    display: none !important;
  }

  .sidebar-daily-badge:not(.is-ready),
  .sidebar-daily-badge[style*="display: none"] {
    display: none !important;
  }

  .gaming-sidebar .sidebar-item:active {
    transform: scale(0.92) !important;
  }

  .gaming-sidebar .sidebar-item:active .sidebar-icon {
    transform: scale(0.9) !important;
  }
}

/* 7.1 CALIBRACIÓN ESPECÍFICA POR DISPOSITIVO: ULTRA-COMPACT SMARTPHONES (<= 360px) */
@media (max-width: 360px) {
  body .gaming-sidebar,
  .gaming-sidebar {
    width: calc(100% - 12px) !important;
    max-width: 330px !important;
    height: 56px !important;
    padding: 0 4px !important;
    bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
  }

  .gaming-sidebar .sidebar-nav {
    gap: 2px !important;
    padding: 0 2px !important;
  }

  .gaming-sidebar .sidebar-item {
    min-width: 38px !important;
    padding: 2px 0 !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-label {
    font-size: 9px !important;
    letter-spacing: -0.2px !important;
    margin-top: 1px !important;
  }

  .gaming-header {
    padding: 0 8px !important;
    gap: 4px !important;
  }

  .header-brand .brand-title {
    font-size: 12.5px !important;
    letter-spacing: 0px !important;
  }

  .header-brand .brand-badge-shop {
    display: none !important;
  }

  .btn-canjear-pill {
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .hero-jailbreak-title {
    font-size: 21px !important;
    line-height: 1.15 !important;
  }

  .hero-jailbreak-sub {
    font-size: 11.5px !important;
    margin-bottom: 8px !important;
  }

  .htb-pill {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }
}

/* 7.2 CALIBRACIÓN SMARTPHONES ESTÁNDAR Y PRO (361px a 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  body .gaming-sidebar,
  .gaming-sidebar {
    width: calc(100% - 16px) !important;
    max-width: 430px !important;
    height: 60px !important;
    padding: 0 8px !important;
  }

  .gaming-sidebar .sidebar-nav {
    gap: 4px !important;
    padding: 0 4px !important;
  }

  .gaming-sidebar .sidebar-item {
    min-width: 44px !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-label {
    font-size: 10.5px !important;
    letter-spacing: 0.2px !important;
  }
}

/* 7.3 CALIBRACIÓN PHABLETS, PLEGABLES Y TABLETS PEQUEÑAS (481px a 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  body .gaming-sidebar,
  .gaming-sidebar {
    width: calc(100% - 32px) !important;
    max-width: 480px !important;
    height: 62px !important;
    padding: 0 12px !important;
    bottom: 12px !important;
  }

  .gaming-sidebar .sidebar-nav {
    gap: 8px !important;
    padding: 0 8px !important;
  }

  .gaming-sidebar .sidebar-item {
    min-width: 44px !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-label {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
  }

  body .grid,
  body .grid-productos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body .bento-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .bento-card:first-child {
    grid-column: span 2 !important;
  }
}

/* 7.4 CALIBRACIÓN TABLETS VERTICALES: IPAD, GALAXY TAB (769px a 960px) */
@media (min-width: 769px) and (max-width: 960px) {
  body .gaming-sidebar,
  .gaming-sidebar {
    width: 90% !important;
    max-width: 540px !important;
    height: 64px !important;
    padding: 0 18px !important;
    bottom: 14px !important;
  }

  .gaming-sidebar .sidebar-nav {
    gap: 12px !important;
    padding: 0 10px !important;
  }

  .gaming-sidebar .sidebar-item {
    min-width: 44px !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .gaming-sidebar .sidebar-item .sidebar-label {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  body .grid,
  body .grid-productos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body .bento-cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .bento-card:first-child {
    grid-column: span 1 !important;
  }

  body .packs-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .podio-olimpico-container {
    max-width: 720px !important;
    margin: 0 auto !important;
  }
}

/* 7.5 CALIBRACIÓN TABLETS HORIZONTAL Y ESCRITORIO COMPACTO (961px a 1180px) */
@media (min-width: 961px) and (max-width: 1180px) {
  body .site-main-wrapper {
    margin-left: 76px !important;
    width: calc(100% - 76px) !important;
    padding-bottom: 40px !important;
  }

  body .grid,
  body .grid-productos {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body .bento-cat-grid {
    grid-template-columns: 1.3fr 1fr 1fr !important;
    gap: 16px !important;
  }

  body .packs-bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* 7.6 SUB-PÁGINAS ADAPTATIVAS (CALCULADORA, BÓVEDAS, VALORES) */
@media (max-width: 768px) {
  .trade-arena {
    flex-direction: column !important;
    gap: 14px !important;
  }

  .trade-side-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .trade-wfl-meter {
    width: 100% !important;
    margin: 0 auto !important;
  }

  .trade-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .user-vault-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .bovedas-main {
    gap: 14px !important;
  }

  .valores-scroll-wrap {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
}

@media (max-width: 360px) {
  .trade-slots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

.cat-filter-chips,
.cat-demand-chips,
.hero-categories-ticker,
.hero-trust-bar,
.packs-bento-grid,
.populares-scroll,
.trending-strip,
.valores-scroll-wrap,
.bovedas-preview-strip,
.cat-controls-unified-row {
  touch-action: pan-y pinch-zoom !important;
}





/* Bento Card Tier Quick Access Pills (Gamer Dark Style) */
.bcc-tier-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: auto !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 5 !important;
}

.bcc-tier-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.bcc-tier-pill:hover {
  transform: translateY(-2px) !important;
}

.bcc-tier-pill.btp-olimpo:hover {
  background: rgba(255, 222, 0, 0.15) !important;
  border-color: #FFDE00 !important;
  color: #FFDE00 !important;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.35) !important;
}

.bcc-tier-pill.btp-elite:hover {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: #C084FC !important;
  color: #C084FC !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35) !important;
}

.bcc-tier-pill.btp-accesible:hover {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35) !important;
}

.bcc-tier-pill.btp-obtenible:hover {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: #4ADE80 !important;
  color: #4ADE80 !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35) !important;
}


/* ==========================================================================
   ARQUITECTURA TOPBAR OPTION B (AAA HEADER LIMPIO & ADAPTATIVO MULTI-PANTALLA)
   - Secciones de tienda centralizadas en Sidebar Izquierdo
   - Topbar dedicado: Branding + Buscador Central Fluido + Herramientas de Compra/Usuario
   ========================================================================== */

/* 1. Ocultar enlaces redundantes de navegacion en Topbar para TODAS las pantallas */
.gaming-header .gaming-nav {
  display: none !important;
}

/* 2. Topbar Header Contenedor Maestro */
.gaming-header {
  height: 58px !important;
  background: rgba(11, 14, 20, 0.88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}

/* 3. Branding (Izquierda) */
.gaming-header .header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}

/* 4. Buscador Central Destacado (Desktop >= 901px) */
@media (min-width: 901px) {
  .gaming-header .header-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 360px !important;
    max-width: 520px !important;
    min-width: 220px !important;
    margin: 0 auto !important;
  }

  .gaming-header .header-search input[type="search"] {
    width: 100% !important;
    height: 38px !important;
    padding: 0 44px 0 38px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 13px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
  }

  .gaming-header .header-search input[type="search"]:focus {
    border-color: #00E5FF !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.3) !important;
  }

  .gaming-header .header-search .hs-ico {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: #8C99AE !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  .gaming-header .header-search .search-kbd-hint {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #7A7E92 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
}

/* 5. Herramientas y Acciones (Derecha) */
@media (min-width: 901px) {
  .gaming-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  .gaming-header .btn-canjear-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #00E5FF !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
  }

  .gaming-header .btn-canjear-pill:hover {
    background: #00E5FF !important;
    color: #0E1017 !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.5) !important;
  }

  .gaming-header .btn-topbar-forja-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #F59E0B !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .gaming-header .btn-topbar-forja-pill:hover {
    background: rgba(245, 158, 11, 0.25) !important;
    border-color: #FBBF24 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
  }

  .gaming-header .btn-topbar-forja-pill .forja-pill-ico {
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .gaming-header .btn-topbar-forja-pill .forja-pill-ico svg,
  .forja-pill-ico svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .gaming-header .btn-topbar-forja-pill .forja-pill-txt {
    line-height: 1 !important;
    letter-spacing: 0.3px !important;
  }

  .gaming-header .btn-currency-selector {
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .gaming-header .cart-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    color: #A6B4C9 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .gaming-header .user-pill-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .gaming-header .user-pill-name {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* 6. Adaptabilidad Progresiva en Pantallas de PC Compactas / Laptops */
@media (min-width: 901px) and (max-width: 1366px) {
  .gaming-header {
    padding: 0 14px !important;
    gap: 10px !important;
  }

  .gaming-header .header-brand .brand-sub {
    display: none !important;
  }

  .gaming-header .header-search {
    max-width: 360px !important;
    margin: 0 10px !important;
  }

  .gaming-header .header-actions {
    gap: 8px !important;
  }

  .gaming-header .user-pill-name {
    max-width: 100px !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .gaming-header .header-search {
    max-width: 260px !important;
    min-width: 160px !important;
  }

  .gaming-header .header-search .search-kbd-hint {
    display: none !important;
  }

  .gaming-header .btn-canjear-pill {
    padding: 0 10px !important;
  }

  .gaming-header .btn-canjear-pill .canjear-txt {
    display: none !important;
  }

  .gaming-header .btn-topbar-forja-pill {
    padding: 0 10px !important;
  }

  .gaming-header .btn-topbar-forja-pill .forja-pill-txt {
    display: none !important;
  }

  .gaming-header .user-pill-name {
    max-width: 80px !important;
  }
}

/* ==========================================================================
   6. GAMING HUD SUBGRIDS & PANORAMIC CARDS (TUNING, ARSENAL & HOGAR)
   ========================================================================== */
.catalogo-hud-subgrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.catalogo-hud-hogar-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

.cat-hud-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
    linear-gradient(145deg, rgba(16, 22, 36, 0.94) 0%, rgba(10, 14, 24, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  padding: 20px 18px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* Cyber Bevel Top Corner Accent */
.cat-hud-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.08) 50%) !important;
  border-top-right-radius: 18px !important;
  pointer-events: none !important;
}

/* Shimmer Sweep Effect */
.cat-hud-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent) !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
  transition: none !important;
}

.cat-hud-card:hover::after {
  left: 140% !important;
  transition: left 0.75s ease-in-out !important;
}

.cat-hud-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 240, 255, 0.12) !important;
}

/* Top bar: Badge & Count */
.chc-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.chc-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.chc-badge.hud-badge-purple { color: #C084FC !important; border-color: rgba(192, 132, 252, 0.3) !important; background: rgba(192, 132, 252, 0.08) !important; }
.chc-badge.hud-badge-orange { color: #FB923C !important; border-color: rgba(251, 146, 60, 0.3) !important; background: rgba(251, 146, 60, 0.08) !important; }
.chc-badge.hud-badge-gold { color: #FCD34D !important; border-color: rgba(252, 211, 77, 0.3) !important; background: rgba(252, 211, 77, 0.08) !important; }
.chc-badge.hud-badge-emerald { color: #34D399 !important; border-color: rgba(52, 211, 153, 0.3) !important; background: rgba(52, 211, 153, 0.08) !important; }
.chc-badge.hud-badge-cyan { color: #22D3EE !important; border-color: rgba(34, 211, 238, 0.3) !important; background: rgba(34, 211, 238, 0.08) !important; }
.chc-badge.hud-badge-blue { color: #60A5FA !important; border-color: rgba(96, 165, 250, 0.3) !important; background: rgba(96, 165, 250, 0.08) !important; }
.chc-badge.hud-badge-amber { color: #FBBF24 !important; border-color: rgba(251, 191, 36, 0.3) !important; background: rgba(251, 191, 36, 0.08) !important; }
.chc-badge.hud-badge-violet { color: #A78BFA !important; border-color: rgba(167, 139, 250, 0.3) !important; background: rgba(167, 139, 250, 0.08) !important; }

.chc-count {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.5px !important;
}

/* Image & Pedestal */
.chc-img-pedestal {
  position: relative !important;
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.chc-pedestal-platform {
  position: absolute !important;
  bottom: 6px !important;
  width: 78% !important;
  height: 18px !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 65%, transparent 75%) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  transform: perspective(300px) rotateX(60deg) !important;
  pointer-events: none !important;
}

.chc-pedestal-glow {
  position: absolute !important;
  bottom: 0 !important;
  width: 110px !important;
  height: 55px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease !important;
}

.cat-hud-card:hover .chc-pedestal-glow {
  opacity: 1 !important;
}

.chc-pedestal-glow.purple-glow { background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, transparent 70%) !important; }
.chc-pedestal-glow.orange-glow { background: radial-gradient(circle, rgba(249, 115, 22, 0.35) 0%, transparent 70%) !important; }
.chc-pedestal-glow.gold-glow { background: radial-gradient(circle, rgba(234, 179, 8, 0.35) 0%, transparent 70%) !important; }
.chc-pedestal-glow.emerald-glow { background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 70%) !important; }
.chc-pedestal-glow.cyan-glow { background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, transparent 70%) !important; }
.chc-pedestal-glow.blue-glow { background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%) !important; }
.chc-pedestal-glow.amber-glow { background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, transparent 70%) !important; }
.chc-pedestal-glow.violet-glow { background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%) !important; }

.chc-item-img {
  max-width: 82% !important;
  max-height: 95px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75)) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}

.cat-hud-card:hover .chc-item-img {
  transform: translateY(-6px) scale(1.08) !important;
}

/* Card Body, Typography & Telemetry */
.chc-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.chc-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px !important;
  letter-spacing: 0.3px !important;
}

.chc-desc {
  font-size: 12px !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
  margin: 0 0 12px !important;
  flex: 1 !important;
}

.chc-telemetry-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.chc-telemetry-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #CBD5E1 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.5px !important;
}

/* Interactive CTA */
.chc-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  transition: all 0.22s ease !important;
}

.chc-cta .chc-chevron {
  font-size: 14px !important;
  transition: transform 0.22s ease !important;
  margin-left: 6px !important;
}

.cat-hud-card:hover .chc-cta {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.cat-hud-card:hover .chc-cta .chc-chevron {
  transform: translateX(4px) !important;
}

.chc-cta.hud-cta-purple:hover { color: #C084FC !important; border-color: rgba(192, 132, 252, 0.5) !important; }
.chc-cta.hud-cta-orange:hover { color: #FB923C !important; border-color: rgba(251, 146, 60, 0.5) !important; }
.chc-cta.hud-cta-gold:hover { color: #FCD34D !important; border-color: rgba(252, 211, 77, 0.5) !important; }
.chc-cta.hud-cta-emerald:hover { color: #34D399 !important; border-color: rgba(52, 211, 153, 0.5) !important; }
.chc-cta.hud-cta-cyan:hover { color: #22D3EE !important; border-color: rgba(34, 211, 238, 0.5) !important; }
.chc-cta.hud-cta-blue:hover { color: #60A5FA !important; border-color: rgba(96, 165, 250, 0.5) !important; }
.chc-cta.hud-cta-amber:hover { color: #FBBF24 !important; border-color: rgba(251, 191, 36, 0.5) !important; }
.chc-cta.hud-cta-violet:hover { color: #A78BFA !important; border-color: rgba(167, 139, 250, 0.5) !important; }

/* Panoramic layout for Hogar (Penthouses & Bocinas) */
@media (min-width: 768px) {
  .cat-hud-card-panoramic .chc-panoramic-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .cat-hud-card-panoramic .chc-img-pedestal {
    width: 140px !important;
    min-width: 140px !important;
    height: 120px !important;
    margin-bottom: 0 !important;
  }
}

/* Responsive Breakpoints for Subgrid & Hogar */
@media (max-width: 1024px) {
  .catalogo-hud-subgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .catalogo-hud-hogar-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .catalogo-hud-subgrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .catalogo-hud-hogar-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cat-hud-card {
    padding: 16px 14px !important;
  }
  .chc-img-pedestal {
    height: 100px !important;
  }
  .chc-item-img {
    max-height: 80px !important;
  }
}


/* ==========================================================================
   MENÚ SÁNDWICH / HAMBURGUESA UNIFICADO — EXCLUSIÓN MUTUA CON SIDEBAR (960px)
   - Cuando la barra lateral izquierda está activa (>= 961px): el menú sándwich desaparece.
   - Cuando la barra pasa abajo como Dock (<= 960px): el menú sándwich se activa en cabecera.
   ========================================================================== */

/* 1. Botón hamburguesa visible SOLO cuando el sidebar lateral NO está activo (<= 960px) */
@media (max-width: 960px) {
  .gaming-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    order: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10001 !important;
    touch-action: manipulation !important;
  }

  .gaming-header .menu-toggle:active,
  .gaming-header .menu-toggle.abierto {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
  }
}

/* 2. Cuando se activa la barra de al lado (>= 961px): botón y menú desaparecen */
@media (min-width: 961px) {
  .gaming-header .menu-toggle,
  .site-nav {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

/* 3. Menú Desplegable Sándwich .site-nav (Cerrado por defecto) */
.site-nav:not(.abierto) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 4. Menú Desplegable Sándwich .site-nav.abierto (Solo visible en <= 960px) */
@media (max-width: 960px) {
  .site-nav.abierto {
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    visibility: visible !important;
    position: fixed !important;
    top: 58px !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    padding: 14px 12px !important;
    gap: 6px !important;
    background: rgba(14, 18, 28, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 215, 0, 0.2) !important;
    max-height: calc(100vh - 75px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    animation: mtxMenuIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  /* Celular (<= 600px): Ancho completo adaptativo */
  @media (max-width: 600px) {
    .site-nav.abierto {
      left: 8px !important;
      right: 8px !important;
      width: auto !important;
      max-width: calc(100vw - 16px) !important;
    }
  }

  /* Tablet Vertical (601px a 960px): Drawer elegante anclado a la izquierda */
  @media (min-width: 601px) {
    .site-nav.abierto {
      left: 14px !important;
      right: auto !important;
      width: 370px !important;
      max-width: calc(100vw - 28px) !important;
    }
  }
}

/* 5. Estilos de la Cabecera del Menú */
.site-nav-header {
  padding: 4px 8px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.site-nav-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #FFD700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* 6. Estilos de Cada Tarjeta/Enlace del Menú (.site-nav-link) */
.site-nav-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.site-nav-link:hover,
.site-nav-link.active {
  background: rgba(255, 215, 0, 0.12) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  transform: translateX(4px) !important;
}

.sn-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  text-align: center !important;
}

.sn-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.sn-text strong {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sn-text small {
  font-size: 11px !important;
  color: #A0AEC0 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}



/* ==========================================================================
   CABECERA MÓVIL BLINDADA (<= 900px) — ZERO-OVERFLOW & VISIBILIDAD TOTAL
   - Evita que los botones de la derecha (notificaciones, perfil/login) sean empujados
   - Canjear se oculta en header móvil porque ya reside en el menú hamburguesa
   - Carrito se oculta en header móvil porque ya reside en el Bottom Dock permanente
   ========================================================================== */
@media (max-width: 900px) {
  .gaming-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* 1. Botón Hamburguesa Top-Left */
  .gaming-header .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
    order: 0 !important;
  }

  /* 2. Branding (Logo + Texto) controlado para no empujar a la derecha */
  .gaming-header .header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .gaming-header .logo-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .brand-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 110px !important;
  }

  .gaming-header .brand-badge-shop,
  .gaming-header .brand-sub {
    display: none !important;
  }

  /* 3. Acciones Derecha: Flex contenido y gap compacto */
  .gaming-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  /* 4. Ocultar en móvil elementos redundantes o ya presentes en dock/menú */
  .gaming-header .cart-btn {
    display: none !important; /* Ya está en el Bottom Dock permanente */
  }

  .gaming-header .btn-canjear-pill {
    display: none !important; /* Ya está en el Menú Hamburguesa #btnCanjearMobile */
  }

  /* En tablets (601px - 900px) mantener el botón de forja compacto (icono + badge) */
  .gaming-header .btn-topbar-forja-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .gaming-header .btn-topbar-forja-pill .forja-pill-txt {
    display: none !important;
  }

  .gaming-header .gaming-nav {
    display: none !important;
  }

  /* 5. Lupa de Búsqueda Móvil */
  .gaming-header .search-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .gaming-header .search-toggle svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* 6. Selector de Moneda Móvil */
  .gaming-header .currency-toggle {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .gaming-header .btn-currency-selector {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }
  .curr-arrow, #currCode {
    display: none !important; /* En móvil solo se muestra la bandera */
  }

  /* 7. Campanita de Notificaciones Móvil */
  .gaming-header .notif-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .gaming-header .notif-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .gaming-header .notif-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* 8. Área de Usuario (Avatar o Botón Login) Móvil */
  .gaming-header .user-area {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .gaming-header .user-pill-dropdown {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .gaming-header .user-pill-name,
  .gaming-header .btn-logout-mini {
    display: none !important; /* En móvil se oculta el texto y el logout del topbar */
  }

  .gaming-header .user-pill-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid #FFD700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
    display: block !important;
    object-fit: cover !important;
  }

  .gaming-header .login-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    border-radius: 15px !important;
    flex-shrink: 0 !important;
  }

  /* 9. Menú Desplegable con Top Padding Limpio (Cero Recorte de Ítems Superiores) */
  .site-nav.abierto {
    top: 56px !important;
    padding-top: 12px !important;
  }
  .site-nav-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}



/* ==========================================================================
   BLINDAJE DEFINITIVO CABECERA MÓVIL (<= 960px) — ZERO-OVERFLOW & VISIBILIDAD TOTAL
   - Elimina la campanita cortada y recupera el perfil del usuario al 100%
   - Canjear y Carrito se ocultan en cabecera móvil (ya residen en menú y bottom dock)
   - Ancho total de elementos sumados <= 290px (holgura garantizada en pantallas de 360px+)
   ========================================================================== */
@media (max-width: 960px) {
  .desktop-only,
  .gaming-header .desktop-only,
  .gaming-header .btn-canjear-pill,
  .gaming-header .cart-btn,
  .gaming-header .gaming-nav,
  .gaming-header .brand-badge-shop,
  .gaming-header .brand-sub,
  .gaming-header .curr-arrow,
  .gaming-header #currCode,
  .gaming-header .user-pill-name,
  .gaming-header .btn-logout-mini {
    display: none !important;
  }

  .gaming-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* 1. Botón Hamburguesa Top-Left */
  .gaming-header .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex: 0 0 34px !important;
    order: 0 !important;
  }

  /* 2. Logo + Título elástico compacto */
  .gaming-header .header-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .gaming-header .logo-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    border-radius: 8px !important;
    flex: 0 0 28px !important;
  }

  .gaming-header .brand-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important;
    flex: 0 1 auto !important;
  }

  /* 3. Acciones Derecha: Flex auto-alineado */
  .gaming-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  /* Lupa */
  .gaming-header .search-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex: 0 0 32px !important;
  }

  /* Selector de Moneda */
  .gaming-header .currency-toggle {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }
  .gaming-header .btn-currency-selector {
    height: 32px !important;
    min-height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    font-size: 15px !important;
  }

  /* Campanita de Notificaciones */
  .gaming-header .notif-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }
  .gaming-header .notif-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex: 0 0 32px !important;
  }

  /* Área de Usuario (Avatar o Botón Login) */
  .gaming-header .user-area {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }
  .gaming-header .user-pill-dropdown {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .gaming-header .user-pill-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid #FFD700 !important;
    display: block !important;
    object-fit: cover !important;
  }
  .gaming-header .login-btn {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 360px) {
  .gaming-header .brand-title {
    display: none !important;
  }
}


/* ======================================================== */
/* COMPARADOR HEAD-TO-HEAD DE VEHÍCULOS (DOCK & MODAL HUD) */
/* ======================================================== */

/* PÍLDORA FLOTANTE COMPARAR EN IMAGEN DE VEHÍCULO (OPCIÓN A) */
.floating-pill-compare,
.btn-compare-add {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 5;
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  background: rgba(11, 14, 20, 0.88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 9999px;
  color: #00F0FF;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 240, 255, 0.2);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  box-sizing: border-box;
  line-height: 1.2;
}

.floating-pill-compare:hover,
.btn-compare-add:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00F0FF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 240, 255, 0.5);
  transform: scale(1.06);
}

.floating-pill-compare.is-selected,
.btn-compare-add.is-selected {
  background: rgba(0, 255, 136, 0.25) !important;
  border-color: #00FF88 !important;
  color: #00FF88 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 255, 136, 0.5) !important;
}

.floating-pill-compare .bca-icon,
.btn-compare-add .bca-icon {
  font-size: 11px;
  line-height: 1;
}

.floating-pill-compare .bca-text,
.btn-compare-add .bca-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* DOCK FLOTANTE INFERIOR */
.mtx-comparator-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9990;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.mtx-comparator-dock.is-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mcd-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(11, 14, 20, 0.94);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 18px;
  padding: 10px 18px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 240, 255, 0.2);
}

.mcd-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mcd-badge-live {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.mcd-counter {
  font-size: 0.8rem;
  font-weight: 800;
  color: #FFD700;
}

.mcd-slots-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mcd-slot {
  width: 140px;
  height: 52px;
  background: rgba(19, 24, 38, 0.8);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.mcd-slot.filled {
  border-style: solid;
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(13, 18, 28, 0.95);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.mcd-slot-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748B;
  font-size: 0.75rem;
  font-weight: 700;
}

.mcd-slot-filled {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.mcd-slot-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mcd-slot-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.mcd-slot-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcd-slot-val {
  font-size: 0.7rem;
  color: #00F0FF;
  font-weight: 700;
}

.mcd-slot-remove {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s ease;
}

.mcd-slot-remove:hover {
  color: #FF4D6D;
}

.mcd-vs-divider {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 900;
  font-size: 0.85rem;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.mcd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcd-btn-compare {
  background: linear-gradient(135deg, #00F0FF 0%, #0080FF 100%);
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  color: #050B14;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
  transition: all 0.2s ease;
}

.mcd-btn-compare[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  background: #1E293B;
  color: #64748B;
}

.mcd-btn-compare.ready {
  animation: none !important; /* 0% GPU idle */
}

@keyframes mcdPulse {
  0% { box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); }
  50% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.8), 0 0 10px rgba(255, 215, 0, 0.6); }
  100% { box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); }
}

.mcd-btn-clear {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mcd-btn-clear:hover {
  background: rgba(255, 77, 109, 0.15);
  border-color: #FF4D6D;
  color: #FF4D6D;
}

/* MODAL DE CONFRONTACIÓN */
.mtx-comparator-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.mcm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 14, 0.85);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mcm-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  background: linear-gradient(145deg, #131826 0%, #0B0E14 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.2);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mcm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: rgba(11, 14, 20, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mcm-tag-hud {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.8px;
}

.mcm-title {
  margin: 2px 0 0 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

.mcm-btn-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mcm-btn-close:hover {
  background: rgba(255, 77, 109, 0.2);
  border-color: #FF4D6D;
  color: #FF4D6D;
}

.mcm-content {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* TOP SHOWCASE AUTO A VS AUTO B */
.mcm-showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  background: rgba(19, 24, 38, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 18px;
}

.mcm-car-side {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mcm-car-side.mcm-right {
  flex-direction: row-reverse;
  text-align: right;
}

.mcm-thumb-wrap img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.mcm-info-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mcm-name {
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcm-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mcm-car-side.mcm-right .mcm-tags-row {
  justify-content: flex-end;
}

.mcm-chip-clean {
  font-size: 0.72rem;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: #00FF88;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
}

.mcm-chip-dupe {
  font-size: 0.72rem;
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: #FFB800;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
}

.mcm-price-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFD700;
}

.mcm-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.mcm-car-side.mcm-right .mcm-actions-row {
  justify-content: flex-end;
}

.mcm-btn-view {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
  text-decoration: underline;
  padding: 4px 6px;
}

.mcm-btn-view:hover {
  color: #FFFFFF;
}

.mcm-btn-buy {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #FFFFFF;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.mcm-btn-buy:hover {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

.mcm-vs-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mcm-vs-badge {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #FFD700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: #FFD700;
}

.mcm-score-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  color: #00F0FF;
  letter-spacing: 1px;
}

/* SPECS MATRIX & BARS */
.mcm-specs-matrix {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mcm-metric-card {
  background: rgba(11, 14, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
}

.mcm-metric-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.mcm-metric-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #94A3B8;
  text-transform: uppercase;
}

.mcm-dual-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}

.mcm-bar-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mcm-bar-side.right {
  text-align: right;
}

.mcm-val-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.mcm-bar-side.right .mcm-val-row {
  justify-content: flex-end;
}

.mcm-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: #FFFFFF;
}

.hud-winner-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 255, 136, 0.2);
  border: 1px solid #00FF88;
  color: #00FF88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
  text-transform: uppercase;
}

.mcm-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.mcm-bar-side.right .mcm-track {
  display: flex;
  justify-content: flex-end;
}

.mcm-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.mcm-fill.bar-speed {
  background: linear-gradient(90deg, #0080FF, #00F0FF);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.mcm-fill.bar-accel {
  background: linear-gradient(90deg, #7C3AED, #A78BFA);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

.mcm-fill.bar-handling {
  background: linear-gradient(90deg, #059669, #00FF88);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.mcm-fill.bar-brakes {
  background: linear-gradient(90deg, #DC2626, #FF4D6D);
  box-shadow: 0 0 10px rgba(255, 77, 109, 0.5);
}

.mcm-bar-side.is-winner .mcm-val {
  color: #00FF88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

/* VERDICT BOX */
.mcm-verdict-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
}

.mcm-verdict-icon {
  font-size: 1.5rem;
}

.mcm-verdict-text {
  font-size: 0.88rem;
  color: #F8FAFC;
  line-height: 1.4;
}

.mcm-verdict-text strong {
  color: #FFD700;
}

/* RESPONSIVE: MOBILES & LAPTOPS */
@media (max-width: 640px) {
  .mtx-comparator-dock {
    bottom: 74px;
    width: 95%;
  }
  .mcd-inner {
    padding: 8px 12px;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }
  .mcd-summary {
    display: none;
  }
  .mcd-slot {
    width: 100px;
    height: 44px;
  }
  .mcd-slot-thumb {
    width: 30px;
    height: 30px;
  }
  .mcd-btn-compare {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  .mcm-showcase {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .mcm-car-side, .mcm-car-side.mcm-right {
    flex-direction: column;
    text-align: center;
  }
  .mcm-car-side.mcm-right .mcm-tags-row,
  .mcm-car-side.mcm-right .mcm-actions-row {
    justify-content: center;
  }
  .mcm-vs-center {
    margin: 4px 0;
  }
  .mcm-dual-bars {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mcm-bar-side.right {
    text-align: left;
  }
  .mcm-bar-side.right .mcm-val-row {
    justify-content: flex-start;
  }
  .mcm-bar-side.right .mcm-track {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   OPTIMIZACIÓN DE CATÁLOGO & CRO: DESDUPLICACIÓN Y SCARCITY HUD
   ========================================================================== */
.producto-card .producto-badges .badge-demand-top,
.producto-card .producto-badges .badge-demand-alta,
.producto-card .producto-badges .badge-demand-media,
.producto-card .producto-badges .badge-demand-baja {
  display: none !important;
}

/* Elevación y resplandor de escasez (Scarcity HUD) en tarjetas con 1 unidad */
.producto-card[data-stock="1"] .badge-urgente {
  background: linear-gradient(135deg, rgba(255, 42, 75, 0.25), rgba(255, 107, 0, 0.18)) !important;
  color: #FF4D6D !important;
  border-color: rgba(255, 77, 109, 0.6) !important;
  text-shadow: 0 0 8px rgba(255, 77, 109, 0.6) !important;
  box-shadow: 0 0 10px rgba(255, 42, 75, 0.3) !important;
}

.producto-card[data-stock="1"]:hover {
  border-color: rgba(255, 77, 109, 0.45) !important;
}

/* ==========================================================================
   BADGE NOTIFICADOR EN NAVBAR: FORJA & CUPONES (TASK-15 & TASK-16)
   ========================================================================== */
.nav-forja-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
  vertical-align: middle;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  text-shadow: none;
  letter-spacing: 0;
  box-sizing: border-box;
}

#btnNavTopForja .nav-forja-badge,
.btn-topbar-forja-pill .nav-forja-badge {
  margin-left: 4px;
}

#btnNavMoreForja .nav-forja-badge,
#btnSidebarForja .nav-forja-badge,
#btnNavMisCupones .nav-forja-badge {
  margin-left: auto;
}

/* 1. Alerta Chatarra Pulsante (ámbar neón para cupones reciclables pendientes) */
.nav-forja-badge.badge-chatarra-pulse {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #0A0D14;
  border: 1px solid rgba(245, 158, 11, 0.95);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
  padding: 2px 6px;
  min-width: 17px;
  height: 17px;
  animation: none !important; /* 0% GPU idle */
}

@keyframes pulseChatarra {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.75);
  }
  60% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* 2. Cupones Activos Disponibles (punto/conteo verde sutil) */
.nav-forja-badge.badge-active-dot {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
  padding: 2px 6px;
  min-width: 16px;
  height: 16px;
}

/* Animación de Forja Exitosa (Celebration Glow / Flash en Forja de Llaves) */
@keyframes forgeSuccessFlash {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
  }
  25% {
    transform: scale(1.025);
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.85), 0 0 60px rgba(255, 215, 0, 0.45);
    border-color: #00F0FF !important;
  }
  50% {
    transform: scale(1.015);
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.65), 0 0 40px rgba(255, 215, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
  }
}

.forge-card.forge-card-success-flash {
  animation: forgeSuccessFlash 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  z-index: 10;
  position: relative;
}

/* ==========================================================================
   RANKING — NAVEGACIÓN RÁPIDA ERGONÓMICA (QUICK NAV CHIPS)
   ========================================================================== */
.ranked-quick-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 12px auto 16px auto !important;
  max-width: 100% !important;
  padding: 0 4px !important;
}

.rqn-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(14, 18, 28, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  user-select: none !important;
  touch-action: manipulation !important;
  white-space: nowrap !important;
}

.rqn-chip:hover {
  background: rgba(22, 28, 44, 0.95) !important;
  color: #FFFFFF !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.rqn-chip.rqn-chip-me {
  background: rgba(255, 215, 0, 0.12) !important;
  border-color: rgba(255, 215, 0, 0.45) !important;
  color: #FFD700 !important;
}

.rqn-chip.rqn-chip-me:hover {
  border-color: #FFD700 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35) !important;
}

/* Blindaje anti-solapamiento con Bottom Dock y márgenes fluidos en móvil/tablet */
@media (max-width: 960px) {
  .ranking-scroll-box {
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 14px)) !important;
  }
  .inicio-ranking-section {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 14px)) !important;
  }
  .rqn-chip {
    font-size: 11.5px !important;
    padding: 6px 11px !important;
  }
}


/* ============================================================
   VOUCHES HERO BENTO — Gamer Dark · Neón Accents
   Appended by Gentle AI Tech Lead — TheMorotex
   ============================================================ */

.vouches-hero-bento {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 28px;
}

.vh-bento-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.vh-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #00FF88;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.3);
  padding: 5px 12px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.vh-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
  display: inline-block;
  animation: none !important; /* 0% GPU idle */
}

.vh-pulse-dot.gold {
  background: #FFB800;
  box-shadow: 0 0 8px #FFB800;
}

@keyframes vhPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.vh-bento-left .vouches-hero-title {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 12px 0;
  background: linear-gradient(135deg, #FFFFFF 30%, #A78BFA 70%, #00F0FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  text-align: left;
}

.vh-bento-left .vouches-hero-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #94A3B8;
  margin: 0 0 18px 0;
  max-width: 100%;
  text-align: left;
}

.vh-trust-micro-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.vh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #E2E8F0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 10px;
  border-radius: 8px;
}

.vh-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.vh-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 13.5px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00F0FF, #0088FF);
  color: #050811;
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0,240,255,0.35);
  transition: all 0.2s ease;
}

.vh-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,240,255,0.5);
}

.vh-btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  background: rgba(88,101,242,0.15);
  color: #8EA1E1;
  border: 1px solid rgba(88,101,242,0.35);
  text-decoration: none;
  transition: all 0.2s ease;
}

.vh-btn-discord:hover {
  background: rgba(88,101,242,0.25);
  color: #FFF;
  border-color: rgba(88,101,242,0.6);
}

.vh-bento-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vh-guarantee-card {
  background: linear-gradient(135deg, rgba(16,22,34,0.9), rgba(11,14,20,0.95));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
}

.vh-guarantee-card::before {
  content: ;
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0,240,255,0.12), transparent 70%);
  pointer-events: none;
}

.vh-gc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.vh-gc-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: #FFB800;
  background: rgba(255,184,0,0.1);
  border: 1px solid rgba(255,184,0,0.3);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.vh-gc-live-indicator {
  font-size: 10.5px;
  font-weight: 800;
  color: #38BDF8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vh-gc-rating-box {
  text-align: center;
  padding: 12px 0 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}

.vh-gc-score {
  font-size: 34px;
  font-weight: 900;
  color: #FFF;
  line-height: 1;
  margin-bottom: 4px;
  font-family: 'Rajdhani', sans-serif;
}

.vh-gc-score-denom {
  font-size: 18px;
  color: #64748B;
  font-weight: 700;
}

.vh-gc-stars {
  color: #FFB800;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.vh-gc-reviews {
  font-size: 11.5px;
  color: #94A3B8;
  font-weight: 600;
}

.vh-gc-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.vh-gc-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 8px 12px;
  border-radius: 10px;
}

.vh-gc-perk .perk-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.vh-gc-perk .perk-info {
  display: flex;
  flex-direction: column;
}

.vh-gc-perk .perk-info strong {
  font-size: 11.5px;
  color: #F1F5F9;
  font-weight: 800;
}

.vh-gc-perk .perk-info span {
  font-size: 10px;
  color: #64748B;
}

.vh-gc-footer {
  text-align: center;
}

.vh-gc-status-txt {
  font-size: 11px;
  color: #00FF88;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Filter Bar */
.vouches-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 18px 0 24px 0;
}

.vouch-filter-btn {
  background: rgba(18,24,38,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94A3B8;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vouch-filter-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #FFF;
  border-color: rgba(255,255,255,0.18);
}

.vouch-filter-btn.active {
  background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(0,136,255,0.15));
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 12px rgba(0,240,255,0.3);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .vouches-hero-bento {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vh-bento-left .vouches-hero-title,
  .vh-bento-left .vouches-hero-desc {
    text-align: center;
  }
  .vh-live-badge,
  .vh-trust-micro-pills,
  .vh-cta-group {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .vh-bento-left .vouches-hero-title {
    font-size: 24px;
  }
  .vh-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .vh-btn-main,
  .vh-btn-discord {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================================
   MODAL PREMIOS DE BÓVEDAS & MODO LLAVE DORADA GAMER DARK (#0B0E14)
   ========================================================================= */
.modal-backdrop-bovedas {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 20, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-dialog-premios-bovedas {
  background: #0B0E14 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  max-width: 980px !important;
  width: min(980px, 95vw) !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(124, 58, 237, 0.22) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.mpb-header {
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}
.mpb-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: inline-block;
  margin-bottom: 4px;
}
.mpb-header h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: #FFF;
  margin: 0;
  letter-spacing: 0.3px;
}
.btn-close-mpb {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #FFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.btn-close-mpb:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #EF4444;
}
.mpb-tabs-bar {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.mpb-tabs-bar::-webkit-scrollbar {
  display: none;
}
.mpb-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mpb-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.2);
}
.mpb-tab-btn.active {
  background: rgba(0, 240, 255, 0.12) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25) !important;
}
.mpb-tab-btn[data-tier="1"].active {
  background: rgba(205, 127, 50, 0.15) !important;
  border-color: #CD7F32 !important;
  color: #E2A76F !important;
  box-shadow: 0 0 14px rgba(205, 127, 50, 0.3) !important;
}
.mpb-tab-btn[data-tier="2"].active {
  background: rgba(192, 192, 192, 0.15) !important;
  border-color: #C0C0C0 !important;
  color: #FFF !important;
  box-shadow: 0 0 14px rgba(192, 192, 192, 0.25) !important;
}
.mpb-tab-btn[data-tier="3"].active {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: #FFD700 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.3) !important;
}
.mpb-tab-btn[data-tier="4"].active {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3) !important;
}
.mpb-tab-btn[data-tier="5"].active {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: #EF4444 !important;
  color: #FCA5A5 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35) !important;
}

.mpb-content-body {
  padding: 16px 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.mpb-dual-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .mpb-dual-grid {
    grid-template-columns: 1fr !important;
  }
}
.mpb-col-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.mpb-col-card.golden {
  background: linear-gradient(135deg, rgba(255, 222, 0, 0.04) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
  border-color: rgba(255, 222, 0, 0.4) !important;
  box-shadow: inset 0 0 20px rgba(255, 222, 0, 0.04) !important;
}
.mpb-col-title {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mpb-pity-notice {
  font-size: 0.82rem;
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mpb-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mpb-rules-summary {
  font-size: 0.78rem;
  color: #94A3B8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* =========================================================================
   MODAL DE PROBABILIDADES & MODO LLAVE DORADA (100% FUNCIONAL Y CENTRADO)
   ========================================================================= */

/* Botón interactivo de probabilidades en tarjeta: 100% CENTRADO */
.vlp-action-ver {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px dashed rgba(0, 240, 255, 0.45) !important;
  color: #00F0FF !important;
  font-family: 'Rajdhani', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
  margin: 6px 0 0 0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.vlp-action-ver span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  color: inherit !important;
}
.vlp-action-ver:hover {
  background: rgba(0, 240, 255, 0.22) !important;
  border-color: #00F0FF !important;
  color: #FFF !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}
.vlp-action-ver:active {
  transform: scale(0.98) !important;
}

/* Modal Backdrop: OCULTO POR DEFECTO (display: none !important) */
.modal-backdrop-bovedas {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(11, 14, 20, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 999999 !important;
  display: none !important; /* INVISIBLE Y SIN BLOQUEAR POR DEFECTO */
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  pointer-events: none !important;
}

/* Se muestra ÚNICAMENTE cuando tiene la clase .visible */
.modal-backdrop-bovedas.visible {
  display: flex !important;
  pointer-events: auto !important;
}

/* =========================================================================
   REGLA SAGRADA: CENTRADO ABSOLUTO DE BOTONES Y RESPETO DE DISPLAY: NONE
   ========================================================================= */
.btn-open-vault,
button.btn-open-vault,
.btn-vault-bronze,
.btn-vault-bronze-paid,
.btn-vault-silver,
.btn-vault-gold,
.btn-vault-diamond,
.btn-vault-supreme {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Solo los botones visibles llevan display: flex */
.btn-open-vault:not([style*="display: none"]):not([style*="display:none"]):not(.is-hidden) {
  display: flex !important;
}

/* Si el botón está en enfriamiento o tiene display: none, ocultarlo estrictamente */
.btn-open-vault[style*="display: none"],
.btn-open-vault[style*="display:none"],
.btn-open-vault.is-hidden {
  display: none !important;
}

.btn-open-vault span,
button.btn-open-vault span,
.btn-vault-bronze span,
.btn-vault-bronze-paid span,
.btn-vault-silver span,
.btn-vault-gold span,
.btn-vault-diamond span,
.btn-vault-supreme span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  gap: 6px !important;
}

/* =========================================================================
   BÓVEDAS ADDICTIVE GAMING & CASINO SUITE: LIVE BOOST & FRENZY METER & NEAR-MISS
   ========================================================================= */

/* Banner de Live Stream Boost (Happy Hour Kick) */
.bovedas-live-boost-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.2) 0%, rgba(245, 158, 11, 0.25) 50%, rgba(239, 68, 68, 0.2) 100%);
  border: 1px solid rgba(245, 158, 11, 0.6);
  border-radius: 12px;
  padding: 12px 18px;
  margin: 16px auto 20px auto;
  max-width: 960px;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.3);
  animation: pulseLiveBoost 2s infinite ease-in-out;
}
@keyframes pulseLiveBoost {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.5); }
  50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.45); border-color: rgba(239, 68, 68, 0.8); }
}
.blb-pulse {
  background: #EF4444;
  color: #FFF;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  animation: blinkLive 1.2s infinite;
}
@keyframes blinkLive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.blb-text {
  color: #FFF;
  font-size: 0.9rem;
  font-weight: 600;
}
.blb-text strong {
  color: #FBBF24;
}

/* Medidor de Frenesí (Frenzy Meter) */
.bovedas-frenzy-bar-container {
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 16px auto 24px auto;
  max-width: 960px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.bfb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bfb-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #A78BFA;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.bfb-pct {
  font-size: 0.95rem;
  font-weight: 900;
  color: #00F0FF;
}
.bfb-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.bfb-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6 0%, #00F0FF 60%, #FFD700 100%);
  border-radius: 5px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}
.bfb-sub {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 6px;
}

/* Estilo de Cartas en la Ruleta de Unboxing por Rareza Gamer */
.reel-item {
  position: relative;
  overflow: hidden;
}
.reel-item-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.reel-item.rarity-mitico {
  border-color: rgba(255, 215, 0, 0.45) !important;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.09) 0%, #0D111A 75%) !important;
  box-shadow: inset 0 0 14px rgba(255, 215, 0, 0.12) !important;
}
.reel-item.rarity-mitico .reel-item-icon {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
.reel-item.rarity-legendario {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.09) 0%, #0D111A 75%) !important;
  box-shadow: inset 0 0 14px rgba(239, 68, 68, 0.12) !important;
}
.reel-item.rarity-legendario .reel-item-icon {
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}
.reel-item.rarity-epico {
  border-color: rgba(168, 85, 247, 0.45) !important;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.09) 0%, #0D111A 75%) !important;
}
.reel-item.rarity-epico .reel-item-icon {
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
}
.reel-item.rarity-raro {
  border-color: rgba(6, 182, 212, 0.4) !important;
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, #0D111A 75%) !important;
}
.reel-item.rarity-comun {
  border-color: rgba(16, 185, 129, 0.3) !important;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, #0D111A 75%) !important;
}

/* Vitrina de Drops del Modal (Showcase sin porcentajes fríos) */
.mpb-loot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mpb-prize-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}
.mpb-prize-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateX(2px);
}
.mpb-prize-icon {
  font-size: 1.4rem;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.mpb-prize-info {
  flex: 1;
  min-width: 0;
}
.mpb-prize-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpb-prize-sub {
  font-size: 0.72rem;
  color: #94A3B8;
}
.mpb-rarity-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mpb-rarity-pill.rarity-mitico {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.6);
  color: #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}
.mpb-rarity-pill.rarity-legendario {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #F87171;
}
.mpb-rarity-pill.rarity-epico {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.6);
  color: #C084FC;
}
.mpb-rarity-pill.rarity-raro {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.6);
  color: #22D3EE;
}
.mpb-rarity-pill.rarity-comun {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34D399;
}

/* Botón de Desguace Inmediato */
.btn-desguazar-loot {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%) !important;
  border: 1px solid #F59E0B !important;
  color: #FDE68A !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}
.btn-desguazar-loot:hover {
  background: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.5) !important;
  transform: translateY(-1px) !important;
}
.btn-desguazar-loot:active {
  transform: scale(0.97) !important;
}

/* Botón de Abrir Otra Bóveda (Instant Spin) */
.btn-spin-again {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(139, 92, 246, 0.25) 100%) !important;
  border: 1px solid #00F0FF !important;
  color: #FFF !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3) !important;
}
.btn-spin-again:hover {
  background: rgba(0, 240, 255, 0.3) !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6) !important;
  transform: translateY(-1px) !important;
}
.btn-spin-again:active {
  transform: scale(0.97) !important;
}


/* ==========================================================================
   PERFECCIONAMIENTO VISUAL: BANNER ÚLTIMO GANADOR & HISTORIAL DE FECHAS (2026)
   ========================================================================== */

/* 1. ESTRUCTURA BENTO DEL BANNER GANADOR STREAM */
.ganador-stream-banner-card {
  position: relative !important;
  background: linear-gradient(135deg, rgba(20, 26, 42, 0.98) 0%, #0B0E14 100%) !important;
  border: 1.5px solid rgba(255, 222, 0, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 222, 0, 0.14) !important;
  padding: 24px 28px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.gsb-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 18px !important;
}

/* Columna 1: Showcase del Ganador 3D */
.gsb-winner-col {
  grid-column: 1 !important;
  background: rgba(11, 14, 20, 0.75) !important;
  border: 1px solid rgba(255, 222, 0, 0.25) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.gsb-winner-showcase {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
}

.gsb-avatar-wrap.gsb-avatar-full-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.gsb-character-stage {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 130px !important;
  height: 175px !important;
}

/* Corona anclada fija sobre la cabeza del avatar */
.gsb-character-stage .gsb-crown,
.gsb-crown {
  position: absolute !important;
  top: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  font-size: 28px !important;
  z-index: 10 !important;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)) !important;
  pointer-events: none !important;
}

.gsb-stage-aura {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.35) 0%, rgba(0, 255, 136, 0.15) 50%, transparent 75%) !important;
  pointer-events: none !important;
  filter: blur(8px) !important;
}

.gsb-avatar.gsb-avatar-full {
  width: auto !important;
  height: 155px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(255, 222, 0, 0.5)) drop-shadow(0 2px 6px rgba(0, 255, 136, 0.3)) !important;
  z-index: 2 !important;
  position: relative !important;
  margin-bottom: -14px !important;
}

.gsb-pedestal-disc {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 110px !important;
  height: 18px !important;
  background: radial-gradient(ellipse at center, #FFDE00 0%, #D4A017 45%, rgba(11, 14, 20, 0.95) 100%) !important;
  border: 1.5px solid #FFDE00 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 16px rgba(255, 222, 0, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
  z-index: 1 !important;
}

.gsb-winner-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.gsb-winner-sub {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.gsb-winner-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  color: #00FF88 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-shadow: 0 0 16px rgba(0, 255, 136, 0.4) !important;
  word-break: break-all !important;
}

.gsb-winner-stat {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 0.85rem !important;
  color: #CBD5E1 !important;
}

/* Columna 2: Showcase del Premio Entregado */
.gsb-prize-col {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.gsb-prize-showcase {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: rgba(11, 14, 20, 0.75) !important;
  border: 1px solid rgba(255, 222, 0, 0.25) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.gsb-prize-img-wrap {
  width: 155px !important;
  height: 90px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gsb-prize-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px rgba(255, 222, 0, 0.35)) !important;
  transition: transform 0.3s ease !important;
}

.gsb-prize-showcase:hover .gsb-prize-img {
  transform: scale(1.07) !important;
}

.gsb-prize-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.gsb-prize-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #FFD700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.gsb-prize-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.gsb-prize-val {
  font-size: 0.86rem !important;
  color: #94A3B8 !important;
}

.gsb-prize-delivery {
  font-size: 0.78rem !important;
  color: #CBD5E1 !important;
  margin: 2px 0 0 !important;
  line-height: 1.3 !important;
}

/* Columna 3: Banner Horizontal de Conversión CTA */
.gsb-cta-col {
  grid-column: 1 / -1 !important;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
  margin-top: 4px !important;
  box-sizing: border-box !important;
}

.gsb-cta-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.gsb-cta-text-wrap {
  flex: 1 !important;
  min-width: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.gsb-cta-fire {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #FFD700 !important;
  letter-spacing: 0.5px !important;
}

.gsb-cta-desc {
  font-size: 0.88rem !important;
  color: #CBD5E1 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.gsb-cta-hint {
  font-size: 0.78rem !important;
  color: #94A3B8 !important;
  margin-top: 4px !important;
}

.gsb-btn-action.gsb-cta-btn {
  width: auto !important;
  min-width: 280px !important;
  padding: 14px 26px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Responsive Banner Ganador */
@media (max-width: 880px) {
  .gsb-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .gsb-winner-col,
  .gsb-prize-col {
    grid-column: 1 !important;
  }
  .gsb-cta-content {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .gsb-btn-action.gsb-cta-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* 2. TARJETA HISTORIAL DE SORTEOS PASADOS Y CÁPSULA DE FECHA */
.past-sorteo-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 222, 0, 0.22) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.past-sorteo-card:hover {
  transform: translateY(-4px) !important;
  border-color: #FFDE00 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 222, 0, 0.2) !important;
}

.past-card-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: rgba(255, 222, 0, 0.15) !important;
  border: 1px solid rgba(255, 222, 0, 0.4) !important;
  color: #FFDE00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
}

.past-card-img img {
  width: 100% !important;
  height: 140px !important;
  object-fit: contain !important;
  margin: 10px 0 14px !important;
  filter: drop-shadow(0 6px 14px rgba(255, 222, 0, 0.25)) !important;
  transition: transform 0.3s ease !important;
}

.past-sorteo-card:hover .past-card-img img {
  transform: scale(1.05) !important;
}

.past-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.past-card-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.past-card-val {
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
}

.past-card-val strong {
  color: #FFDE00 !important;
  font-weight: 700 !important;
}

.past-card-winner {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #00FF88 !important;
  margin: 4px 0 2px !important;
}

.past-card-winner .winner-crown {
  font-size: 1.1rem !important;
}

/* Cápsula estilizada de fecha de entrega */
.past-card-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: #94A3B8 !important;
  width: fit-content !important;
}

.past-card-date .pcd-icon {
  font-size: 0.82rem !important;
}

.past-card-date .pcd-text strong {
  color: #CBD5E1 !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}


/* ==========================================================================
   HUD DE PROBABILIDAD PERSONAL & FEED DE COMPETIDORES EN SORTEOS (2026)
   ========================================================================== */

.sorteo-user-odds-hud {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin: 16px 0 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.12) !important;
  position: relative !important;
}

.suo-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.suo-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #00F0FF !important;
  letter-spacing: 0.8px !important;
}

.suo-pulse {
  width: 8px !important;
  height: 8px !important;
  background: #00F0FF !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px #00F0FF !important;
  animation: pulseNeon 1.5s infinite !important;
}

.suo-total-tickets {
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
}

.suo-total-tickets strong {
  color: #FFD700 !important;
}

.suo-kpis-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.suo-kpi-card {
  background: rgba(11, 14, 20, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  text-align: center !important;
}

.suo-kpi-card.highlight-kpi {
  background: rgba(255, 215, 0, 0.06) !important;
  border-color: rgba(255, 215, 0, 0.35) !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.12) !important;
}

.suo-kpi-lbl {
  display: block !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
}

.suo-kpi-val {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

.suo-kpi-val.color-cyan { color: #00F0FF !important; }
.suo-kpi-val.color-gold { color: #FFD700 !important; text-shadow: 0 0 12px rgba(255, 215, 0, 0.4) !important; }
.suo-kpi-val.color-green { color: #00FF88 !important; }

.suo-kpi-sub {
  display: block !important;
  font-size: 0.7rem !important;
  color: #64748B !important;
  margin-top: 2px !important;
}

/* Barra de Probabilidad */
.suo-bar-container {
  background: rgba(11, 14, 20, 0.6) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.suo-bar-header {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.78rem !important;
  color: #CBD5E1 !important;
  margin-bottom: 6px !important;
}

.suo-bar-header strong {
  color: #00F0FF !important;
}

.suo-bar-track {
  width: 100% !important;
  height: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.suo-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #00F0FF, #00FF88, #FFD700) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6) !important;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.suo-boost-callout {
  font-size: 0.8rem !important;
  color: #CBD5E1 !important;
  line-height: 1.4 !important;
  padding: 8px 12px !important;
  background: rgba(255, 215, 0, 0.08) !important;
  border-left: 3px solid #FFD700 !important;
  border-radius: 6px !important;
}

.suo-boost-callout strong {
  color: #FFD700 !important;
}

.suo-boost-callout a {
  color: #00F0FF !important;
  font-weight: 700 !important;
}

/* Feed de Participantes y Pestañas */
.sorteo-feed-section {
  background: rgba(11, 14, 20, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  margin-top: 18px !important;
}

.feed-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 10px !important;
}

.feed-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.feed-header-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #FFF !important;
  letter-spacing: 0.5px !important;
}

.feed-tabs-row {
  display: flex !important;
  gap: 6px !important;
}

.btn-feed-tab {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-feed-tab:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFF !important;
}

.btn-feed-tab.active {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) !important;
}

/* Manejo estricto de visibilidad de pestañas (evita que ambas listas se muestren a la vez) */
.sorteo-avatar-list.feed-tab-pane,
.feed-tab-pane {
  display: none !important;
}

.sorteo-avatar-list.feed-tab-pane.active-pane,
.feed-tab-pane.active-pane {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  padding: 4px 6px 8px 2px !important;
  align-content: flex-start !important;
}

.sorteo-avatar-list::-webkit-scrollbar {
  width: 6px !important;
}

.sorteo-avatar-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 4px !important;
}

.sorteo-avatar-list::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3) !important;
  border-radius: 4px !important;
}

.sorteo-avatar-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.6) !important;
}

/* Fichas Enriquecidas de Participantes */
.sorteo-user-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.sorteo-user-chip:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.chip-avatar-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.user-chip-img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.chip-medal-badge {
  position: absolute !important;
  bottom: -4px !important;
  right: -5px !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
}

.chip-user-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  line-height: 1.2 !important;
}

.user-chip-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #FFF !important;
  white-space: nowrap !important;
}

.user-chip-name .me-tag {
  color: #00FF88 !important;
  font-weight: 800 !important;
  margin-left: 3px !important;
}

.user-chip-odds-badge {
  font-size: 0.72rem !important;
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.1) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  width: fit-content !important;
}

.user-chip-odds-badge small {
  color: #94A3B8 !important;
  font-weight: 600 !important;
}

/* Insignias de Rango */
.sorteo-user-chip.chip-rank-1 {
  border-color: #FFD700 !important;
  background: rgba(255, 215, 0, 0.08) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25) !important;
}
.sorteo-user-chip.chip-rank-1 .user-chip-name {
  color: #FFD700 !important;
}

.sorteo-user-chip.chip-rank-2 {
  border-color: #CBD5E1 !important;
  background: rgba(203, 213, 225, 0.08) !important;
}

.sorteo-user-chip.chip-rank-3 {
  border-color: #F59E0B !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.sorteo-user-chip.chip-is-me {
  border: 1.5px solid #00FF88 !important;
  background: rgba(0, 255, 136, 0.12) !important;
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.35) !important;
}