/* ============================================================
   KANO GAMER · COMPONENTS SYSTEM (components.css)
   Panels, Cards, Buttons, Badges, Chips, Discord Profile Suite,
   Modals Suite, Turntable Player, Cinema & PiP, Toasts, Cookie Banner
   ============================================================ */

/* Eyebrow Readout */
/* eyebrow label used to open every section — encodes "you are here" like a HUD readout */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#e5c37f;
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:#e5c37f;
}


/* Enterprise Button System */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 22px;
  border-radius:14px;
  font-weight:800;
  font-size:14.5px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, #1e2430 0%, #121620 100%);
  color:#e2e8f0;
  transition:border-color .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, transform .18s ease;
}
.btn:hover{border-color:rgba(229,195,127,.45);filter:brightness(1.08);color:#fff;}
.btn.primary{
  color:#0c0903;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  border:1px solid rgba(255, 240, 195, 0.9);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(229, 195, 127, 0.38);
}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 32px rgba(229, 195, 127, 0.55);filter:brightness(1.06);transform:translateY(-2px);}
.btn.ghost{background:transparent;}
.btn.ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(229,195,127,.35);}
.btn.small{min-height:38px;padding:0 15px;font-size:13px;border-radius:11px;}
.btn svg{width:16px;height:16px;flex:none;}

/* botones de marca oficiales: icono + color propio de cada plataforma */
.btn-twitch{
  background:#9146FF;
  color:#fff;
  border-color:#9146FF;
  box-shadow:0 8px 22px rgba(145,70,255,.28);
}
.btn-twitch:hover{background:#8332f5;border-color:#8332f5;box-shadow:0 10px 28px rgba(145,70,255,.45);}
.btn-kick{
  background:#53FC18;
  color:#052400;
  border-color:#53FC18;
  box-shadow:0 8px 22px rgba(83,252,24,.24);
}
.btn-kick:hover{background:#48e012;border-color:#48e012;box-shadow:0 10px 28px rgba(83,252,24,.4);}
.btn-community-hub{
  background:linear-gradient(135deg, rgba(83, 252, 24, 0.16) 0%, rgba(145, 70, 255, 0.24) 100%);
  border:2px solid rgba(83, 252, 24, 0.6);
  color:#fff !important;
  box-shadow:0 10px 30px rgba(83, 252, 24, 0.25), 0 0 25px rgba(145, 70, 255, 0.22);
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:12px 28px;
  min-height:60px;
  text-decoration:none;
  transition:all .25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position:relative;
  border-radius:18px;
}
.btn-community-hub:hover{
  background:linear-gradient(135deg, rgba(83, 252, 24, 0.32) 0%, rgba(145, 70, 255, 0.42) 100%);
  border-color:#a855f7;
  box-shadow:0 14px 38px rgba(83, 252, 24, 0.4), 0 0 30px rgba(145, 70, 255, 0.4);
  transform:translateY(-3px) scale(1.02);
  color:#fff !important;
}

/* Botones de canales en la barra de navegación: Medidas idénticas y acabado Ultra-Premium */
.nav-channel-btn{
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none;
}
.btn-twitch.nav-channel-btn{
  background: linear-gradient(135deg, #9146FF 0%, #772ce8 100%) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 15px rgba(145, 70, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.btn-twitch.nav-channel-btn:hover{
  background: linear-gradient(135deg, #a366ff 0%, #8534f5 100%) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 6px 22px rgba(145, 70, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-1.5px) !important;
}
.btn-kick.nav-channel-btn{
  background: linear-gradient(135deg, #53FC18 0%, #3cdb07 100%) !important;
  color: #052400 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 15px rgba(83, 252, 24, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.btn-kick.nav-channel-btn:hover{
  background: linear-gradient(135deg, #69ff36 0%, #46eb0f 100%) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 6px 22px rgba(83, 252, 24, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-1.5px) !important;
}
.btn-discord{
  background:#5865F2;
  color:#fff;
  border-color:#5865F2;
  box-shadow:0 8px 22px rgba(88,101,242,.28);
}
.btn-discord:hover{background:#4752c4;border-color:#4752c4;box-shadow:0 10px 28px rgba(88,101,242,.45);}
.btn-gold{
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  color:#0c0903;
  border-color:rgba(255, 240, 195, 0.9);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(229, 195, 127, 0.38);
}
.btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 32px rgba(229, 195, 127, 0.55);filter:brightness(1.06);transform:translateY(-2px);}
.btn-glass{
  background:linear-gradient(135deg, #1e2430 0%, #121620 100%);
  color:#e2e8f0;
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
}
.btn-glass:hover{background:linear-gradient(135deg, #252d3c 0%, #171d29 100%);border-color:rgba(229,195,127,.45);color:#fff;}
.btn-danger{
  background:linear-gradient(135deg, #ff4164, #d62045);
  color:#fff;
  border-color:#ff4164;
  box-shadow:0 8px 22px rgba(255,65,100,.3);
}
.btn-danger:hover{box-shadow:0 10px 28px rgba(255,65,100,.45);}
.btn-icon{width:17px;height:17px;flex:none;}

.btn.large{min-height:54px;padding:0 26px;font-size:15.5px;border-radius:15px;}
.btn.large .btn-icon{width:19px;height:19px;}


/* Community Badges & Hero Mode Banners */


.community-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 24px;
}
.community-badge-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft);
  font-size:12.5px;
  font-weight:750;
  color:var(--text);
  backdrop-filter:blur(10px);
  transition:transform .15s ease, border-color .15s ease;
}
.community-badge-pill:hover{
  transform:translateY(-1px);
  border-color:rgba(255,173,47,.4);
}

.hero-mode-banner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:16px;
  margin-bottom:20px;
  border:1px solid var(--line);
  backdrop-filter:blur(12px);
  font-size:13.5px;
  font-weight:750;
}
.hero-mode-banner.live{
  background:rgba(255,65,100,.14);
  border-color:rgba(255,65,100,.4);
  color:#fff;
}
.hero-mode-banner.event{
  background:rgba(255,173,47,.12);
  border-color:rgba(255,173,47,.38);
  color:var(--gold-2);
}
.hero-mode-banner.giveaway{
  background:linear-gradient(90deg, rgba(255,173,47,.16), rgba(255,224,140,.08));
  border-color:rgba(255,173,47,.4);
  color:var(--gold-2);
}
.pulse-live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ff4164;
  box-shadow:0 0 12px #ff4164;
  animation:pulse 1.4s infinite;
  flex:none;
}


/* Unified Cyber-Gold Panel & Card Foundation */
/* ============================================================
   SISTEMA DE PANELES Y TARJETAS UNIFICADO DE LUJO (CYBER-GOLD)
   ============================================================ */
.panel,
.card,
.news-card,
.schedule-item,
.clip-item,
.partner-card,
.server-card,
.hero-mini-card,
.bestseller-card,
.rule-modal-card {
  background: linear-gradient(145deg, rgba(22, 17, 13, 0.96) 0%, rgba(11, 8, 5, 0.99) 100%) !important;
  border: 1.5px solid rgba(229, 195, 127, 0.48) !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255, 240, 195, 0.22) !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
}

.panel:hover,
.card:hover,
.news-card:hover,
.schedule-item:hover,
.clip-item:hover,
.partner-card:hover,
.server-card:hover,
.hero-mini-card:hover,
.bestseller-card:hover,
.rule-modal-card:hover {
  border-color: rgba(255, 230, 160, 0.95) !important;
  transform: translateY(-2px) !important;
}


/* Discord User Profile Suite (Header Chip & Dropdown) */
/* ============================================================
   SUITE DE PERFIL GAMER & LOGIN DISCORD PREMIUM
   ============================================================ */
.nav-user-container{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.nav-discord-login-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 15px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(88,101,242,.28), rgba(88,101,242,.10));
  border:1px solid rgba(138,148,248,.5);
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  transition:all .22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(88,101,242,.25);
  position:relative;
  overflow:hidden;
}
.nav-discord-login-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-100%);
  transition:transform .5s ease;
}
.nav-discord-login-btn:hover::after{
  transform:translateX(100%);
}
.nav-discord-login-btn:hover{
  background:linear-gradient(135deg, #5865f2, #4752c4);
  border-color:#fff;
  color:#fff;
  box-shadow:0 0 22px rgba(88,101,242,.6);
  transform:translateY(-2px);
}

/* ============================================================
   SUITE DE PERFIL GAMER & LOGIN DISCORD EN LA BARRA DE NAVEGACIÓN
   ============================================================ */
.nav-user-container{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:auto;
}
.nav-user-container::after{
  content:'';
  position:absolute;
  top:100%;
  left:-10px;
  right:-10px;
  height:14px;
  background:transparent;
  z-index:99999998;
}
.nav-user-chip{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:auto;
  min-width:145px;
  max-width:215px;
  min-height:36px;
  padding:4px 12px 4px 10px;
  box-sizing:border-box;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(20,16,13,.92), rgba(10,8,6,.88));
  border:1.2px solid rgba(229,195,127,.45);
  cursor:pointer;
  position:relative;
  transition:all .25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select:none;
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:12px;
  line-height:1;
  box-shadow:0 4px 15px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  white-space:nowrap;
}
.nav-user-chip *{
  pointer-events:none;
}
@media (max-width: 600px){
  .nav-user-chip{
    padding:4px 8px;
    min-width:0;
    gap:5px;
    font-size:11.5px;
  }
  .nav-user-nick{
    max-width:75px;
  }
}
@media (max-width: 420px){
  .nav-user-nick{
    display:none;
  }
}


/* Top Sponsor Banners & Cards */
/* ============================================================
   BANNERS DE MARCAS Y PROPAGANDA (DERECHA EN DESKTOP / FLUIDO EN RESPONSIVE)
   ============================================================ */
.top-sponsor-banners{
  position: absolute !important;
  top: 12px !important;
  right: max(16px, calc(((100vw - 1140px) / 2 - 210px) / 2)) !important;
  z-index: 99 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  transition: right 0.25s ease, top 0.25s ease;
}

/* ============================================================
   BANNERS DE NUESTROS PARTNER Y MARCAS (IZQUIERDA EN DESKTOP / FLUIDO EN RESPONSIVE)
   ============================================================ */
.top-partner-banners{
  position: absolute !important;
  top: 12px !important;
  left: max(16px, calc(((100vw - 1140px) / 2 - 210px) / 2)) !important;
  z-index: 99 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  transition: left 0.25s ease, top 0.25s ease;
}

/* ADAPTACIÓN EN PANTALLAS COMPACTAS O VENTANAS DIVIDIDAS (<= 1260px): NUNCA OCULTAR */
@media (max-width: 1260px){
  .top-sponsor-banners,
  .top-partner-banners{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(1140px, calc(100% - 24px)) !important;
    max-width: 100% !important;
    margin: 12px auto 6px auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }
  .top-sponsor-banners .top-sponsor-header,
  .top-partner-banners .top-sponsor-header{
    width: 100% !important;
  }
  .top-sponsor-banners .top-sponsor-card,
  .top-partner-banners .top-sponsor-card{
    flex: 1 1 200px !important;
    max-width: 100% !important;
  }
}

.top-sponsor-header{
  display:flex;
  align-items:center;
  gap:7px;
  padding:2px 5px;
  user-select:none;
}
.top-sponsor-header-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold);
  flex-shrink:0;
  animation:pulseDotGold 2s infinite ease-in-out;
}
@keyframes pulseDotGold{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.2); opacity:.75; box-shadow:0 0 10px var(--gold); }
}
.top-sponsor-header-title{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.06em;
  color:var(--gold-2);
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
}

/* ============================================================
   TARJETA DEL BANNER (MEDIDA ESTÁNDAR 100% IDÉNTICA Y MÁS COMPACTA)
   ============================================================ */
.top-sponsor-card{
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  width:210px !important;
  min-width:210px !important;
  max-width:210px !important;
  height:110px !important;
  min-height:110px !important;
  max-height:110px !important;
  box-sizing:border-box !important;
  background:linear-gradient(150deg, rgba(24, 18, 14, 0.96) 0%, rgba(12, 9, 7, 0.98) 100%) !important;
  border:1.3px solid rgba(229, 195, 127, 0.4) !important;
  border-radius:11px !important;
  padding:6px 7px 7px 7px !important;
  box-shadow:0 8px 22px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255, 235, 185, 0.12) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  text-decoration:none !important;
  color:#fff !important;
  transition:transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
  overflow:hidden !important;
  cursor:pointer !important;
}
.top-sponsor-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0.85;
  z-index:2;
}
.top-sponsor-card:hover{
  border-color:var(--gold) !important;
  background:linear-gradient(150deg, rgba(32, 24, 18, 0.98) 0%, rgba(18, 14, 10, 0.99) 100%) !important;
  box-shadow:0 12px 30px rgba(0,0,0,0.85), 0 0 20px rgba(229, 195, 127, 0.4) !important;
  transform:translateY(-2px) scale(1.02) !important;
}

.top-sponsor-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  height:16px !important;
  min-height:16px !important;
  max-height:16px !important;
  margin-bottom:5px !important;
  position:relative !important;
  z-index:2 !important;
  padding:0 1px !important;
}
.top-sponsor-badge{
  font-size:8px !important;
  font-weight:900 !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase !important;
  color:var(--gold-2) !important;
  background:rgba(229, 195, 127, 0.16) !important;
  border:1px solid rgba(229, 195, 127, 0.38) !important;
  padding:1.5px 6px !important;
  border-radius:4px !important;
  line-height:1.2 !important;
}
.top-sponsor-arrow{
  color:var(--gold-2) !important;
  opacity:0.8 !important;
  transition:transform 0.2s ease, opacity 0.2s ease !important;
  display:flex !important;
  align-items:center !important;
}
.top-sponsor-card:hover .top-sponsor-arrow{
  opacity:1 !important;
  transform:translateX(2px) translateY(-1px) !important;
}

/* CONTENEDOR DE LA FOTO DEL BANNER (MEDIDA ESTÁNDAR GAMING: PROPORCIÓN 2.5:1 — 600 x 240 px) */
.top-sponsor-media{
  width:100% !important;
  height:76px !important;
  min-height:76px !important;
  max-height:76px !important;
  aspect-ratio:2.5 / 1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:7px !important;
  background:radial-gradient(circle at center, rgba(32, 24, 18, 0.85) 0%, rgba(9, 6, 5, 0.98) 100%) !important;
  border:1.1px solid rgba(229, 195, 127, 0.3) !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,0.7) !important;
  overflow:hidden !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.top-sponsor-banner-img{
  width:100% !important;
  height:100% !important;
  aspect-ratio:2.5 / 1 !important;
  object-fit:cover !important;
  object-position:center !important;
  image-rendering:auto !important;
  transform:translateZ(0);
  backface-visibility:hidden;
  filter:brightness(1) !important;
  transition:transform 0.28s ease, filter 0.28s ease !important;
}

.top-sponsor-card:hover .top-sponsor-banner-img{
  transform:scale(1.04) !important;
  filter:brightness(1.08) !important;
}

.top-sponsor-footer{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:0 2px;
}
.top-sponsor-title{
  font-size:11.5px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--font-body);
  line-height:1.25;
}
.top-sponsor-sub{
  font-size:10px;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}

/* Compatibilidad con estructura previa */
.top-sponsor-body{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:2;
}
.top-sponsor-img-wrap{
  width:66px;
  height:46px;
  border-radius:8px;
  background:#090605;
  border:1.2px solid rgba(229, 195, 127, 0.38);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.6);
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px;
}
.top-sponsor-img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.top-sponsor-meta{
  flex:1;
  min-width:0;
}

/* EFECTO HOVER EN TARJETAS DE PARTNER DE LA SECCIÓN */
.partner-card{
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
  cursor: pointer;
}
.partner-card:hover{
  transform: translateY(-4px) scale(1.02) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.85), 0 0 28px rgba(229, 195, 127, 0.4) !important;
}

/* ============================================================
   VENTANA FLOTANTE INTERACTIVA (HOVER POPOVER - COMPACTA Y NÍTIDA)
   ============================================================ */
.sponsor-hover-popover{
  position:fixed !important;
  z-index:99999 !important;
  width:246px !important;
  max-width:88vw !important;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:scale(0.95) translateY(4px);
  transition:opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
}
.sponsor-hover-popover.active{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:scale(1) translateY(0) !important;
}
.sponsor-popover-card{
  background:linear-gradient(155deg, rgba(24, 18, 14, 0.98) 0%, rgba(12, 9, 7, 0.99) 100%);
  border:1.4px solid rgba(229, 195, 127, 0.5);
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0, 0, 0, 0.92), 0 0 24px rgba(229, 195, 127, 0.25);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.sponsor-popover-cover{
  position:relative;
  height:92px !important;
  width:100%;
  overflow:hidden;
  background:radial-gradient(circle at center, rgba(35, 26, 18, 0.95) 0%, rgba(9, 6, 5, 1) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px;
  box-sizing:border-box;
  border-bottom:1px solid rgba(229, 195, 127, 0.28);
}
.sponsor-popover-cover-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
  transform:translateZ(0);
  backface-visibility:hidden;
  filter:brightness(1) drop-shadow(0 3px 8px rgba(0,0,0,0.8));
}
.sponsor-popover-cover-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(14, 10, 8, 0.75) 100%);
  pointer-events:none;
}
.sponsor-popover-badge{
  position:absolute;
  top:6px;
  left:6px;
  background:rgba(15, 11, 8, 0.92);
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:0.08em;
  padding:2px 5px;
  border-radius:4px;
  backdrop-filter:blur(8px);
  text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,0.7);
  z-index:2;
}
.sponsor-popover-content{
  padding:8px 11px 10px 11px;
  position:relative;
}
.sponsor-popover-header-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin-bottom:4px;
  position:relative;
  z-index:2;
}
.sponsor-popover-avatar-wrap{
  display:none !important;
}
.sponsor-popover-titles{
  flex:1;
  min-width:0;
}
.sponsor-popover-title{
  display:block;
  font-size:12.5px;
  font-weight:900;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:0.01em;
  line-height:1.2;
}
.sponsor-popover-sub{
  font-size:10.5px;
  color:#c9b8a6;
  margin:2px 0 0 0;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.sponsor-popover-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  padding:6px 10px;
  border-radius:7px;
  background:linear-gradient(135deg, var(--gold) 0%, #d4a037 100%);
  color:#0e0a07;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
  transition:all 0.2s ease;
  box-shadow:0 3px 8px rgba(229, 195, 127, 0.35);
  margin-top:5px;
  cursor:pointer;
}
.sponsor-popover-action:hover{
  filter:brightness(1.12);
  transform:scale(1.02);
  box-shadow:0 4px 12px rgba(229, 195, 127, 0.5);
}

/* Discord User Profile Suite (Extended Controls & Gamification) */
.nav-user-chip:hover, .nav-user-container:hover .nav-user-chip, .nav-user-chip.active{
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(35,26,18,.95), rgba(18,14,10,.9));
  box-shadow:0 0 20px rgba(229,195,127,.45), 0 6px 20px rgba(0,0,0,.6);
  transform:translateY(-1px);
}
.nav-user-chip.is-offline{
  border-color:rgba(239,68,68,.55);
  background:linear-gradient(135deg, rgba(32,12,12,.92), rgba(16,7,7,.88));
  box-shadow:0 4px 15px rgba(0,0,0,.5), 0 0 14px rgba(239,68,68,.25);
}
.nav-user-chip.is-offline:hover, .nav-user-container:hover .nav-user-chip.is-offline, .nav-user-chip.is-offline.active{
  border-color:#ef4444;
  box-shadow:0 0 22px rgba(239,68,68,.6), 0 6px 20px rgba(0,0,0,.6);
}
.nav-user-dot-indicator{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#23a55a;
  box-shadow:0 0 10px #23a55a, 0 0 20px rgba(35,165,90,.6);
  flex-shrink:0;
  animation:pulseDotGreen 2.2s infinite ease-in-out;
}
.nav-user-dot-indicator.is-offline{
  background:#ef4444;
  box-shadow:0 0 10px #ef4444, 0 0 20px rgba(239,68,68,.85);
  animation:pulseDotRed 1.8s infinite ease-in-out;
}
@keyframes pulseDotGreen{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.22); opacity:.8; box-shadow:0 0 15px #23a55a, 0 0 28px rgba(35,165,90,.85); }
}
@keyframes pulseDotRed{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:.8; box-shadow:0 0 16px #ef4444, 0 0 30px rgba(239,68,68,.95); }
}
.nav-user-chip-avatar{
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
  border:1.5px solid var(--gold);
  background:#090604;
  box-shadow:0 0 8px rgba(229,195,127,.5);
  flex-shrink:0;
  display:none;
}
.nav-user-nick{
  max-width:145px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
}
.nav-user-arrow{
  transition:transform .22s ease;
  opacity:.8;
  color:var(--gold-2);
}
.nav-user-container:hover .nav-user-arrow,
.nav-user-chip.active .nav-user-arrow{
  transform:rotate(180deg);
}

.nav-user-online-dot{
  position:absolute;
  bottom:-1px;
  right:-1px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#23a55a;
  border:1.5px solid #070403;
}
.nav-user-badge{
  font-size:9px;
  font-weight:800;
  padding:2px 7px;
  border-radius:6px;
  background:linear-gradient(135deg, rgba(229,195,127,.22), rgba(229,195,127,.08));
  color:var(--gold-2);
  border:1px solid rgba(229,195,127,.45);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.nav-user-dropdown{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  right:0 !important;
  width:320px !important;
  max-width:92vw !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(20, 15, 12, 0.98) 0%, rgba(12, 9, 7, 0.99) 100%) !important;
  border:1.5px solid rgba(229,195,127,.6) !important;
  box-shadow:0 30px 100px rgba(0,0,0,.96), 0 0 45px rgba(229,195,127,.25), inset 0 1px 0 rgba(255,255,255,.2) !important;
  padding:0 !important;
  display:none;
  flex-direction:column !important;
  z-index:100000 !important;
  backdrop-filter:blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(140%) !important;
  overflow:hidden !important;
  animation:userPop .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events:auto !important;
}
@keyframes userPop{
  from{transform:scale(.95) translateY(-8px); opacity:0;}
  to{transform:scale(1) translateY(0); opacity:1;}
}
.nav-user-dropdown.is-open,
.nav-user-dropdown.show,
.nav-user-container:hover .nav-user-dropdown,
.nav-user-container:focus-within .nav-user-dropdown{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Banner de Cabecera */
.nav-user-header-banner{
  height:58px;
  background:linear-gradient(135deg, rgba(229,195,127,.3) 0%, rgba(22,16,11,1) 100%), url('/assets/kano/background.png') center/cover no-repeat;
  position:relative;
  border-bottom:1px solid rgba(229,195,127,.25);
}
.nav-user-header-banner::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, rgba(14,10,7,.95));
}

.nav-user-card-body{
  padding:0 14px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.nav-user-card-top{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin-top:-26px;
  position:relative;
  z-index:2;
}
.nav-user-card-avatar-wrap{
  position:relative;
  flex-shrink:0;
}
.nav-user-card-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2.5px solid var(--gold);
  background:#090604;
  box-shadow:0 0 20px rgba(229,195,127,.5), 0 8px 16px rgba(0,0,0,.8);
  display:block;
}
.nav-user-card-avatar-wrap .nav-user-online-dot{
  width:12px;
  height:12px;
  bottom:1px;
  right:1px;
  border:2px solid #0c0907;
}

.nav-user-card-info{
  flex:1;
  min-width:0;
  padding-bottom:2px;
}
.nav-user-card-info strong{
  font-size:15px;
  color:#fff;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
  letter-spacing:-.01em;
}
.nav-user-card-status{
  font-size:11px;
  color:#4ade80;
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:700;
  margin-top:2px;
}

.nav-user-id-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px;
  border-radius:10px;
  font-size:11px;
  color:var(--muted);
  font-family:var(--font-mono);
}
.nav-user-copy-id-btn{
  background:linear-gradient(135deg, rgba(229,195,127,.2), rgba(229,195,127,.05));
  border:1px solid rgba(229,195,127,.35);
  color:var(--gold-2);
  font-size:10.5px;
  font-weight:800;
  cursor:pointer;
  padding:3px 8px;
  border-radius:6px;
  transition:all .15s ease;
}
.nav-user-copy-id-btn:hover{
  background:rgba(229,195,127,.3);
  color:#fff;
  border-color:var(--gold);
}

/* Sistema de Rangos & Actividad de la Comunidad (Gamificación Premium) */
.nav-user-rank-box{
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(229,195,127,.35);
  border-radius:16px;
  padding:11px 12px;
  display:flex;
  flex-direction:column;
  gap:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
}
.nav-user-rank-box::before{
  content:'';
  position:absolute;
  top:-20px;
  right:-20px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(229,195,127,.25) 0%, transparent 70%);
  pointer-events:none;
}
.nav-user-rank-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.nav-user-rank-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#fff;
}
.nav-user-rank-title strong{
  color:var(--gold-2);
  font-weight:800;
}
.nav-user-rank-lvl{
  font-size:9.5px;
  font-weight:900;
  padding:2.5px 7px;
  border-radius:6px;
  background:linear-gradient(135deg, rgba(229,195,127,.35), rgba(229,195,127,.15));
  color:#fff;
  border:1px solid rgba(229,195,127,.55);
  letter-spacing:.05em;
  box-shadow:0 0 10px rgba(229,195,127,.2);
}
.nav-user-progress-bar-wrap{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  position:relative;
}
.nav-user-progress-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #e5c37f 0%, #f7e3af 50%, #ffad2f 100%);
  box-shadow:0 0 12px rgba(229,195,127,.8);
  transition:width .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-user-progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10.5px;
  color:var(--muted);
  font-family:var(--font-mono);
}
.nav-user-achievements-btn{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  padding:7px 10px;
  border-radius:10px;
  color:var(--gold-2);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:all .18s ease;
}
.nav-user-achievements-btn:hover{
  background:rgba(229,195,127,.18);
  border-color:rgba(229,195,127,.45);
  color:#fff;
}
.nav-user-chevron{
  transition:transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-user-achievements-btn.open .nav-user-chevron{
  transform:rotate(180deg);
}
.nav-user-achievements-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:6px;
  border-top:1px dashed rgba(255,255,255,.1);
}
.nav-user-achievement-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 10px;
  border-radius:9px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.06);
  transition:all .15s ease;
}
.nav-user-achievement-item:hover{
  border-color:rgba(229,195,127,.3);
  background:rgba(229,195,127,.05);
}
.achieve-icon{
  font-size:15px;
}
.achieve-info{
  display:flex;
  flex-direction:column;
  line-height:1.25;
}
.achieve-info strong{
  font-size:11.5px;
  color:#fff;
}
.achieve-info small{
  font-size:10px;
  color:var(--muted);
}

/* Privilegios Activos en el Dropdown */
.nav-user-privileges-box{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:9px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-user-privileges-title{
  font-size:9.5px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-family:var(--font-mono);
}
.nav-user-privileges-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.privilege-pill{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  font-size:10.5px;
  color:var(--muted);
  transition:all .18s ease;
}
.privilege-pill.is-active{
  background:linear-gradient(135deg, rgba(35,165,90,.18), rgba(35,165,90,.05));
  border-color:rgba(35,165,90,.4);
  color:#bbf7d0;
}
.privilege-pill.is-admin-active{
  background:linear-gradient(135deg, rgba(229,195,127,.25), rgba(229,195,127,.08));
  border-color:var(--gold);
  color:var(--gold-2);
  font-weight:800;
}
.privilege-icon{
  font-size:12px;
}

.nav-user-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-user-action-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:11px;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  text-decoration:none;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  transition:all .18s ease;
}
.nav-user-action-item:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(229,195,127,.35);
  color:#fff;
  transform:translateX(3px);
}
.nav-user-action-item.admin-btn{
  background:linear-gradient(135deg, rgba(229,195,127,.25), rgba(229,195,127,.08));
  border-color:rgba(229,195,127,.5);
  color:var(--gold-2);
}
.nav-user-action-item.admin-btn:hover{
  background:linear-gradient(135deg, rgba(229,195,127,.4), rgba(229,195,127,.2));
  border-color:var(--gold);
  box-shadow:0 0 16px rgba(229,195,127,.3);
}
.nav-user-action-item.logout-btn{
  color:#ff9e9e;
  background:rgba(255,75,75,.08);
  border:1px solid rgba(255,75,75,.22);
  margin-top:4px;
}
.nav-user-action-item.logout-btn:hover{
  background:rgba(255,75,75,.22);
  border-color:rgba(255,75,75,.55);
  color:#fff;
  box-shadow:0 0 16px rgba(255,75,75,.35);
  transform:translateX(3px);
}

@media(max-width:640px){
  .nav-user-dropdown{
    position:fixed;
    top:auto;
    bottom:20px;
    right:16px;
    left:16px;
    width:auto;
    max-width:360px;
    margin:0 auto;
    box-shadow:0 0 100px rgba(0,0,0,.95), 0 0 40px rgba(229,195,127,.3);
  }
}

.nav-toggle{
  display:none;
  background:rgba(255,255,255,.08);
  border:1.2px solid rgba(229,195,127,.45);
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  pointer-events:auto !important;
  position:relative;
  z-index:9999999 !important;
  transition:all .2s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  touch-action:manipulation;
}
.nav-toggle *{
  pointer-events:none;
}
.nav-toggle:hover, .nav-toggle.is-active{
  background:rgba(229,195,127,.22);
  border-color:var(--gold);
  color:var(--gold-2);
  box-shadow:0 0 14px rgba(229,195,127,.35);
}
.nav-toggle svg{
  width:20px;
  height:20px;
  transition:transform .2s ease;
}
.nav-toggle.is-active svg{
  transform:rotate(90deg);
}


/* News / Article Modal Reader */
/* --- Modal: noticia completa --- */
.article-modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(4,2,2,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.article-modal-overlay.open{opacity:1;pointer-events:auto;}
.article-modal{
  width:min(720px,100%);max-height:88vh;overflow:auto;
  border-radius:var(--radius-lg);position:relative;
  transform:translateY(16px);transition:transform .25s ease;
}
.article-modal-overlay.open .article-modal{transform:translateY(0);}
.article-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:11px;border:0;padding:0;
  background:rgba(7,4,3,.6);border:1px solid var(--line-soft);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s ease;
}
.article-modal-close:hover{border-color:var(--gold);}
.article-modal-close svg{width:16px;height:16px;}
.article-modal-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.article-modal-body{padding:30px 32px 36px;}
.article-modal-body .tag-pill{margin-bottom:14px;}
.article-modal-body h2{font-size:clamp(22px,3.2vw,30px);line-height:1.1;margin-bottom:10px;text-transform:none;letter-spacing:0;}
.article-modal-date{display:block;font-size:12.5px;color:var(--muted-dim);font-weight:600;margin-bottom:20px;}
.article-modal-text{color:var(--muted);font-size:14.5px;line-height:1.8;white-space:pre-line;}
.article-modal-text a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px;word-break:break-word;}
.article-modal-body .btn-row{margin-top:22px;}


/* Clips Showcase Cinema Modal */
/* Modal de Clips en Modo Cine (Top 1 Mundial Cinema HUD) */
.clip-modal-overlay{
  position:fixed;
  inset:0;
  z-index:220;
  background:rgba(4,2,2,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s cubic-bezier(.16,1,.3,1);
}
.clip-modal-overlay.open{
  opacity:1;
  pointer-events:auto;
}

/* Modal Card */
.clip-modal-card{
  position:relative;
  width:min(480px, 92vw);
  max-height:min(72vh, 480px);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(22, 17, 13, 0.98) 0%, rgba(10, 8, 6, 0.99) 100%);
  border:1px solid rgba(229,195,127,0.35);
  box-shadow:0 24px 70px rgba(0,0,0,0.95), 0 0 40px rgba(229,195,127,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:scale(.95);
  transition:transform .28s cubic-bezier(.16,1,.3,1), width .3s cubic-bezier(.16,1,.3,1);
}
.clip-modal-overlay.open .clip-modal-card{
  transform:scale(1);
}

/* Modo Vertical Dinámico Compacto (TikTok / Reels / Shorts) */
.clip-modal-card.is-vertical{
  width:min(270px, 86vw);
  max-height:min(72vh, 460px);
  border-radius:14px;
}

/* Fondo Ambiental Difuminado */
.clip-modal-ambient{
  position:absolute;
  inset:-40px;
  background-size:cover;
  background-position:center;
  filter:blur(60px) brightness(0.22) saturate(1.8);
  opacity:.65;
  pointer-events:none;
  z-index:0;
  transition:background-image .4s ease, opacity .4s ease;
}

/* Cabecera Cinema HUD Compacto */
.clip-modal-header{
  position:relative;
  z-index:2;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(229,195,127,0.15);
  background:rgba(10,8,6,0.7);
  backdrop-filter:blur(10px);
}
.clip-modal-head-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.clip-modal-head-left h3{
  font-size:13.5px;
  margin:0;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clip-live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(229,195,127,0.12);
  border:1px solid rgba(229,195,127,0.3);
  color:var(--gold-2);
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:4px;
  white-space:nowrap;
  flex-shrink:0;
}
.clip-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 8px #ef4444;
  animation:livePulseDot 1.4s infinite ease-in-out;
}
@keyframes livePulseDot{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.4;transform:scale(.85);}
}
.clip-platform-badge{
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  padding:3px 9px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.clip-platform-badge.platform-tiktok{
  background:linear-gradient(135deg, rgba(254,44,85,0.2), rgba(37,244,238,0.2));
  border-color:rgba(254,44,85,0.5);
  color:#fff;
  box-shadow:0 0 12px rgba(254,44,85,0.2);
}
.clip-platform-badge.platform-twitch{
  background:rgba(145,71,255,0.2);
  border-color:rgba(145,71,255,0.5);
  color:#c4a4ff;
  box-shadow:0 0 12px rgba(145,71,255,0.2);
}
.clip-platform-badge.platform-kick{
  background:rgba(83,252,24,0.16);
  border-color:rgba(83,252,24,0.45);
  color:#53fc18;
  box-shadow:0 0 12px rgba(83,252,24,0.2);
}
.clip-platform-badge.platform-youtube{
  background:rgba(255,0,0,0.18);
  border-color:rgba(255,0,0,0.5);
  color:#ff8585;
  box-shadow:0 0 12px rgba(255,0,0,0.2);
}
.clip-modal-header h3{
  margin:0;
  font-size:15px;
  font-weight:750;
  color:#fff;
  font-family:var(--font-display);
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.clip-modal-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.clip-modal-action-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid rgba(229,195,127,0.25);
  background:rgba(229,195,127,0.08);
  color:var(--gold-2);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}
.clip-modal-action-btn:hover{
  background:rgba(229,195,127,0.18);
  border-color:var(--gold-2);
  color:#fff;
  box-shadow:0 0 12px rgba(229,195,127,0.25);
  transform:translateY(-1px);
}
.clip-modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .18s ease;
  flex-shrink:0;
  position:relative;
  z-index:20;
}
.clip-modal-close svg{
  width:18px;
  height:18px;
  pointer-events:none;
}
.clip-modal-close:hover{
  border-color:var(--gold-2);
  background:rgba(229,195,127,0.2);
  color:var(--gold-2);
  transform:scale(1.05);
}

/* Stage de Visualización Compacto */
.clip-modal-stage{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  background:radial-gradient(circle at center, rgba(16, 12, 9, 0.96) 0%, rgba(4, 2, 2, 1) 100%);
  overflow:hidden;
  padding:6px 10px;
  box-sizing:border-box;
}
.clip-modal-video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:min(34vh, 250px);
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.85);
  transition:all .28s cubic-bezier(.16,1,.3,1);
}
.clip-modal-video-wrap.is-vertical{
  aspect-ratio:9/16;
  width:auto;
  height:100%;
  max-height:min(46vh, 340px);
  max-width:100%;
  min-height:0;
  margin:0 auto;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,0.92), 0 0 20px rgba(229,195,127,0.1), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.clip-modal-video-wrap iframe,
.clip-modal-video-wrap video{
  width:100%;
  height:100%;
  border:0;
  object-fit:contain;
  background:#000;
  display:block;
  border-radius:14px;
}

/* Skeleton Shimmer Loader para Carga Fluida de Clips */
.clip-player-skeleton{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #0d0a07 0%, #050302 100%);
  border-radius:14px;
  transition:opacity .35s ease;
  pointer-events:none;
}
.clip-skeleton-pulse{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  animation:skeletonBreathe 1.8s infinite ease-in-out;
}
.clip-skeleton-txt{
  font-size:12.5px;
  font-weight:700;
  color:var(--gold-2);
  letter-spacing:.03em;
  text-shadow:0 0 10px rgba(229,195,127,0.3);
}
@keyframes skeletonBreathe{
  0%,100%{opacity:.6;transform:scale(.98);}
  50%{opacity:1;transform:scale(1.02);}
}

/* Botones de Navegación Lateral (Prev / Next) */
.clip-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:15;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(12,9,7,0.85);
  border:1px solid rgba(229,195,127,0.35);
  color:var(--gold-2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .18s ease;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,0.6);
}
.clip-nav-btn svg{
  width:18px;
  height:18px;
  pointer-events:none;
}
.clip-nav-btn.prev{left:12px;}
.clip-nav-btn.next{right:12px;}
.clip-nav-btn:hover{
  background:var(--gold-2);
  color:#120e0b;
  border-color:var(--gold-2);
  box-shadow:0 0 16px rgba(229,195,127,0.5);
  transform:translateY(-50%) scale(1.1);
}

/* Fallback Cinema Player Card (Top 1 Mundial) */
.clip-fallback-cinema{
  position:relative;
  width:100%;
  height:100%;
  min-height:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.clip-fallback-poster{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:brightness(0.55) contrast(1.1);
  transform:scale(1.05);
  transition:transform .5s ease;
}
.clip-fallback-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,6,4,0.4) 0%, rgba(8,6,4,0.85) 75%, rgba(8,6,4,0.98) 100%);
  backdrop-filter:blur(3px);
}
.clip-fallback-hud{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:100%;
  padding:26px 22px;
  box-sizing:border-box;
  text-align:center;
}
.clip-fallback-hud-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:10px;
}
.clip-live-hud-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(0,0,0,0.65);
  border:1px solid rgba(229,195,127,0.35);
  padding:3px 10px;
  border-radius:4px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--gold-2);
}
.clip-hud-pulse{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 8px #ef4444;
  animation:livePulseDot 1.4s infinite ease-in-out;
}
.clip-hud-platform{
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.08em;
  color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.08);
  padding:3px 10px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.12);
}

/* Botón Central de Reproducción Hipnótico */
.clip-fallback-play-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:78px;
  height:78px;
  margin:auto 0;
  text-decoration:none;
  cursor:pointer;
}
.clip-play-ring{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px dashed rgba(229,195,127,0.5);
  animation:spinPlayRing 14s linear infinite;
}
@keyframes spinPlayRing{
  to{transform:rotate(360deg);}
}
.clip-play-core{
  position:relative;
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg, #e5c37f 0%, #b8934a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#100d09;
  box-shadow:0 0 35px rgba(229,195,127,0.55), 0 8px 24px rgba(0,0,0,0.6);
  transition:all .22s cubic-bezier(.16,1,.3,1);
}
.clip-play-core svg{
  width:28px;
  height:28px;
  margin-left:3px;
}
.clip-fallback-play-btn:hover .clip-play-core{
  transform:scale(1.12);
  box-shadow:0 0 50px rgba(229,195,127,0.8), 0 10px 28px rgba(0,0,0,0.7);
}

.clip-fallback-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:380px;
}
.clip-fallback-author{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(229,195,127,0.25);
  padding:4px 12px 4px 6px;
  border-radius:30px;
}
.clip-author-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--gold-2);
  object-fit:cover;
}
.clip-author-meta{
  display:flex;
  flex-direction:column;
  text-align:left;
  line-height:1.1;
}
.clip-author-name{
  font-size:11px;
  font-weight:800;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.clip-author-status{
  font-size:9px;
  color:var(--muted);
}
.clip-fallback-title{
  margin:2px 0 0 0;
  font-size:15px;
  font-weight:800;
  color:#fff;
  font-family:var(--font-display);
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.2;
}
.clip-fallback-desc{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,0.75);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.clip-cta-btn{
  margin-top:6px;
  padding:9px 20px;
  border-radius:6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 4px 18px rgba(229,195,127,0.3);
  text-decoration:none;
}
.clip-cta-btn:hover{
  box-shadow:0 6px 24px rgba(229,195,127,0.5);
  transform:translateY(-1px);
}

/* Pie de Modal Cinema Compacto */
.clip-modal-footer{
  position:relative;
  z-index:2;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(229,195,127,0.15);
  background:rgba(10,8,6,0.75);
  backdrop-filter:blur(10px);
  flex-wrap:wrap;
}
.clip-modal-footer-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:160px;
}
.clip-author-chip{
  display:flex;
  align-items:center;
  gap:8px;
}
.clip-avatar-mini{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--gold-2);
}
.clip-modal-desc-text{
  font-size:11px;
}
.clip-author-name{
  font-size:11.5px;
}
  object-fit:cover;
  background:#0c0903;
  flex-shrink:0;
}
.clip-author-texts{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.clip-author-texts .clip-author-name{
  font-size:12px;
  font-weight:800;
  color:#fff;
  letter-spacing:.02em;
}
.verified-check{
  color:var(--gold-2);
  font-size:11px;
}
.clip-modal-desc-text{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.3;
}
.clip-modal-footer-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.clip-modal-kbd-hint{
  font-size:10px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.clip-modal-kbd-hint kbd{
  display:inline-block;
  padding:2px 5px;
  font-size:9.5px;
  font-family:var(--font-mono);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:3px;
  color:#fff;
}
.clip-direct-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 18px;
  font-size:12px;
  font-weight:800;
  border-radius:8px;
  text-decoration:none;
  background:linear-gradient(135deg, #e5c37f 0%, #c49942 100%);
  color:#0f0d09;
  box-shadow:0 4px 18px rgba(229,195,127,0.35);
  white-space:nowrap;
  transition:all .22s cubic-bezier(.16,1,.3,1);
}
.clip-direct-action:hover{
  background:linear-gradient(135deg, #f3dcaf 0%, #d5aa50 100%);
  color:#000;
  box-shadow:0 6px 25px rgba(229,195,127,0.65), 0 0 15px rgba(255,255,255,0.2);
  transform:translateY(-1.5px) scale(1.02);
}
.clip-direct-action.is-tiktok{
  background:linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
  color:#fff;
  box-shadow:0 4px 18px rgba(254,44,85,0.4);
}
.clip-direct-action.is-tiktok:hover{
  box-shadow:0 6px 26px rgba(254,44,85,0.7), 0 0 20px rgba(37,244,238,0.5);
}
.clip-tiktok-head-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(254,44,85,0.2) 0%, rgba(37,244,238,0.2) 100%);
  border:1px solid rgba(254,44,85,0.5);
  color:#fff;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  transition:all .2s ease;
}
.clip-tiktok-head-btn:hover{
  background:linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
  border-color:#fe2c55;
  color:#fff;
  box-shadow:0 0 16px rgba(254,44,85,0.6);
  transform:translateY(-1px);
}
@media (max-width:580px){
  .clip-modal-action-btn .clip-btn-text,
  .clip-modal-kbd-hint{
    display:none;
  }
  .clip-modal-card{
    max-height:76vh;
    border-radius:14px;
    width:min(310px, 90vw);
  }
  .clip-modal-card.is-vertical{
    width:min(260px, 86vw);
    max-height:72vh;
  }
  .clip-modal-video-wrap.is-vertical{
    max-height:min(46vh, 320px);
  }
  .clip-modal-footer{
    padding:8px 12px;
    gap:6px;
  }
  .clip-direct-action{
    padding:6px 11px;
    font-size:11px;
  }
  .clip-nav-btn{
    width:28px;
    height:28px;
  }
}


/* Hi-Fi Turntable Deck & Audio Equalizer Components */
/* Ecualizador Animado de Estudio */
.radio-equalizer{
  display:inline-flex;
  align-items:flex-end;
  gap:3px;
  height:14px;
}
.radio-equalizer .bar{
  width:3px;
  height:100%;
  background:linear-gradient(0deg, #e5c37f, #f7e3af);
  border-radius:2px;
  transform-origin: bottom;
  animation:equalizerBounce 1.2s ease-in-out infinite alternate;
  will-change: transform;
}
.radio-equalizer .bar-1{ animation-delay:0.1s; transform: scaleY(0.4); }
.radio-equalizer .bar-2{ animation-delay:0.3s; transform: scaleY(0.8); }
.radio-equalizer .bar-3{ animation-delay:0.2s; transform: scaleY(1.0); }
.radio-equalizer .bar-4{ animation-delay:0.4s; transform: scaleY(0.6); }
.radio-equalizer .bar-5{ animation-delay:0.15s; transform: scaleY(0.9); }
@keyframes equalizerBounce{
  0%{ transform: scaleY(0.2); }
  100%{ transform: scaleY(1.0); }
}

.radio-card-body{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:center;
}
/* Modulo Tocadiscos Hi-Fi Masterpiece */
.radio-turntable-deck{
  width:180px;
  height:180px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border-radius:30px;
  background:radial-gradient(circle at 50% 50%, rgba(35, 27, 20, 0.98) 0%, rgba(12, 9, 5, 0.99) 100%);
  border:1.8px solid rgba(229, 195, 127, 0.7);
  box-shadow:0 22px 60px rgba(0,0,0,0.95), inset 0 1.5px 0 rgba(255, 240, 195, 0.45), 0 0 35px rgba(229, 195, 127, 0.3);
}
.radio-turntable-base{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Anillos de Onda de Sonido Pulsantes Holográficos */
.radio-gif-aura-ring{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1.5px solid rgba(229, 195, 127, 0.5);
  pointer-events:none;
  animation:soundwaveExpand 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes soundwaveExpand{
  0%{ transform:scale(0.88); opacity:0.85; border-color:rgba(255,240,195,0.8); }
  50%{ opacity:0.35; }
  100%{ transform:scale(1.18); opacity:0; border-color:rgba(229,195,127,0); }
}

@keyframes kgVinylSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Disco de Vinilo 3D Ultra-Realista */
.radio-vinyl-disc{
  width:150px;
  height:150px;
  border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(255,240,195,0.24) 0deg, transparent 45deg, rgba(229,195,127,0.32) 180deg, transparent 225deg, rgba(255,240,195,0.24) 360deg),
    radial-gradient(circle, #2e241c 12%, #18120d 42%, #080504 100%);
  border:2.5px solid rgba(229, 195, 127, 0.85);
  box-shadow:0 14px 40px rgba(0,0,0,0.95), 0 0 35px rgba(229, 195, 127, 0.4), inset 0 0 24px rgba(229, 195, 127, 0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  animation: kgVinylSpin 3.5s linear infinite !important;
  will-change:transform;
}

.vinyl-shine-overlay{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 45%, rgba(255,255,255,0.12) 100%);
  pointer-events:none;
}
.radio-vinyl-grooves-outer{
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1.5px dashed rgba(229, 195, 127, 0.5);
}
.radio-vinyl-grooves-mid{
  position:absolute;
  inset:20px;
  border-radius:50%;
  border:1px solid rgba(229, 195, 127, 0.35);
}
.radio-vinyl-grooves-inner{
  position:absolute;
  inset:32px;
  border-radius:50%;
  border:1.2px dashed rgba(229, 195, 127, 0.4);
}
.radio-vinyl-lead-out{
  position:absolute;
  inset:42px;
  border-radius:50%;
  border:1px solid rgba(255, 240, 195, 0.25);
}

/* Etiqueta Central Dorada e Imagen del Logo */
.radio-vinyl-center{
  width:54px;
  height:54px;
  border-radius:50%;
  overflow:hidden;
  border:2.5px solid #fff0c3;
  background:#0c0903;
  position:relative;
  z-index:2;
  box-shadow:0 0 18px rgba(0,0,0,0.95), 0 0 12px rgba(229,195,127,0.5);
}
.radio-vinyl-center img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  pointer-events:none;
}
.vinyl-center-pin{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, #e5c37f 65%, #3d2d12 100%);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 0 4px rgba(0,0,0,0.9);
  z-index:4;
  pointer-events:none;
}




/* Product Quick View Modal & Bestseller Actions */
/* Modal de Vista Rápida de Producto - Ultra Lujo Champagne Gold & Brushed Gunmetal */
.product-modal-overlay{
  position:fixed;
  inset:0;
  z-index:210;
  background:rgba(8, 6, 4, 0.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.product-modal-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.product-modal{
  width:min(880px,100%);
  max-height:90vh;
  overflow-y:auto;
  border-radius:24px;
  position:relative;
  background:linear-gradient(145deg, #14110d 0%, #1c1612 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.45) !important;
  box-shadow:0 32px 100px rgba(0,0,0,.92), inset 0 1px 0 rgba(255, 235, 185, 0.25) !important;
  display:grid;
  grid-template-columns:1fr 1.18fr;
  transform:translateY(12px);
  transition:transform .25s ease, opacity .25s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.product-modal-overlay.open .product-modal{
  transform:translateY(0) !important;
}
 .product-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:10;
  width:38px;
  height:38px;
  border-radius:50% !important;
  border:1px solid rgba(229, 195, 127, 0.45) !important;
  background:linear-gradient(135deg, #1a1510, #100d09) !important;
  color:#e5c37f !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.6) !important;
}
.product-modal-close:hover{
  transform:scale(1.08) !important;
  border-color:#f7e3af !important;
  color:#0c0903 !important;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%) !important;
}
.product-modal-close svg{width:16px;height:16px;}
.product-modal-gallery{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:rgba(13, 10, 7, 0.75) !important;
  border-right:1px solid rgba(229, 195, 127, 0.25) !important;
}
.product-modal-main-img-wrap{
  position:relative;
  aspect-ratio:1/1;
  border-radius:20px !important;
  overflow:hidden;
  background:#0d0a07 !important;
  border:1px solid rgba(229, 195, 127, 0.4) !important;
  box-shadow:inset 0 0 40px rgba(0,0,0,.85), 0 10px 30px rgba(0,0,0,.7) !important;
}
.product-modal-main-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.product-modal-thumbs{
  display:flex;
  gap:10px;
}
.product-modal-thumb{
  width:60px;
  height:60px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(229, 195, 127, 0.25);
  cursor:pointer;
  background:#0d0a07;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.product-modal-thumb.active{
  border-color:#e5c37f !important;
  box-shadow:0 0 16px rgba(229, 195, 127, 0.45) !important;
  transform:translateY(-2px);
}
.product-modal-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.product-modal-info{
  padding:32px 32px 36px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
}
.product-modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-right:32px;
}
.product-modal-brand-tag{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  color:#e5c37f;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.product-modal-title{
  font-size:24px;
  font-weight:800;
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0;
  color:#f8fafc;
}
.product-modal-pricing{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-top:2px;
}
.product-modal-price{
  font-family:var(--font-mono);
  font-size:24px;
  font-weight:800;
  color:#e5c37f;
}
.product-modal-price-note{
  font-size:12.5px;
  color:#94a3b8;
  font-weight:600;
}
.product-modal-coupon-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(229, 195, 127, 0.08);
  border:1px solid rgba(229, 195, 127, 0.4);
  box-shadow:inset 0 1px 0 rgba(255, 235, 185, 0.15);
}
.product-modal-desc{
  font-size:13.5px;
  color:#94a3b8;
  line-height:1.65;
  margin:0;
}
.product-modal-section-title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  color:#e5c37f;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
  display:block;
}
.size-pills-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.size-pill{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  padding:7px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(229, 195, 127, 0.25);
  color:#cbd5e1;
  cursor:pointer;
  transition:.18s ease;
}
.size-pill.active, .size-pill:hover{
  border-color:rgba(255, 240, 195, 0.9) !important;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%) !important;
  color:#0c0903 !important;
  font-weight:800 !important;
  box-shadow:0 4px 14px rgba(229, 195, 127, 0.4) !important;
}
.color-pills-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.color-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  padding:6px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(229, 195, 127, 0.25);
  color:#cbd5e1;
  cursor:pointer;
  transition:.18s ease;
}
.color-chip.active, .color-chip:hover{
  border-color:rgba(255, 240, 195, 0.9) !important;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%) !important;
  color:#0c0903 !important;
  font-weight:800 !important;
  box-shadow:0 4px 14px rgba(229, 195, 127, 0.4) !important;
}
.product-modal-actions{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#quickViewBuyBtn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  color:#0c0903 !important;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%) !important;
  border:1px solid rgba(255, 240, 195, 0.9) !important;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 26px rgba(229, 195, 127, 0.45) !important;
  font-weight:800 !important;
  font-size:14.5px !important;
  min-height:52px !important;
  border-radius:14px !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
#quickViewBuyBtn:hover{
  transform:translateY(-2px) !important;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 36px rgba(229, 195, 127, 0.65) !important;
  filter:brightness(1.06) !important;
}

#quickViewAllShopBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  font-family:var(--font-body) !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:#f3e5c8 !important;
  background:linear-gradient(135deg, #221a14 0%, #16110c 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.35) !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.5) !important;
  cursor:pointer !important;
  transition:border-color .18s ease, background .18s ease, color .18s ease !important;
}
#quickViewAllShopBtn:hover{
  border-color:#e5c37f !important;
  background:linear-gradient(135deg, #2a2019 0%, #1c1510 100%) !important;
  color:#fff !important;
}

/* Floating Toast Notifications System */
/* ============================================================
   TOAST NOTIFICACIONES FLOTANTES & ACCIONES DE PRODUCTO
   ============================================================ */
.kg-floating-toast{
  position:fixed;
  bottom:32px;
  left:50%;
  transform:translateX(-50%) translateY(24px);
  opacity:0;
  pointer-events:none;
  background:rgba(18, 14, 11, 0.96);
  border:1px solid rgba(255, 173, 47, 0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  padding:12px 22px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 18px 45px rgba(0,0,0,.75), 0 0 25px rgba(255,173,47,.22);
  z-index:999999;
  transition:all .28s cubic-bezier(.16, 1, .3, 1);
  max-width:calc(100vw - 32px);
  text-align:center;
}
.kg-floating-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

.bestseller-card-actions{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  gap:8px;
  align-items:center;
}
.bestseller-buy-now-btn{
  flex:1;
  padding:7px 10px;
  font-size:11.5px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:8px;
  background:var(--gold-grad);
  color:#1c0f02;
  text-decoration:none;
  transition:all .18s ease;
  box-shadow:0 2px 8px rgba(255,173,47,.25);
  border:none;
  cursor:pointer;
}
.bestseller-buy-now-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,173,47,.45);
  color:#000;
}
.bestseller-qv-btn-small{
  padding:7px 10px;
  font-size:11.5px;
  font-weight:600;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft);
  color:var(--muted);
  cursor:pointer;
  transition:all .18s ease;
}
.bestseller-qv-btn-small:hover{
  color:#fff;
  border-color:var(--gold-2);
}

@media (max-width:980px){
  .bestseller-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .merch-guarantees-grid{grid-template-columns:1fr;}
  .merch-promo-banner{flex-direction:column;align-items:flex-start;}
  .merch-promo-right{width:100%;justify-content:space-between;}
}
@media (max-width:680px){
  .product-modal{grid-template-columns:1fr;}
  .product-modal-gallery{border-right:0;border-bottom:1px solid var(--line);}
  .bestseller-grid{grid-template-columns:1fr;}
}


/* Mobile Bottom Dock Collision Fix for Toast (<=600px) */
@media (max-width: 600px) {
  .kg-floating-toast {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Legal Documents & Contact Modals System */
/* Modales Legales y de Contacto */
.rule-modal-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.rule-modal-card{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rule-modal-card strong{
  color:var(--gold-2);
  font-size:14.5px;
}
.rule-modal-card p{
  margin:0;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
}

.contact-modal-box{
  padding:20px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,173,47,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,173,47,.3);
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contact-email-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:rgba(0,0,0,.45);
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--line-soft);
}
.contact-email-value{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
}


/* Back-to-Top Floating Button */
.back-to-top{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:46px;height:46px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1c0f02;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 14px 34px rgba(255,157,20,.28);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{transform:translateY(-3px);}
.back-to-top svg{width:20px;height:20px;}
@media (max-width:640px){.back-to-top{right:14px;bottom:14px;width:42px;height:42px;}}


/* Mobile Bottom Dock Collision Fix for Back-to-Top (<=600px) */
@media (max-width: 600px) {
  .back-to-top {
    right: 14px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: 42px !important;
    height: 42px !important;
  }
}

/* Dual Split Cinema Theater Player & Chat Overlay */
/* ============================================================
   REPRODUCTOR DE DIRECTO & CHAT EN MODO CINE (Cinema Theater)
   ============================================================ */
.hud-cinema-overlay{
  position:fixed;
  inset:0;
  z-index:2000000 !important;
  background:rgba(4, 3, 2, 0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-cinema-overlay.is-active{
  opacity:1;
  pointer-events:auto;
}
.hud-cinema-theater{
  width:100%;
  max-width:1400px;
  height:88vh;
  min-height:560px;
  background:#090705;
  border-radius:22px;
  border:1px solid rgba(255,173,47,.45);
  box-shadow:0 30px 90px rgba(0,0,0,.95), 0 0 35px rgba(255,173,47,.18);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:scale(.96) translateY(12px);
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-cinema-overlay.is-active .hud-cinema-theater{
  transform:scale(1) translateY(0);
}
.hud-cinema-header{
  padding:12px 18px;
  background:linear-gradient(90deg, rgba(22,17,13,.98), rgba(32,24,19,.98));
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.hud-cinema-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.hud-cinema-live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  transition:all .3s ease;
  flex-shrink:0;
}
.hud-cinema-live-dot.is-online{
  background:var(--kick);
  box-shadow:0 0 12px var(--kick), 0 0 4px #fff;
  animation:hudPulse 1.8s infinite;
}
.hud-cinema-live-dot.is-offline{
  background:#ff4b4b;
  box-shadow:0 0 10px rgba(255, 75, 75, 0.7);
  animation:none;
}
.hud-cinema-status-badge{
  font-size:10px;
  font-weight:900;
  padding:2px 7px;
  border-radius:6px;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:all .3s ease;
}
.hud-cinema-status-badge.is-online{
  background:rgba(75, 255, 138, 0.18);
  color:var(--kick);
  border:1px solid rgba(75, 255, 138, 0.4);
}
.hud-cinema-status-badge.is-offline{
  background:rgba(255, 75, 75, 0.15);
  color:#ff8585;
  border:1px solid rgba(255, 75, 75, 0.35);
}
.hud-cinema-title{
  font-size:14px;
  font-weight:800;
  color:#fff;
  letter-spacing:.02em;
}
.hud-cinema-platform-group{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(8, 6, 4, 0.88);
  padding:4px 6px;
  border-radius:12px;
  border:1.2px solid rgba(229, 195, 127, 0.35);
  box-shadow:0 4px 16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.hud-cinema-platform-btn{
  padding:7px 16px;
  border-radius:9px;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:all .22s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing:.02em;
  user-select:none;
}
.hud-cinema-platform-btn.twitch{
  background:rgba(145, 70, 255, 0.16);
  border:1.2px solid rgba(145, 70, 255, 0.45);
  color:#d4b3ff;
  box-shadow:0 2px 8px rgba(145,70,255,.15);
}
.hud-cinema-platform-btn.twitch:hover{
  background:rgba(145, 70, 255, 0.32);
  border-color:#9146ff;
  color:#fff;
  box-shadow:0 0 16px rgba(145, 70, 255, 0.4);
  transform:translateY(-1px);
}
.hud-cinema-platform-btn.twitch.active{
  background:linear-gradient(135deg, #af6aff 0%, #9146ff 50%, #6812cf 100%) !important;
  border-color:#e0c7ff !important;
  color:#ffffff !important;
  box-shadow:0 0 24px rgba(145, 70, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  transform:scale(1.04);
}

.hud-cinema-platform-btn.kick{
  background:rgba(83, 252, 24, 0.14);
  border:1.2px solid rgba(83, 252, 24, 0.4);
  color:#63fc28;
  box-shadow:0 2px 8px rgba(83, 252, 24, .15);
}
.hud-cinema-platform-btn.kick:hover{
  background:rgba(83, 252, 24, 0.28);
  border-color:#53fc18;
  color:#ffffff;
  box-shadow:0 0 16px rgba(83, 252, 24, 0.4);
  transform:translateY(-1px);
}
.hud-cinema-platform-btn.kick.active{
  background:linear-gradient(135deg, #78ff47 0%, #53fc18 50%, #2bb800 100%) !important;
  border-color:#c8ffb8 !important;
  color:#041a00 !important;
  box-shadow:0 0 24px rgba(83, 252, 24, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  font-weight:900;
  text-shadow:none;
  transform:scale(1.04);
}

.hud-cinema-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.hud-cinema-action-btn{
  height:32px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:.15s ease;
}
.hud-cinema-action-btn:hover{
  color:#fff;
  border-color:var(--gold);
  background:rgba(255,173,47,.15);
}
.hud-cinema-action-btn.close{
  background:rgba(255,75,75,.1);
  border-color:rgba(255,75,75,.3);
  color:#ff9e9e;
}
.hud-cinema-action-btn.close:hover{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}

.hud-cinema-body{
  width:100%;
  flex:1;
  background:#000;
  display:flex;
  position:relative;
  overflow:hidden;
}
.hud-cinema-body iframe{
  height:100%;
  border:0;
  display:block;
  background:#050505;
}
.hud-cinema-body iframe:first-child{
  width:72%;
}
.hud-cinema-body iframe:last-child{
  width:28%;
  border-left:1px solid var(--line);
}
@media (max-width:900px){
  .hud-cinema-theater{height:94vh;}
  .hud-cinema-body{
    flex-direction:column;
  }
  .hud-cinema-body iframe:first-child{
    width:100%;
    height:60%;
  }
  .hud-cinema-body iframe:last-child{
    width:100%;
    height:40%;
    border-left:none;
    border-top:1px solid var(--line);
  }
}


/* Picture-in-Picture (PiP) Floating Mini-Player */
/* ============================================================
   MODO VENTANA FLOTANTE EMERGENTE (Mini-Player Picture-in-Picture)
   ============================================================ */
.hud-cinema-overlay.is-pip{
  position:fixed;
  width:480px;
  height:300px;
  min-width:280px;
  min-height:180px;
  max-width:calc(100vw - 20px);
  max-height:calc(100vh - 20px);
  padding:0;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  pointer-events:none !important;
  z-index:2000000 !important;
  resize:both;
  overflow:hidden;
}
.hud-cinema-overlay.is-pip .hud-cinema-theater{
  pointer-events:auto;
  width:100%;
  height:100%;
  max-width:100%;
  min-height:0;
  border-radius:18px;
  border:1.5px solid rgba(255,173,47,.75);
  box-shadow:0 24px 70px rgba(0,0,0,.96), 0 0 35px rgba(255,173,47,.3);
  transform:scale(1) translateY(0);
  display:flex;
  flex-direction:column;
  position:relative;
}
.hud-cinema-overlay.is-pip .hud-cinema-header{
  padding:6px 12px;
  background:rgba(18, 14, 11, 0.98);
  gap:6px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.hud-cinema-overlay.is-pip.is-dragging .hud-cinema-header{
  cursor:grabbing;
}
.hud-cinema-overlay.is-pip.is-dragging iframe{
  pointer-events:none !important;
}
.hud-cinema-overlay.is-pip .hud-cinema-header button,
.hud-cinema-overlay.is-pip .hud-cinema-header a{
  cursor:pointer;
}
.hud-cinema-overlay.is-pip .hud-cinema-title{
  font-size:12px;
  max-width:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hud-cinema-overlay.is-pip .hud-cinema-status-badge{
  display:none;
}
.hud-cinema-overlay.is-pip .hud-cinema-platform-group{
  padding:2px;
  gap:2px;
}
.hud-cinema-overlay.is-pip .hud-cinema-platform-btn{
  padding:4px 8px;
  font-size:10.5px;
}
.hud-cinema-overlay.is-pip .hud-cinema-platform-btn span{
  display:none;
}
.hud-cinema-overlay.is-pip .hud-cinema-action-btn{
  height:26px;
  padding:0 8px;
  font-size:11px;
}
.hud-cinema-overlay.is-pip .hud-cinema-action-btn.ext-link{
  display:none;
}
.hud-cinema-overlay.is-pip .hud-cinema-body iframe:first-child{
  width:100%;
}
.hud-cinema-overlay.is-pip .hud-cinema-body iframe:last-child{
  display:none;
}
.hud-cinema-overlay.is-pip .pip-icon-minimize{
  display:none;
}
.hud-cinema-overlay:not(.is-pip) .pip-icon-maximize{
  display:none;
}

/* Estado Minimizado en Píldora Flotante */
.hud-cinema-overlay.is-pip.is-minimized{
  width:auto !important;
  height:auto !important;
  min-width:240px !important;
  min-height:0 !important;
  resize:none !important;
}
.hud-cinema-overlay.is-pip.is-minimized .hud-cinema-body{
  display:none !important;
}
.hud-cinema-overlay.is-pip.is-minimized .hud-cinema-theater{
  height:auto !important;
  min-height:0 !important;
  border-radius:14px;
}
.hud-cinema-overlay.is-pip.is-minimized .hud-cinema-header{
  padding:8px 14px;
}

@media (max-width:640px){
  .hud-cinema-overlay.is-pip{
    width:320px;
    height:210px;
  }
}


/* HUD Web Push Notification Toggle Button */
/* ============================================================
   BOTÓN DE SUSCRIPCIÓN A NOTIFICACIONES WEB DE DIRECTO
   ============================================================ */
.hud-notify-toggle-btn{
  width:100%;
  height:36px;
  border-radius:4px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  user-select:none;
}
.hud-notify-toggle-btn:hover{
  color:#fff;
  border-color:var(--gold);
  background:rgba(255,173,47,.12);
}
.hud-notify-toggle-btn.is-active{
  background:rgba(75,255,138,.12);
  border-color:rgba(75,255,138,.4);
  color:var(--kick);
}
.hud-notify-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7a6e63;
  display:inline-block;
  transition:all .3s ease;
}
.hud-notify-toggle-btn.is-active .hud-notify-dot{
  background:var(--kick);
  box-shadow:0 0 8px var(--kick);
  animation:hudPulse 1.8s infinite;
}


/* GDPR / Privacy Cookie Consent Banner */
/* ============================================================
   BANNER DE COOKIES Y PRIVACIDAD DE LA WEB
   ============================================================ */
.cookie-banner{
  position:fixed;
  bottom:24px;
  right:24px;
  left:24px;
  max-width:520px;
  margin-left:auto;
  z-index:99999;
  padding:16px 20px;
  border-radius:18px;
  background:rgba(18, 14, 11, 0.97);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,173,47,.45);
  box-shadow:0 20px 60px rgba(0,0,0,.92), 0 0 24px rgba(255,173,47,.15);
  animation:cookieSlideUp .4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cookieSlideUp{
  from{transform:translateY(120%); opacity:0;}
  to{transform:translateY(0); opacity:1;}
}
.cookie-banner-content{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cookie-banner-text strong{
  font-size:14px;
  color:var(--gold-2);
  display:block;
  margin-bottom:4px;
}
.cookie-banner-text p{
  margin:0;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
}
.cookie-banner-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Mobile Bottom Dock Collision Fix for Cookie Consent Banner (<=600px) */
@media (max-width: 600px) {
  .cookie-banner {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto !important;
  }
}