/* ============================================================
   KANO GAMER · SECTIONS (sections.css)
   Hero Section & HUD Monitor Cards, News Editorial & Carousel,
   Clips Layout, Radio Broadcast & Countdown, Official Partners,
   Tienda Oficial Coming Soon Banner, Comunidad Hub & Footer
   ============================================================ */

/* Hero Section Base & Embers Canvas */
.hero{
  position:relative;
  padding:80px 0 38px;
  overflow:hidden;
  transition:background .35s ease;
}
.hero::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(940px, calc(100% - 60px));
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(229,195,127,0.2) 25%, rgba(229,195,127,0.38) 50%, rgba(229,195,127,0.2) 75%, transparent 100%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:2;}
.hero-embers-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  opacity:.9;
}


/* ============================================================
   HERO & DINAMISMO LIVE VS OFFLINE
   ============================================================ */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:20px;
  align-items:stretch;
}
.hero-dual-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  width:100%;
  max-width:1100px;
  margin:18px auto 0;
  position:relative;
  z-index:2;
}
.hero-dual-grid > .hud{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:12px;
  scroll-margin-top:85px !important;
  box-sizing:border-box !important;
}
.hero-dual-grid, #radio, #mainChannelsHud{
  scroll-margin-top:85px !important;
}

/* Master Obsidian Armor Glass Chassis (Nivel Top 1 Mundial - Symmetrical Twin Clean) */
#mainChannelsHud, #radio{
  position:relative;
  background:
    radial-gradient(ellipse at 50% -15%, rgba(229, 195, 127, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.6) 0%, transparent 50%),
    linear-gradient(165deg, rgba(22, 17, 13, 0.94) 0%, rgba(12, 9, 7, 0.98) 55%, rgba(17, 13, 9, 0.96) 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.32) !important;
  border-radius:12px !important;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.85),
    0 0 25px rgba(229, 195, 127, 0.06),
    inset 0 1px 0 rgba(255, 245, 215, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  contain:paint;
  padding:18px 20px !important;
  transition:border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow:hidden;
}

#mainChannelsHud:hover, #radio:hover{
  border-color:rgba(229, 195, 127, 0.65) !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.92),
    0 0 35px rgba(229, 195, 127, 0.18),
    inset 0 1px 0 rgba(255, 245, 215, 0.45) !important;
  transform:translateY(-2px);
}

/* Disable dated retro corner wireframes on hero dual panels */
#mainChannelsHud::before, #mainChannelsHud::after, #mainChannelsHud .bl, #mainChannelsHud .br,
#radio::before, #radio::after, #radio .bl, #radio .br{
  display:none !important;
}

/* Top Edge Specular Illumination with Travelling Ray */
.hud-edge-glow{
  position:absolute;
  top:0;
  left:10%;
  width:80%;
  height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(229, 195, 127, 0.5) 20%, #fff3ce 50%, rgba(229, 195, 127, 0.5) 80%, transparent);
  pointer-events:none;
  z-index:5;
  box-shadow:0 0 12px rgba(229, 195, 127, 0.65);
}

.radio-hud-panel{
  position:relative;
  overflow:hidden;
  scroll-margin-top:85px !important;
}

.radio-vinyl-disc, #radioVinylDisc{
  animation: kgVinylSpin 3.2s linear infinite !important;
  transform-origin: center center !important;
  will-change: transform;
}

/* ============================================================
   TOP 1 MUNDIAL: MASTER AUDIOPHILE VINYL & TURNTABLE
   ============================================================ */
.radio-turntable-deck-pro{
  position:relative;
  width:108px;
  height:108px;
  border-radius:8px;
  background:
    radial-gradient(circle at 35% 35%, #241a12 0%, #140e09 55%, #080504 100%);
  border:1.5px solid rgba(229,195,127,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,245,215,0.45),
    inset 0 0 18px rgba(0,0,0,0.95),
    0 12px 32px rgba(0,0,0,0.85),
    0 0 20px rgba(229,195,127,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  user-select:none;
}

/* Precision Corner Hex Pins */
.deck-hex-pin{
  position:absolute;
  width:3.5px;
  height:3.5px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffffff 0%, #ffe082 50%, #b8860b 100%);
  box-shadow:0 0 4px rgba(229,195,127,0.8), inset 0 0.5px 0.5px #fff;
  z-index:4;
  opacity:0.9;
}
.deck-hex-pin.p-tl{top:5px; left:5px;}
.deck-hex-pin.p-tr{top:5px; right:5px;}
.deck-hex-pin.p-bl{bottom:5px; left:5px;}
.deck-hex-pin.p-br{bottom:5px; right:5px;}

/* Classic DJ Turntable Strobe Light Prism Tower */
.deck-strobe-tower{
  position:absolute;
  bottom:6px;
  left:6px;
  width:8px;
  height:10px;
  border-radius:2px;
  background:linear-gradient(180deg, #d4af37 0%, #1f1606 80%, #0d0903 100%);
  border:0.5px solid #ffe082;
  box-shadow:0 2px 4px rgba(0,0,0,0.8);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:1.5px;
}
.strobe-prism{
  width:4px;
  height:3px;
  border-radius:1px;
  background:#ffe082;
  box-shadow:0 0 6px #ffd700;
}
.strobe-glow{
  position:absolute;
  top:1px;
  left:3px;
  width:22px;
  height:14px;
  background:radial-gradient(ellipse at 0% 50%, rgba(255,215,0,0.35) 0%, transparent 70%);
  transform:rotate(-30deg);
  pointer-events:none;
}

/* 33⅓ RPM Speed Indicator with Neon LED */
.deck-speed-badge{
  position:absolute;
  bottom:5px;
  right:6px;
  display:flex;
  align-items:center;
  gap:2.5px;
  z-index:4;
  background:rgba(12, 9, 6, 0.7);
  padding:1px 3.5px;
  border-radius:3px;
  border:0.5px solid rgba(229,195,127,0.3);
}
.speed-led{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#53fc18;
  box-shadow:0 0 5px #53fc18;
}
.speed-text{
  font-family:var(--font-mono);
  font-size:6.5px;
  font-weight:800;
  color:#f5e0a0;
  letter-spacing:0.02em;
  line-height:1;
}

/* Machined Metallic Platter Base with Strobe Rim */
.deck-platter-base{
  position:absolute;
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle, #241c14 0%, #120d09 75%, #080604 100%);
  border:1.2px solid rgba(229,195,127,0.5);
  box-shadow:0 0 16px rgba(0,0,0,0.95), inset 0 0 6px rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.platter-strobe-bevel{
  position:absolute;
  inset:1px;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(229,195,127,0.55) 0deg 2.5deg,
      transparent 2.5deg 6deg,
      rgba(229,195,127,0.35) 6deg 8.5deg,
      transparent 8.5deg 12deg
    );
  mask:radial-gradient(circle, transparent 42px, #000 43px);
  -webkit-mask:radial-gradient(circle, transparent 42px, #000 43px);
  opacity:0.75;
}
.platter-slipmat-rim{
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px dashed rgba(229,195,127,0.3);
  opacity:0.6;
}

/* Disco de Vinilo Audiophile con Micro-Surcos Reales */
.radio-vinyl-disc-pro{
  width:88px;
  height:88px;
  border-radius:50%;
  position:relative;
  background:
    /* Micro-surcos radiales ultra-densos de PVC negro */
    repeating-radial-gradient(
      circle at center,
      #1e1711 0px,
      #090705 0.8px,
      #19120c 1.6px,
      #070503 2.4px
    );
  border:1.2px solid rgba(229,195,127,0.7);
  box-shadow:
    0 0 14px rgba(0,0,0,0.95),
    inset 0 0 10px rgba(0,0,0,0.95),
    inset 0 0 1px 1px rgba(229,195,127,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:kgVinylSpin 3.33s linear infinite !important;
  transform-origin:center center !important;
  will-change:transform;
  z-index:2;
}

/* Sound Grooves - Bandas de Pistas Reales */
.groove-lead-in{
  position:absolute;
  inset:2px;
  border-radius:50%;
  border:1px solid rgba(255,245,215,0.28);
  pointer-events:none;
}
.groove-band{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.groove-band.b1{
  inset:7px;
  border:0.8px solid rgba(229,195,127,0.22);
  box-shadow:inset 0 0 3px rgba(0,0,0,0.8);
}
.groove-ring{
  position:absolute;
  inset:13px;
  border-radius:50%;
  border:0.6px solid rgba(229,195,127,0.32);
  pointer-events:none;
}
.groove-band.b2{
  inset:18px;
  border:0.8px solid rgba(229,195,127,0.18);
}
.groove-mid{
  position:absolute;
  inset:22px;
  border-radius:50%;
  border:0.6px solid rgba(229,195,127,0.28);
  pointer-events:none;
}
.groove-band.b3{
  inset:25px;
  border:0.8px solid rgba(229,195,127,0.15);
}
.groove-inner{
  position:absolute;
  inset:27px;
  border-radius:50%;
  border:0.6px solid rgba(229,195,127,0.25);
  pointer-events:none;
}

/* Dead Wax (Surco interior liso previo a la galleta) */
.vinyl-dead-wax{
  position:absolute;
  width:44px;
  height:44px;
  border-radius:50%;
  background:radial-gradient(circle, #0a0705 0%, #140e0a 100%);
  border:0.8px solid rgba(229,195,127,0.28);
  pointer-events:none;
}

/* Reflejo Especular Anisotrópico de Estudio (Fijo, no rota con el disco) */
.vinyl-light-sheen{
  position:absolute;
  width:88px;
  height:88px;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  background:
    conic-gradient(
      from 40deg at 50% 50%,
      rgba(255, 245, 215, 0.28) 0deg,
      rgba(255, 225, 160, 0.08) 25deg,
      transparent 50deg,
      transparent 65deg,
      rgba(255, 225, 160, 0.08) 85deg,
      rgba(255, 245, 215, 0.35) 90deg,
      rgba(255, 225, 160, 0.08) 95deg,
      transparent 125deg,
      transparent 155deg,
      rgba(255, 245, 215, 0.28) 180deg,
      rgba(255, 225, 160, 0.08) 205deg,
      transparent 230deg,
      transparent 245deg,
      rgba(255, 225, 160, 0.08) 265deg,
      rgba(255, 245, 215, 0.35) 270deg,
      rgba(255, 225, 160, 0.08) 275deg,
      transparent 305deg,
      transparent 335deg,
      rgba(255, 245, 215, 0.28) 360deg
    );
  mix-blend-mode:screen;
  opacity:0.92;
}

/* Center Label (Galleta Central Master Recording Audiophile) */
.radio-vinyl-center-pro{
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #241a12 0%, #110c08 65%, #20170f 100%);
  border:1.5px solid #ffd700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 10px rgba(229,195,127,0.7),
    inset 0 0 6px rgba(0,0,0,0.95);
  z-index:4;
  overflow:hidden;
  position:relative;
}
.label-gold-rim{
  position:absolute;
  inset:1.5px;
  border-radius:50%;
  border:0.7px dashed rgba(255,215,0,0.65);
  pointer-events:none;
}
.radio-vinyl-center-pro img{
  width:20px;
  height:20px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  filter:drop-shadow(0 0 4px rgba(229,195,127,0.85));
  z-index:2;
}
.radio-vinyl-center-pro .pin{
  position:absolute;
  width:4.5px;
  height:4.5px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffffff 0%, #e0e0e0 45%, #555555 85%, #1a1a1a 100%);
  box-shadow:0 0 3px #ffffff, 0 1px 3px rgba(0,0,0,0.95);
  z-index:5;
  border:0.5px solid #222;
}

/* Tonearm Overlay SVG */
.radio-tonearm-svg-pro{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  pointer-events:none;
}

/* High Precision Audiophile S-Tonearm Overlay */
.radio-tonearm-svg-pro{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.85));
}

/* 4-Day Schedule Timeline */
.hud-schedule-grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:7px;
  width:100%;
}
.hud-sched-card{
  background:linear-gradient(160deg, rgba(26, 20, 15, 0.85) 0%, rgba(14, 10, 8, 0.98) 100%);
  border:1px solid rgba(229,195,127,0.24);
  border-radius:6px;
  padding:7px 4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:3px;
  position:relative;
  overflow:hidden;
  transition:all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:inset 0 1px 0 rgba(255, 245, 215, 0.08), 0 3px 8px rgba(0,0,0,0.45);
}
.hud-sched-card::before{
  content:'';
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(229,195,127,0.45), transparent);
  pointer-events:none;
}
.hud-sched-card:hover{
  border-color:rgba(229,195,127,0.7);
  background:linear-gradient(160deg, rgba(38, 30, 22, 0.92) 0%, rgba(18, 13, 10, 0.99) 100%);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.65), 0 0 14px rgba(229,195,127,0.25);
}
.hud-sched-card.kick-special{
  border-color:rgba(83,252,24,0.6);
  background:linear-gradient(160deg, rgba(83,252,24,0.16) 0%, rgba(12, 22, 12, 0.97) 100%);
  box-shadow:inset 0 1px 0 rgba(83,252,24,0.4), 0 0 16px rgba(83,252,24,0.22);
}
.hud-sched-card.kick-special::before{
  background:linear-gradient(90deg, transparent, rgba(83,252,24,0.8), transparent);
}
.hud-sched-card.kick-special:hover{
  border-color:rgba(83,252,24,0.95);
  box-shadow:inset 0 1px 0 rgba(83,252,24,0.6), 0 6px 18px rgba(0,0,0,0.7), 0 0 24px rgba(83,252,24,0.45);
}
.hud-sched-card .sc-day{
  font-family:var(--font-display);
  font-size:10px;
  font-weight:900;
  color:#f5e0a0;
  text-transform:uppercase;
  letter-spacing:.05em;
  line-height:1;
  white-space:nowrap;
}
.hud-sched-card.kick-special .sc-day{
  color:var(--kick);
  text-shadow:0 0 8px rgba(83,252,24,0.45);
}
.hud-sched-card .sc-topic{
  font-size:9.5px;
  font-weight:700;
  color:#f1f5f9;
  line-height:1.15;
  white-space:nowrap;
}
.hud-sched-card .sc-time{
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:800;
  color:#fff2c7;
  background:rgba(229,195,127,0.14);
  border:1px solid rgba(229,195,127,0.35);
  padding:2px 6px;
  border-radius:4px;
  margin-top:1px;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hud-sched-card.kick-special .sc-time{
  background:rgba(83,252,24,0.2);
  border-color:rgba(83,252,24,0.6);
  color:#63fc28;
  box-shadow:0 0 8px rgba(83,252,24,0.25);
}
@media (max-width: 480px){
  .hud-sched-card{ padding:6px 2px; }
  .hud-sched-card .sc-day{ font-size:9px; letter-spacing:.03em; }
  .hud-sched-card .sc-topic{ font-size:8.5px; }
  .hud-sched-card .sc-time{ font-size:8px; padding:1.5px 4px; }
}

/* ============================================================
   TEMPORIZADOR CUENTA ATRÁS PRÓXIMO DIRECTO (HORARIO HUD)
   ============================================================ */
.hud-stream-countdown-card {
  margin: 0 0 7px 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(22, 17, 12, 0.95) 0%, rgba(14, 10, 7, 0.98) 100%);
  border: 1px solid rgba(229, 195, 127, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 240, 195, 0.12), 0 3px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.25s ease;
}
.hud-stream-countdown-card.is-live-now {
  border-color: rgba(239, 68, 68, 0.7);
  background: linear-gradient(90deg, rgba(40, 10, 10, 0.95) 0%, rgba(20, 5, 5, 0.98) 100%);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 100, 100, 0.25);
  overflow: hidden;
  position: relative;
  padding: 5px 0;
}
.hud-stream-countdown-card.is-live-now .cd-stream-badge,
.hud-stream-countdown-card.is-live-now .cd-stream-digits-group {
  display: none !important;
}

/* Cintillo / Carrusel Slash En Directo (Movimiento de Derecha a Izquierda) */
.hud-stream-live-ticker-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  contain: paint layout;
  text-decoration: none !important;
  cursor: pointer;
  padding: 1px 0;
}
.hud-stream-live-ticker-wrap::before,
.hud-stream-live-ticker-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
}
.hud-stream-live-ticker-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(28, 8, 8, 0.98), transparent);
}
.hud-stream-live-ticker-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(28, 8, 8, 0.98), transparent);
}
.hud-stream-live-ticker-track {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  will-change: transform;
  -webkit-animation: hudLiveTickerScroll 16s linear infinite !important;
  animation: hudLiveTickerScroll 16s linear infinite !important;
}
.hud-stream-countdown-card:hover .hud-stream-live-ticker-track,
.hud-stream-countdown-card:focus-within .hud-stream-live-ticker-track {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
@keyframes hudLiveTickerScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@-webkit-keyframes hudLiveTickerScroll {
  0% { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(-50%, 0, 0); }
}
.hud-live-ticker-half {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.hud-live-ticker-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  transform: translateZ(0);
}
.hud-live-ticker-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  margin-right: 6px;
  display: inline-block;
  animation: radarPulse 1.5s infinite;
  flex-shrink: 0;
}
.hud-live-ticker-prefix {
  color: #ef4444;
  font-weight: 900;
  margin-right: 5px;
}
.hud-live-ticker-title {
  color: #f7e3af;
  font-weight: 800;
}
.hud-live-ticker-slash {
  color: #ef4444;
  font-weight: 900;
  margin: 0 16px;
  font-size: 11px;
  opacity: 0.85;
}
.hud-stream-countdown-card .cd-stream-badge {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  color: #f7e3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}
.hud-stream-countdown-card .live-radar-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #53fc18;
  box-shadow: 0 0 8px #53fc18;
  animation: radarPulse 1.8s infinite;
  flex-shrink: 0;
}
.hud-stream-countdown-card.is-live-now .live-radar-dot {
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
}
.hud-stream-countdown-card .next-stream-highlight {
  color: #53fc18;
  font-weight: 900;
}
.hud-stream-countdown-card .cd-stream-digits-group {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.hud-stream-countdown-card .cd-stream-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #16100a 0%, #080604 100%);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(229, 195, 127, 0.3);
  min-width: 25px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 215, 0.1), inset 0 0 6px rgba(0, 0, 0, 0.85);
}
.hud-stream-countdown-card .cd-stream-pill .num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  color: #fff2c7;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 224, 130, 0.45);
}
.hud-stream-countdown-card .cd-stream-pill .lbl {
  font-size: 6px;
  color: #94a3b8;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: 1px;
  line-height: 1;
}
.hud-stream-countdown-card .cd-stream-sep {
  color: rgba(229, 195, 127, 0.5);
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
}

/* Resaltado del día próximo directo en las tarjetas */
.hud-sched-card.is-next-target {
  border-color: rgba(229, 195, 127, 0.85) !important;
  box-shadow: 0 0 14px rgba(229, 195, 127, 0.35), inset 0 1px 0 rgba(255, 245, 215, 0.3) !important;
  transform: translateY(-1px);
}
.hud-sched-card.is-next-target .sc-day::after {
  content: ' • PRÓXIMO';
  font-size: 6.5px;
  color: #53fc18;
  font-weight: 900;
  letter-spacing: 0.02em;
  display: block;
  margin-top: 1px;
}
@media (max-width: 480px) {
  .hud-stream-countdown-card {
    padding: 4px 7px;
    gap: 4px;
  }
  .hud-stream-countdown-card.is-live-now {
    padding: 4px 0;
  }
  .hud-live-ticker-item {
    font-size: 8.5px;
  }
  .hud-live-ticker-slash {
    margin: 0 10px;
    font-size: 9.5px;
  }
  .hud-stream-countdown-card .cd-stream-badge {
    font-size: 8px;
  }
  .hud-stream-countdown-card .cd-stream-pill {
    min-width: 21px;
    padding: 1.5px 3.5px;
  }
  .hud-stream-countdown-card .cd-stream-pill .num {
    font-size: 9.5px;
  }
}

/* Telemetry Digital Countdown Bar */
.radio-countdown-centered-card{
  margin:0;
  padding:5px 12px;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(22, 17, 12, 0.95) 0%, rgba(14, 10, 7, 0.98) 100%);
  border:1px solid rgba(229, 195, 127, 0.32);
  box-shadow:inset 0 1px 0 rgba(255, 240, 195, 0.15), 0 3px 12px rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.radio-countdown-centered-card .cd-badge{
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:800;
  color:#f7e3af;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:flex;
  align-items:center;
  gap:5px;
}
.radio-countdown-centered-card .cd-digits-group{
  display:flex;
  align-items:center;
  gap:3px;
}
.radio-countdown-centered-card .cd-digit-pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #16100a 0%, #080604 100%);
  padding:2.5px 6.5px;
  border-radius:4px;
  border:1px solid rgba(229, 195, 127, 0.32);
  min-width:28px;
  box-shadow:inset 0 1px 0 rgba(255, 245, 215, 0.12), inset 0 0 6px rgba(0,0,0,0.9);
}
.radio-countdown-centered-card .cd-digit-pill .num{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:800;
  color:#fff2c7;
  line-height:1;
  text-shadow:0 0 8px rgba(255, 224, 130, 0.5);
}
.radio-countdown-centered-card .cd-digit-pill .lbl{
  font-size:6.5px;
  color:#94a3b8;
  font-weight:800;
  letter-spacing:.03em;
  margin-top:1px;
  line-height:1;
}
.radio-countdown-centered-card .cd-colon{
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:800;
  color:var(--gold);
  line-height:1;
  animation:kgColonPulse 1s infinite;
}
@keyframes kgColonPulse{
  0%, 100%{opacity:1;}
  50%{opacity:0.35;}
}

/* ============================================================
   TOP 1 MUNDIAL: CONTACT & COLLABORATIONS TICKER BAR
   ============================================================ */
.radio-contact-ticker-bar{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:28px;
  margin:0;
  box-sizing:border-box;
  background:linear-gradient(90deg, rgba(22, 17, 12, 0.95) 0%, rgba(13, 10, 8, 0.98) 50%, rgba(22, 17, 12, 0.95) 100%);
  border:1px solid rgba(229, 195, 127, 0.28);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.radio-contact-ticker-bar .ticker-badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:100%;
  padding:0 8px;
  background:linear-gradient(135deg, rgba(229, 195, 127, 0.18) 0%, rgba(229, 195, 127, 0.06) 100%);
  border-right:1px solid rgba(229, 195, 127, 0.22);
  z-index:2;
}
.radio-contact-ticker-bar .ticker-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#53fc18;
  box-shadow:0 0 6px #53fc18;
  animation:kgTickerDotPulse 1.8s infinite;
}
@keyframes kgTickerDotPulse{
  0%, 100%{opacity:1; transform:scale(1);}
  50%{opacity:0.35; transform:scale(0.85);}
}
.radio-contact-ticker-bar .ticker-label{
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:800;
  letter-spacing:0.12em;
  color:#f7e3af;
  text-transform:uppercase;
  line-height:1;
}
.radio-contact-ticker-bar .ticker-track-wrap{
  position:relative;
  flex:1;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  contain:paint layout;
}
.radio-contact-ticker-bar .ticker-track-wrap::before,
.radio-contact-ticker-bar .ticker-track-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:16px;
  pointer-events:none;
  z-index:3;
}
.radio-contact-ticker-bar .ticker-track-wrap::before{
  left:0;
  background:linear-gradient(90deg, rgba(16, 12, 9, 0.95), transparent);
}
.radio-contact-ticker-bar .ticker-track-wrap::after{
  right:0;
  background:linear-gradient(270deg, rgba(16, 12, 9, 0.95), transparent);
}
.radio-contact-ticker-bar .ticker-track{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  width:max-content !important;
  min-width:100% !important;
  flex-shrink:0 !important;
  transform:translate3d(0, 0, 0);
  -webkit-transform:translate3d(0, 0, 0);
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  perspective:1000px !important;
  -webkit-perspective:1000px !important;
  will-change:transform !important;
  -webkit-animation:kgTickerScroll 25s linear infinite !important;
  animation:kgTickerScroll 25s linear infinite !important;
}
.radio-contact-ticker-bar:hover .ticker-track,
.radio-contact-ticker-bar:focus-within .ticker-track,
.radio-contact-ticker-bar .ticker-track:hover{
  -webkit-animation-play-state:paused !important;
  animation-play-state:paused !important;
}
@keyframes kgTickerScroll{
  0%{
    transform:translate3d(0, 0, 0);
  }
  100%{
    transform:translate3d(-50%, 0, 0);
  }
}
@-webkit-keyframes kgTickerScroll{
  0%{
    -webkit-transform:translate3d(0, 0, 0);
  }
  100%{
    -webkit-transform:translate3d(-50%, 0, 0);
  }
}
.radio-contact-ticker-bar .ticker-item{
  display:inline-flex;
  align-items:center;
  font-size:9.5px;
  font-weight:600;
  color:#cbd5e1;
  letter-spacing:0.02em;
  padding-right:32px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeSpeed;
  transform:translateZ(0);
}
.radio-contact-ticker-bar .ticker-email{
  color:#ffd978;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dashed rgba(255, 217, 120, 0.6);
  margin:0 4px;
  transition:color .2s, border-color .2s, text-shadow .2s;
}
.radio-contact-ticker-bar .ticker-email:hover{
  color:#ffffff;
  border-bottom-color:#ffffff;
  text-shadow:0 0 8px rgba(229, 195, 127, 0.8);
}
.radio-contact-ticker-bar .ticker-sep{
  color:var(--gold);
  font-size:7px;
  opacity:0.6;
  margin-left:14px;
}

/* ============================================================
   TOP 1 MUNDIAL: DISCORD ACTION BUTTON (CYBER OBSIDIAN + NEON)
   ============================================================ */
.radio-actions-duo{
  display:flex;
  width:100%;
  margin:auto 0;
}
.radio-btn-kick-pro{
  display:none;
}
.radio-btn-discord-pro{
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100%;
  min-height:42px;
  padding:8px 14px;
  box-sizing:border-box;
  text-decoration:none;
  cursor:pointer;
  border-radius:8px !important;
  overflow:hidden;
  
  /* Cyber Obsidian Glass with Discord Blurple & Gold Accent */
  background:linear-gradient(135deg, rgba(88, 101, 242, 0.22) 0%, rgba(22, 17, 34, 0.96) 50%, rgba(14, 11, 20, 0.98) 100%) !important;
  border:1px solid rgba(88, 101, 242, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(142, 153, 255, 0.4),
    inset 0 -1px 0 rgba(229, 195, 127, 0.25),
    0 4px 18px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(88, 101, 242, 0.22) !important;
  transition:all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Shimmer Sweep Animation Across Button */
.radio-btn-discord-pro::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform:skewX(-25deg);
  animation:kgSheenPass 4s infinite ease-in-out;
  pointer-events:none;
}
@keyframes kgSheenPass{
  0%{left:-100%;}
  30%, 100%{left:180%;}
}

.radio-btn-discord-pro:hover{
  background:linear-gradient(135deg, rgba(88, 101, 242, 0.35) 0%, rgba(28, 22, 44, 0.98) 50%, rgba(18, 14, 28, 1) 100%) !important;
  border-color:rgba(142, 153, 255, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 24px rgba(88, 101, 242, 0.4),
    0 0 22px rgba(88, 101, 242, 0.35) !important;
  transform:translateY(-1.5px) !important;
}

.discord-btn-content{
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2;
}
.discord-icon-badge{
  width:26px;
  height:26px;
  border-radius:6px;
  background:linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 0 10px rgba(88, 101, 242, 0.8), inset 0 1px 0 rgba(255,255,255,0.4);
  flex-shrink:0;
}
.discord-icon-badge svg{
  width:15px;
  height:15px;
  fill:currentColor;
}
.discord-btn-text{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:800;
  color:#ffffff !important;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.discord-btn-pill{
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.06em;
  color:#63fc28;
  background:rgba(83, 252, 24, 0.14);
  border:1px solid rgba(83, 252, 24, 0.45);
  padding:3px 9px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:5px;
  z-index:2;
  box-shadow:0 0 8px rgba(83, 252, 24, 0.2);
  transition:all 0.2s ease;
}
.radio-btn-discord-pro:hover .discord-btn-pill{
  background:rgba(83, 252, 24, 0.25);
  border-color:rgba(83, 252, 24, 0.8);
  color:#fff;
  box-shadow:0 0 12px rgba(83, 252, 24, 0.4);
}

.radio-hud-panel .radio-song-btn{
  background:linear-gradient(135deg, #e5c37f 0%, #c49a45 100%) !important;
  color:#110d08 !important;
  font-weight:900 !important;
  font-size:10px !important;
  padding:4px 10px !important;
  border-radius:6px !important;
  white-space:nowrap !important;
  border:1px solid #ffe082 !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.4) !important;
  transition:all .15s ease !important;
}
.radio-hud-panel .radio-song-btn:hover{
  filter:brightness(1.1) !important;
  transform:scale(1.02) !important;
}

@media(max-width:768px){
  .hero-dual-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}
.hero-copy{padding:4px 2px;display:flex;flex-direction:column;}
.hero-copy .eyebrow{margin-bottom:8px;}
.hero-copy h1{
  font-size:clamp(32px,4.5vw,50px);
  line-height:.95;
  margin:0 0 8px;
}
.hero-copy h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:540px;font-weight:500;margin:0 0 12px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;}
.hero-notice{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;color:var(--gold-2);
  padding:10px 16px;border-radius:999px;
  background:rgba(255,173,47,.08);border:1px solid rgba(255,173,47,.2);
}
.hero-notice .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.8s ease-in-out infinite;flex:none;}

/* Transformación dinámica cuando Kano está en DIRECTO ACTIVO */
.hero.hero-live-active .hud{
  border-color:rgba(255,65,100,.55);
  box-shadow:0 0 45px rgba(255,65,100,.2), 0 20px 50px rgba(0,0,0,.8);
  background:linear-gradient(145deg, rgba(28, 14, 16, 0.96), rgba(16, 12, 10, 0.96));
}
.hero.hero-live-active.live-kick-focus .hud{
  border-color:rgba(75,255,138,.55);
  box-shadow:0 0 45px rgba(75,255,138,.2), 0 20px 50px rgba(0,0,0,.8);
  background:linear-gradient(145deg, rgba(12, 24, 16, 0.96), rgba(16, 12, 10, 0.96));
}
.hero.hero-live-active .hud-header{
  background:rgba(255,65,100,.12);
  border-bottom-color:rgba(255,65,100,.3);
}
.hero.hero-live-active.live-kick-focus .hud-header{
  background:rgba(75,255,138,.12);
  border-bottom-color:rgba(75,255,138,.3);
}


/* Hero Section Copy, Previews & Dual Channel HUD Monitor */
/* ============================================================
   RITMO VISUAL DE SECCIONES & ARQUITECTURA SIMÉTRICA
   ============================================================ */
.section{
  padding:56px 0 44px;
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1040px, calc(100% - 32px));
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(229,195,127,0.18) 25%, rgba(229,195,127,0.38) 50%, rgba(229,195,127,0.18) 75%, transparent 100%);
  pointer-events:none;
}
.section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  margin-bottom:28px;
  width:100%;
}
.section-head > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.section-head .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(24px,3.2vw,32px);
  line-height:1.05;
  color:#fff;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.8));
}
.section-head p{
  max-width:580px;
  margin:0 auto;
  font-size:13px;
  color:#94a3b8;
  line-height:1.5;
  text-align:center;
}

/* --- preview de Radio y Merch: ocupa el hueco libre y se alinea con el HUD --- */
.hero-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:auto;
  padding-top:24px;
}
.hero-mini-card{
  padding:22px 20px;
  border-radius:var(--radius-md);
  display:flex;
  flex-direction:column;
  gap:10px;
  background:rgba(18, 14, 11, 0.90);
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-mini-card > * {
  position:relative;
  z-index:2;
}
.hero-mini-watermark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1 !important;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hero-mini-card:hover .hero-mini-watermark {
  opacity: 0.28;
  transform: scale(1.04);
}
.hero-mini-watermark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  border-radius: inherit;
  filter: drop-shadow(0 0 20px rgba(229, 195, 127, 0.45));
}
.hero-mini-card:hover{
  border-color:rgba(255,173,47,.45);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  background:rgba(22, 17, 13, 0.95);
}
.hero-mini-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-2);
  background:rgba(255,173,47,.10);
  border:1px solid rgba(255,173,47,.25);
}
.hero-mini-card h3{
  font-size:19px;
  text-transform:none;
  letter-spacing:0;
  font-weight:800;
  font-family:var(--font-body);
  color:#ffffff;
  margin:0;
}
.hero-mini-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  flex:1;
}
.hero-mini-card .btn{
  width:fit-content;
  margin-top:4px;
}
.hero-mini-card.merch{
  background:linear-gradient(145deg, rgba(255,173,47,.05), rgba(18,14,11,.92));
}
@media (max-width:640px){.hero-mini-grid{grid-template-columns:1fr;}}

/* --- HUD panel: signature high-end gaming card --- */
.hud{
  position:relative;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:11px;
  background:linear-gradient(145deg, #14110d 0%, #1c1612 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.35) !important;
  border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.85), inset 0 1px 0 rgba(255, 235, 185, 0.2) !important;
}
.hud::before,.hud::after,.hud .bl,.hud .br{
  content:"";position:absolute;width:18px;height:18px;
  border-color:#e5c37f;border-style:solid;opacity:.85;pointer-events:none;
}
.hud::before{top:6px;left:6px;border-width:2px 0 0 2px;border-radius:2px 0 0 0;}
.hud::after{top:6px;right:6px;border-width:2px 2px 0 0;border-radius:0 2px 0 0;}
.hud .bl{bottom:6px;left:6px;border-width:0 0 2px 2px;border-radius:0 0 0 2px;}
.hud .br{bottom:6px;right:6px;border-width:0 2px 2px 0;border-radius:0 0 2px 0;}

.hud-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:2px;
}
.hud-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#e5c37f;
}
.hud-live-beacon{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e5c37f;
  box-shadow:0 0 8px rgba(229,195,127,.6);
}
.hud-subtag{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
  font-weight:700;
}

.hud-channels-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hud-channel-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px !important;
  border-radius:8px !important;
  background:linear-gradient(145deg, rgba(28, 20, 15, 0.92) 0%, rgba(14, 10, 7, 0.98) 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.28) !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255, 240, 200, 0.15) !important;
  transition:all .25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hud-channel-card[data-open-pip="twitch"]:hover{
  border-color:rgba(145, 70, 255, 0.8) !important;
  background:linear-gradient(145deg, rgba(38, 22, 58, 0.95) 0%, rgba(18, 12, 28, 0.98) 100%) !important;
  box-shadow:0 8px 25px rgba(0,0,0,0.75), 0 0 22px rgba(145, 70, 255, 0.35), inset 0 1px 0 rgba(210, 180, 255, 0.3) !important;
  transform:translateY(-1.5px);
}
.hud-channel-card[data-open-pip="kick"]:hover{
  border-color:rgba(83, 252, 24, 0.8) !important;
  background:linear-gradient(145deg, rgba(22, 38, 20, 0.95) 0%, rgba(10, 20, 10, 0.98) 100%) !important;
  box-shadow:0 8px 25px rgba(0,0,0,0.75), 0 0 22px rgba(83, 252, 24, 0.35), inset 0 1px 0 rgba(180, 255, 160, 0.3) !important;
  transform:translateY(-1.5px);
}
.hud-channel-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.hud-channel-icon{
  width:32px !important;
  height:32px !important;
  border-radius:6px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform 0.2s ease;
}
.hud-channel-card:hover .hud-channel-icon{
  transform:scale(1.08);
}
.hud-channel-icon.twitch{
  background:linear-gradient(135deg, rgba(145,70,255,.3) 0%, rgba(85,30,180,.6) 100%) !important;
  border:1px solid rgba(145,70,255,.6) !important;
  color:#fff !important;
  box-shadow:0 0 12px rgba(145,70,255,.4) !important;
}
.hud-channel-icon.kick{
  background:linear-gradient(135deg, rgba(83,252,24,.25) 0%, rgba(40,160,10,.55) 100%) !important;
  border:1px solid rgba(83,252,24,.6) !important;
  color:#fff !important;
  box-shadow:0 0 12px rgba(83,252,24,.4) !important;
}
.hud-channel-icon svg{
  width:16px;
  height:16px;
}
.hud-channel-info{
  min-width:0;
}
.hud-channel-name{
  font-size:13.5px !important;
  font-weight:900 !important;
  color:#ffffff !important;
  line-height:1.2;
  white-space:nowrap;
  letter-spacing:.02em;
}
.hud-channel-handle{
  font-size:10px !important;
  color:#cbd5e1 !important;
  font-family:var(--font-mono);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0.85;
}
.hud-channel-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.channel-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px !important;
  border-radius:999px !important;
  background:rgba(255,65,100,.12) !important;
  border:1px solid rgba(255,65,100,.35) !important;
}
.channel-status-pill.live{
  background:rgba(83,252,24,.15) !important;
  border-color:rgba(83,252,24,.45) !important;
  box-shadow:0 0 10px rgba(83,252,24,.3);
}
.led{
  width:7px !important;
  height:7px !important;
  border-radius:50%;
  background:#ff476f;
  flex:none;
  box-shadow:0 0 8px rgba(255,71,111,.6);
}
.led.on{
  background:#53fc18 !important;
  box-shadow:0 0 12px rgba(83,252,24,.8) !important;
  animation:pulse 1.4s ease-in-out infinite;
}
.status-txt{
  font-family:var(--font-mono);
  font-size:10.5px !important;
  font-weight:800;
  color:#ff476f;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.status-txt.live{
  color:#53fc18 !important;
}
.hud-channel-action{
  font-family:var(--font-display) !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  color:#110d06 !important;
  padding:5.5px 14px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, #FFF3D1 0%, #E5C37F 50%, #B89047 100%) !important;
  border:1px solid rgba(255, 245, 215, 0.9) !important;
  box-shadow:0 3px 12px rgba(229, 195, 127, 0.4), inset 0 1px 0 #ffffff !important;
  text-decoration:none !important;
  text-transform:uppercase !important;
  transition:all .22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap;
}
.hud-channel-action:hover{
  transform:translateY(-1.5px) scale(1.06) !important;
  box-shadow:0 6px 20px rgba(255, 215, 0, 0.6), inset 0 1px 0 #ffffff !important;
  filter:brightness(1.08) !important;
}

.hud-countdown{
  border-radius:18px;
  padding:20px 18px 18px;
  background:linear-gradient(145deg, #120e0b 0%, #18130e 100%);
  border:1px solid rgba(229, 195, 127, 0.28);
  box-shadow:inset 0 1px 0 rgba(255, 235, 185, 0.15);
  text-align:center;
}
.hud-countdown .cd-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  color:#e5c37f;
  text-transform:uppercase;
  margin-bottom:12px;
}
.cd-nums{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0 14px;
}
.cd-box{
  flex:1;
  max-width:76px;
  padding:10px 8px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(229, 195, 127, 0.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  box-shadow:inset 0 1px 0 rgba(255, 235, 185, 0.1);
}
.cd-box strong{
  font-family:var(--font-mono);
  font-size:32px;
  font-weight:800;
  color:#e5c37f;
  line-height:1;
  letter-spacing:0.02em;
  text-shadow:0 0 16px rgba(229, 195, 127, 0.35);
}
.cd-box span{
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  color:#94a3b8;
  text-transform:uppercase;
}
.cd-next-wrap{
  padding-top:8px;
  border-top:1px solid rgba(229, 195, 127, 0.2);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.cd-next-tag{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  color:#e5c37f;
  font-weight:700;
}
.cd-next{
  font-size:13.5px;
  line-height:1.45;
  color:#cbd5e1;
  font-weight:500;
}
.cd-next b{
  color:#ffffff;
  font-weight:700;
}

.hud-schedule-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
}
.hud-schedule-title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:#e5c37f;
  text-transform:uppercase;
}
.hud-schedule-more{
  font-family:var(--font-mono);
  font-size:11px;
  color:#f7e3af;
  text-decoration:none;
  font-weight:700;
  transition:opacity .15s ease;
}
.hud-schedule-more:hover{
  text-decoration:underline;
}
.hud-mini{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:240px;
  overflow:auto;
}
.hud-mini::-webkit-scrollbar{width:5px;}
.hud-mini::-webkit-scrollbar-thumb{background:rgba(229, 195, 127, 0.35);border-radius:3px;}
.hud-mini-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:4px 8px;
  border-radius:8px;
  background:linear-gradient(145deg, #16120e 0%, #100d09 100%);
  border:1px solid rgba(229, 195, 127, 0.22);
  font-size:11.5px;
  transition:border-color .2s ease, background .2s ease;
}
.hud-mini-row:hover{
  border-color:#e5c37f;
  background:linear-gradient(145deg, #1e1813 0%, #15100c 100%);
}
.hud-mini-row .d{
  font-family:var(--font-display);
  font-weight:800;
  color:#e5c37f;
  font-size:11.5px;
  min-width:54px;
  text-transform:capitalize;
  white-space:nowrap;
}
.hud-mini-row .t{
  color:#f8fafc;
  font-weight:500;
  flex:1;
  margin:0 4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.hud-mini-row .h{
  font-family:var(--font-mono);
  color:#e5c37f;
  background:rgba(229, 195, 127, 0.12);
  border:1px solid rgba(229, 195, 127, 0.25);
  font-size:9.5px;
  font-weight:700;
  padding:1.5px 6px;
  border-radius:5px;
  background:rgba(255,255,255,.03);
}

.hud-notify-toggle-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5.5px 10px;
  border-radius:4px;
  background:linear-gradient(145deg, rgba(25, 20, 15, 0.95) 0%, rgba(16, 12, 9, 0.98) 100%);
  border:1px solid rgba(229, 195, 127, 0.32);
  color:#f3e5c8;
  font-size:10.5px;
  font-weight:700;
  font-family:var(--font-body);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255, 240, 195, 0.12), 0 3px 10px rgba(0,0,0,0.5);
  transition:all .2s ease;
}
.hud-notify-toggle-btn:hover{
  background:linear-gradient(145deg, rgba(35, 28, 20, 0.98) 0%, rgba(22, 16, 12, 0.99) 100%);
  border-color:var(--gold-2);
  box-shadow:0 4px 14px rgba(229, 195, 127, 0.25);
  transform:translateY(-1px);
}
.hud-notify-left{
  display:flex;
  align-items:center;
  gap:6px;
}
.hud-notify-pill-tag{
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
  padding:1.5px 6px;
  border-radius:3px;
  background:rgba(229, 195, 127, 0.15);
  border:1px solid rgba(229, 195, 127, 0.35);
  color:var(--gold);
  text-transform:uppercase;
  line-height:1.2;
}
.hud-notify-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 6px var(--gold);
  flex-shrink:0;
}

.pulse-live-stream-btn{
  position:relative;
  animation:streamBtnGlow 2.2s infinite ease-in-out;
  box-shadow:0 0 16px rgba(255,173,47,.45);
}
@keyframes streamBtnGlow{
  0%, 100%{
    transform:scale(1);
    box-shadow:0 0 12px rgba(255,173,47,.35);
  }
  50%{
    transform:scale(1.018);
    box-shadow:0 0 24px rgba(255,173,47,.7);
  }
}
.btn-kick.pulse-live-stream-btn{
  background:rgba(83,252,24,.18);
  border:1px solid #53FC18;
  color:#53FC18;
  box-shadow:0 0 16px rgba(83,252,24,.45);
}
.btn-kick.pulse-live-stream-btn:hover{
  background:#53FC18;
  color:#000;
  box-shadow:0 0 28px rgba(83,252,24,.8);
}
.btn-twitch.pulse-live-stream-btn{
  background:rgba(145,70,255,.18);
  border:1px solid #9146FF;
  color:#c49eff;
  box-shadow:0 0 16px rgba(145,70,255,.45);
}
.btn-twitch.pulse-live-stream-btn:hover{
  background:#9146FF;
  color:#fff;
  box-shadow:0 0 28px rgba(145,70,255,.8);
}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.82);}}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
}


/* Grid Cards (Inicio / Plataformas / Apoyo) */
/* ============================================================
   GRID-CARDS (inicio) — plataformas / apoyo
   ============================================================ */
.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.card{
  padding:14px 16px;border-radius:14px;
  display:flex;flex-direction:column;gap:10px;
  background:rgba(18, 14, 11, 0.90);
  border:1px solid var(--line);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.card:hover{
  border-color:rgba(255,173,47,.45);
  box-shadow:0 10px 28px rgba(0,0,0,.6);
  background:rgba(22, 17, 13, 0.95);
}
.card .ico{
  font-size:22px;line-height:1;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:rgba(255,173,47,.10);
  border:1px solid var(--line);
}
.card h3{font-size:15.5px;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:800;color:#ffffff;margin:0;}
.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.45;flex:1;}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;}
@media (max-width:900px){.grid-cards{grid-template-columns:1fr;}}


/* Sorteos & Recompensas Section */
/* ============================================================
   SECCIÓN: SORTEOS & RECOMPENSAS
   ============================================================ */
.sorteos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.sorteo-card{
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  background: linear-gradient(145deg, rgba(20, 16, 13, 0.94) 0%, rgba(10, 8, 6, 0.98) 100%) !important;
  border: 1.5px solid rgba(229, 195, 127, 0.45) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255, 240, 195, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.sorteo-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}
.sorteo-card:hover{
  border-color: rgba(255, 230, 160, 0.9) !important;
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.9), 0 0 30px rgba(229, 195, 127, 0.25);
}
.sorteo-card.featured{
  border-color: rgba(229, 195, 127, 0.75) !important;
  background: linear-gradient(145deg, rgba(28, 21, 15, 0.96) 0%, rgba(14, 10, 7, 0.99) 100%) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,0.85), 0 0 25px rgba(229, 195, 127, 0.2) !important;
}
.sorteo-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.sorteo-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sorteo-badge.active{
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #ff6b6b;
}
.sorteo-badge.perk{
  background: rgba(229, 195, 127, 0.18);
  border: 1px solid rgba(229, 195, 127, 0.45);
  color: var(--gold-2);
}
.sorteo-badge.live-perk{
  background: rgba(83, 252, 24, 0.12);
  border: 1px solid rgba(83, 252, 24, 0.35);
  color: var(--kick);
}
.sorteo-card-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(229, 195, 127, 0.18), rgba(20, 16, 13, 0.8));
  border: 1px solid rgba(229, 195, 127, 0.4);
  box-shadow: 0 0 16px rgba(229, 195, 127, 0.15);
  margin-bottom: 12px;
}
.sorteo-card h3{
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
  font-family: var(--font-body);
  line-height: 1.3;
}
.sorteo-card p{
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 16px 0;
  flex: 1;
}
.sorteo-perks-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(229, 195, 127, 0.2);
  border-radius: 12px;
  font-size: 12px;
}
.sorteo-perk-item{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0;
}
.sorteo-perk-item span.icon{
  font-size: 14px;
}
.sorteo-tags-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.sorteo-tag{
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
.sorteo-action-btn{
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
@media (max-width: 900px){
  .sorteos-grid{
    grid-template-columns: 1fr;
  }
}

/* Estado del countdown en Hero */
.hud-countdown.is-live{
  background:linear-gradient(135deg, rgba(255,65,100,.12), rgba(75,255,138,.08));
  border-color:rgba(255,65,100,.4);
  box-shadow:0 0 24px rgba(255,65,100,.15);
}
.hud-countdown.is-live .cd-label{
  color:var(--red);
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.hud-countdown.is-live .cd-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px rgba(255,65,100,.25);
  animation:pulse 1.2s infinite;
}
.hud-countdown .cd-action-btn{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}


/* Horario y Cuenta Atrás de Directos */
/* ============================================================
   HORARIO Y CUENTA ATRÁS POR DIRECTO
   ============================================================ */
.horario-layout{
  display:grid;
  grid-template-columns:minmax(280px, .75fr) minmax(0, 1.25fr);
  gap:24px;
  align-items:stretch;
}
.horario-art{
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  min-height:380px;
  background:linear-gradient(145deg, rgba(22, 17, 13, 0.95), rgba(10, 7, 5, 0.95));
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
}
.horario-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  z-index:0;
  transition:transform .4s ease;
}
.horario-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(7,4,3,.15) 0%, rgba(7,4,3,.55) 55%, rgba(7,4,3,.92) 100%);
  pointer-events:none;
}
.horario-art .tag{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  padding:8px 14px;border-radius:999px;background:rgba(7,4,3,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--gold-2);
}
.horario-art-footer{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.horario-art-footer h3{
  font-size:20px;
  color:#ffffff;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0;
}
.horario-art-footer p{
  margin:0;
  font-size:12.5px;
  color:var(--muted);
}
.schedule-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.schedule-item{
  padding:14px 18px;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:16px;
  background:rgba(18, 14, 11, 0.90);
  border:1px solid var(--line);
  min-width:0;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.schedule-item:hover{
  border-color:rgba(255,173,47,.45);
  background:rgba(24, 18, 14, 0.96);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.schedule-item.is-live-now{
  background:linear-gradient(135deg, rgba(255,65,100,.14), rgba(22,17,13,.95));
  border-color:rgba(255,65,100,.55);
  box-shadow:0 0 32px rgba(255,65,100,.18);
}
.schedule-item.is-today-stream{
  border-color:rgba(255,173,47,.5);
  background:linear-gradient(135deg, rgba(255,173,47,.08), rgba(22,17,13,.95));
}
.schedule-thumb{
  width:58px;
  height:58px;
  min-width:58px;
  max-width:58px;
  border-radius:14px;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid var(--line);
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.schedule-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.schedule-thumb-empty{
  color:var(--gold-2);
  background:rgba(255,173,47,.08);
  border-color:rgba(255,173,47,.22);
}
.schedule-thumb-empty svg{
  width:24px;
  height:24px;
  opacity:.85;
}
.schedule-item-day-col{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:105px;
  max-width:125px;
  flex-shrink:0;
}
.schedule-item .day{
  font-family:var(--font-display);
  font-size:17.5px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--gold-2);
  letter-spacing:.02em;
  line-height:1.1;
  margin:0;
}
.schedule-status-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:6px;
  width:fit-content;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.badge-live{
  background:rgba(255,65,100,.2);
  color:#ff4164;
  border:1px solid rgba(255,65,100,.45);
  animation:pulse 1.4s infinite;
}
.badge-today{
  background:rgba(255,173,47,.15);
  color:var(--gold-2);
  border:1px solid rgba(255,173,47,.35);
}
.badge-tomorrow{
  background:rgba(169,112,255,.15);
  color:#c798ff;
  border:1px solid rgba(169,112,255,.3);
}
.badge-upcoming{
  background:rgba(255,255,255,.06);
  color:var(--muted);
  border:1px solid var(--line-soft);
}
.schedule-item .info{
  flex:1 1 auto;
  min-width:0;
}
.schedule-item .info h4{
  margin:0 0 3px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
  color:var(--text);
  line-height:1.35;
}
.schedule-item .info p{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
  word-break:break-word;
}
.schedule-item-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  margin-left:auto;
}
.schedule-item .time{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  padding:6px 12px;
  border-radius:10px;
  background:rgba(255,173,47,.10);
  border:1px solid rgba(255,173,47,.28);
  color:var(--gold-2);
  white-space:nowrap;
  letter-spacing:.02em;
}
@media (max-width:980px){
  .horario-layout{grid-template-columns:1fr;}
  .horario-art{min-height:220px;}
}
@media (max-width:768px){
  .schedule-item{flex-wrap:wrap;gap:12px;padding:14px 16px;}
  .schedule-thumb{width:46px;height:46px;min-width:46px;max-width:46px;}
  .schedule-item-day-col{min-width:unset;max-width:unset;}
  .schedule-item .info{width:100%;flex:1 1 100%;order:3;}
  .schedule-item-actions{width:auto;margin-left:auto;order:2;}
}


/* Noticias / Events Hub (Carousel, Filter Bar, Grid) */
/* ============================================================
   NOTICIAS / EVENTOS (WORLD-CLASS COMPACT ESPORTS EDITORIAL)
   ============================================================ */
#noticias {
  scroll-margin-top: 90px;
  position: relative;
}

#noticias::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 100%;
  background: radial-gradient(circle at 50% 10%, rgba(255, 178, 54, 0.04) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

@keyframes newsPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

/* --- Carrusel Destacado Hero (Estilo VOD / Stream Cards tipo Kick / Twitch) --- */
.news-carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px auto;
  background: transparent;
  padding: 0;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.news-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.news-carousel-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: rgba(255, 178, 54, 0.12);
  border: 1px solid rgba(255, 178, 54, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
}
.news-carousel-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #53fc18;
  box-shadow: 0 0 8px #53fc18;
  animation: newsPulse 1.8s infinite;
}
.news-carousel-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.news-carousel-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(24, 18, 14, 0.85);
  border: 1px solid rgba(229, 195, 127, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.news-carousel-nav:hover {
  background: rgba(255, 178, 54, 0.25);
  border-color: var(--gold-2);
  color: var(--gold-2);
  transform: scale(1.06);
}
.news-carousel-nav svg {
  width: 14px;
  height: 14px;
}
.news-carousel-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 0 12px 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
}
.news-carousel-track {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px;
  width: max-content !important;
  flex-shrink: 0;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  will-change: transform;
}

.news-carousel-track.is-static {
  width: 100% !important;
  justify-content: center !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

/* Card compacta y estilizada tipo Kick / Twitch del screenshot */
.news-carousel-slide {
  flex: 0 0 255px !important;
  width: 255px !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease;
}
@media (max-width: 600px) {
  .news-carousel-slide {
    flex: 0 0 210px !important;
    width: 210px !important;
  }
}
.news-carousel-slide:hover {
  transform: translateY(-4px);
}

/* Thumbnail */
.news-carousel-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
  overflow: hidden;
  background: #14100c;
  border: 1px solid rgba(229, 195, 127, 0.25);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.6);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.news-carousel-slide:hover .news-carousel-thumb-box {
  border-color: rgba(255, 178, 54, 0.85);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 178, 54, 0.22);
}
.news-carousel-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-carousel-slide:hover .news-carousel-thumb-img {
  transform: scale(1.06);
}

/* Badges sobre la miniatura (Idénticas al screenshot: ojo + lecturas arriba a la izquierda, duración/fecha abajo a la izquierda) */
.news-carousel-badge-views {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  background: rgba(10, 8, 6, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 6.5px;
  border-radius: 5px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.news-carousel-badge-views svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.news-carousel-badge-time {
  position: absolute;
  bottom: 7px;
  left: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  background: rgba(10, 8, 6, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.news-carousel-badge-tag {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
}

/* Fila de información inferior (Avatar + Título + Autor + 3 puntos) */
.news-carousel-info-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 8px;
  padding: 0 2px;
}
.news-carousel-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(229, 195, 127, 0.5);
  background: #14100c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.news-carousel-meta-col {
  flex: 1;
  min-width: 0;
}
.news-carousel-card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}
.news-carousel-slide:hover .news-carousel-card-title {
  color: var(--gold-2);
}
.news-carousel-author {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-carousel-author span:last-child {
  color: var(--gold-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.news-carousel-more-btn {
  color: rgba(255, 255, 255, 0.45);
  padding: 2px 4px;
  margin-top: -2px;
  transition: color 0.2s ease;
}
.news-carousel-slide:hover .news-carousel-more-btn {
  color: var(--gold-2);
}

/* --- Buscador, Filtros y Ordenación --- */
.news-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  background: rgba(16, 12, 9, 0.95);
  border: 1px solid rgba(255, 178, 54, 0.18);
  border-radius: 12px;
  padding: 8px 12px;
}
.news-search-box {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 260px;
}
.news-search-box svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--muted-dim);
  pointer-events: none;
}
.news-search-box input {
  width: 100%;
  padding: 6px 10px 6px 28px;
  border-radius: 7px;
  background: rgba(24, 18, 14, 0.92);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: border-color .2s ease;
}
.news-search-box input:focus {
  border-color: var(--gold-2);
}
.news-tags-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.news-tag-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.news-tag-pill:hover {
  color: #fff;
  border-color: rgba(255, 173, 47, .4);
}
.news-tag-pill.active {
  background: rgba(255, 173, 47, .16);
  border-color: var(--gold-2);
  color: var(--gold-2);
}

.news-sort-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.news-sort-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-dim);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.news-sort-select {
  background: rgba(24, 18, 14, 0.95);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
}
.news-sort-select:focus {
  border-color: var(--gold-2);
}

/* --- Cuadrícula y Tarjetas de Noticias (3 Noticias por Fila - Compact Magazine) --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.news-card {
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: rgba(18, 14, 11, 0.92);
  border: 1px solid rgba(255, 178, 54, 0.14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  padding: 9px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.news-card:hover {
  border-color: rgba(255, 178, 54, .55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 178, 54, 0.12);
  background: rgba(24, 18, 14, 0.98);
  transform: translateY(-2px);
}
.news-thumb {
  position: relative;
  width: 86px;
  height: 86px;
  min-width: 86px;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: #0d0a08;
  overflow: hidden;
  border: 1px solid rgba(255, 178, 54, 0.18);
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-card:hover .news-thumb img {
  transform: scale(1.06);
}
.news-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-dim);
}
.news-thumb-empty svg {
  width: 18px;
  height: 18px;
  opacity: .4;
}
.news-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.news-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tag-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 173, 47, .12);
  border: 1px solid var(--line);
  color: var(--gold-2);
  white-space: nowrap;
  font-weight: 700;
}
.tag-pill.tag-evento { background: rgba(255, 173, 47, 0.16); border-color: rgba(255, 173, 47, 0.4); color: #ffd36b; }
.tag-pill.tag-sorteos { background: rgba(83, 252, 24, 0.14); border-color: rgba(83, 252, 24, 0.35); color: #53fc18; }
.tag-pill.tag-radio { background: rgba(168, 85, 247, 0.16); border-color: rgba(168, 85, 247, 0.4); color: #c084fc; }
.tag-pill.tag-rust { background: rgba(6, 182, 212, 0.16); border-color: rgba(6, 182, 212, 0.4); color: #67e8f9; }
.tag-pill.tag-comunidad { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); color: #fde68a; }
.tag-pill.tag-tienda { background: rgba(249, 115, 22, 0.16); border-color: rgba(249, 115, 22, 0.4); color: #fed7aa; }

.news-date {
  font-size: 10px;
  color: var(--muted-dim);
  font-weight: 600;
}
.news-card h3 {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
  margin: 0;
}
.news-card:hover h3 {
  color: var(--gold-2);
}
.news-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-bottom {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold-2);
}
.news-more svg {
  width: 10px;
  height: 10px;
  transition: transform .15s ease;
}
.news-card:hover .news-more svg {
  transform: translateX(3px);
}
.news-xp-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: #ffd36b;
  background: rgba(255, 211, 107, 0.08);
  padding: 1.5px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 211, 107, 0.2);
}

@media (max-width: 1060px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .news-card { grid-template-columns: 76px 1fr; gap: 8px; padding: 7px; }
  .news-thumb { width: 76px; height: 76px; min-width: 76px; }
  .news-carousel-slide { flex: 0 0 250px; width: 250px; }
  .news-carousel-title { font-size: 13px; }
  .news-carousel-desc { font-size: 10px; }
  .news-filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .news-search-box { max-width: none; }
  .news-sort-wrapper { margin-left: 0; width: 100%; justify-content: space-between; }
}


/* Official Partners & Collaborators Grid */
/* ============================================================
   PARTNERS
   ============================================================ */
.partners-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.partner-card{padding:13px 15px;border-radius:4px;display:flex;flex-direction:column;gap:10px;}
.partner-top{display:flex;align-items:center;gap:10px;}
.partner-top img, .partner-top .ico{width:38px;height:38px;border-radius:4px;object-fit:cover;border:1px solid rgba(229,195,127,0.4);box-shadow:0 3px 10px rgba(0,0,0,0.5);}
.partner-top .ico{display:flex;align-items:center;justify-content:center;background:rgba(229,195,127,0.12);color:var(--gold-2);font-size:18px;}
.partner-top div h3{font-size:14.5px;text-transform:none;letter-spacing:0;font-weight:800;color:#ffffff;}
.partner-online{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--muted-dim);margin-top:2px;}
.partner-online .dot{width:5px;height:5px;border-radius:50%;background:var(--muted-dim);}
.partner-online.on{color:#53fc18;}
.partner-online.on .dot{background:#53fc18;box-shadow:0 0 0 3px rgba(83,252,24,.2);}
.partner-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.45;flex:1;}
.partner-links{display:flex;flex-wrap:wrap;gap:8px;}
.partner-links .btn{
  background:linear-gradient(145deg, #1d1712 0%, #130f0c 100%);
  border:1px solid rgba(229,195,127,0.35);
  color:#f3e5c8;
}
.partner-links .btn:hover{
  border-color:#fff0c3;
  color:#ffffff;
  box-shadow:0 4px 14px rgba(229,195,127,0.25);
}
@media (max-width:900px){.partners-grid{grid-template-columns:1fr;}}

/* ============================================================
   SECCIÓN: MIS RECOMENDADOS (CARRUSEL SLIDE COMPACTO)
   ============================================================ */
.recommended-carousel-slide {
  flex: 0 0 195px !important;
  width: 195px !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease;
}
@media (max-width: 600px) {
  .recommended-carousel-slide {
    flex: 0 0 160px !important;
    width: 160px !important;
  }
}
.recommended-carousel-slide:hover {
  transform: translateY(-3px);
}
.recommended-carousel-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #14100c;
  border: 1px solid rgba(229, 195, 127, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.recommended-carousel-slide:hover .recommended-carousel-thumb-box {
  border-color: rgba(255, 178, 54, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 178, 54, 0.22);
}
.recommended-carousel-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.recommended-carousel-slide:hover .recommended-carousel-thumb-img {
  transform: scale(1.06);
}
.recommended-carousel-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 5.5px;
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.88);
  border: 1px solid rgba(229, 195, 127, 0.6);
  color: var(--gold-2);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.recommended-carousel-ext-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(10, 8, 6, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.recommended-carousel-slide:hover .recommended-carousel-ext-icon {
  background: var(--gold-2);
  color: #120e0b;
  border-color: var(--gold-2);
}
.recommended-carousel-info-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 0 1px;
}
.recommended-carousel-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(229, 195, 127, 0.45);
  background: #14100c;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-2);
}
.recommended-carousel-meta-col {
  flex: 1;
  min-width: 0;
}
.recommended-carousel-card-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s ease;
}
.recommended-carousel-slide:hover .recommended-carousel-card-title {
  color: var(--gold-2);
}
.recommended-carousel-author {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recommended-carousel-pill-btn {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  color: var(--gold-2);
  background: rgba(255, 173, 47, 0.12);
  border: 1px solid rgba(255, 173, 47, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.recommended-carousel-slide:hover .recommended-carousel-pill-btn {
  background: var(--gold-2);
  color: #120e0b;
  border-color: var(--gold-2);
}

/* ============================================================
   BURBUJA DE VISTA PREVIA FLOTANTE (NOTICIAS & RECOMENDACIONES)
   ============================================================ */
.kano-preview-bubble {
  position: fixed;
  z-index: 9999999;
  width: 330px;
  max-width: calc(100vw - 28px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  will-change: transform, opacity;
}

/* Puente invisible seguro para que el cursor cruce entre la tarjeta y la burbuja sin cerrarla */
.kano-preview-bubble::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: auto;
}
.kano-preview-bubble.arrow-bottom::before {
  bottom: -20px;
}
.kano-preview-bubble.arrow-top::before {
  top: -20px;
}

@media (prefers-reduced-motion: reduce) {
  .kano-preview-bubble {
    transition: none !important;
  }
}

.kano-preview-bubble.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto; /* ¡Interactiva: puedes moverte dentro y hacer clic! */
}

.kano-preview-bubble-inner {
  background: rgba(14, 16, 22, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(235, 155, 39, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(235, 155, 39, 0.18);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.kano-preview-bubble-inner:hover {
  border-color: rgba(235, 155, 39, 0.85);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(235, 155, 39, 0.32);
  transform: translateY(-2px);
}

.kano-preview-bubble-inner:active {
  transform: scale(0.99);
}

.kano-preview-bubble-media {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #090b0e;
}

.kano-preview-bubble-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.kano-preview-bubble-inner:hover .kano-preview-bubble-img {
  transform: scale(1.05);
}

.kano-preview-bubble-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 16, 22, 0.96) 100%);
  pointer-events: none;
}

.kano-preview-bubble-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(235, 155, 39, 0.65);
  color: #eb9b27;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.kano-preview-bubble-overlay-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
  z-index: 2;
}

.kano-preview-bubble-inner:hover .kano-preview-bubble-overlay-hint {
  opacity: 1;
  border-color: rgba(235, 155, 39, 0.7);
  color: #eb9b27;
}

.kano-preview-bubble-content {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kano-preview-bubble-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: color 0.2s;
}

.kano-preview-bubble-inner:hover .kano-preview-bubble-title {
  color: #ffd073;
}

.kano-preview-bubble-desc {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kano-preview-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  font-size: 11px;
  font-family: var(--font-body);
}

.kano-preview-bubble-meta {
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58%;
}

.kano-preview-bubble-action-btn {
  color: #120e0b;
  background: var(--gold-2, #eb9b27);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(235, 155, 39, 0.35);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}

.kano-preview-bubble-inner:hover .kano-preview-bubble-action-btn {
  background: #ffb84d;
  transform: translateX(2px);
  box-shadow: 0 3px 12px rgba(235, 155, 39, 0.5);
}

/* Flechita / Arrow orientada */
.kano-preview-bubble-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(14, 16, 22, 0.95);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 10;
  left: var(--bubble-arrow-left, 50%);
  margin-left: -6px;
}

.kano-preview-bubble.arrow-bottom .kano-preview-bubble-arrow {
  bottom: -6px;
  border-right: 1.5px solid rgba(235, 155, 39, 0.45);
  border-bottom: 1.5px solid rgba(235, 155, 39, 0.45);
}

.kano-preview-bubble.arrow-top .kano-preview-bubble-arrow {
  top: -6px;
  border-left: 1.5px solid rgba(235, 155, 39, 0.45);
  border-top: 1.5px solid rgba(235, 155, 39, 0.45);
}


/* Community Clips Layout */
/* ============================================================
   CLIPS
   ============================================================ */
/* ============================================================
   REPRODUCTOR DIRECTO DE LA SECCIÓN CLIPS (INLINE MINICARDS)
   ============================================================ */
.clip-section-player-wrap {
  display: none !important;
}

/* ============================================================
   CLIPS EN FORMATO EXACTO CUADRADO CON REPRODUCCIÓN EN LA WEB
   ============================================================ */
.clips-grid-5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.clip-card-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(220px, 88vw);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(229, 195, 127, 0.35);
  background: linear-gradient(160deg, #18130e 0%, #0c0906 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 245, 215, 0.15);
  cursor: pointer;
  transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 10px;
  box-sizing: border-box;
}

.clip-card-mini:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 195, 127, 0.7);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85), 0 0 20px rgba(229, 195, 127, 0.25);
}

.clip-card-mini .clip-mini-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}

.clip-card-mini:hover .clip-mini-thumb {
  transform: scale(1.04);
  opacity: 0.95;
}

/* Vídeo nativo HTML5 integrado directamente en la tarjeta cuadrada */
.clip-card-mini .clip-mini-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  border: none;
  border-radius: 10px;
  z-index: 1;
  display: block;
}

.clip-card-mini.is-playing .clip-mini-thumb,
.clip-card-mini.is-playing .clip-mini-play {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

.clip-card-mini.is-playing {
  border-color: var(--gold-2);
  box-shadow: 0 0 24px rgba(229, 195, 127, 0.6), 0 12px 36px rgba(0, 0, 0, 0.95);
}

/* Etiqueta de plataforma (TikTok, Kick, etc.) arriba a la izquierda */
.clip-card-mini .clip-mini-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(12, 9, 6, 0.9);
  border: 1px solid rgba(229, 195, 127, 0.4);
  color: #ffe082;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  text-decoration: none;
  transition: all 0.2s ease;
}

.clip-card-mini .clip-mini-tag:hover {
  transform: scale(1.08);
  border-color: #25f4ee;
  color: #fff;
  box-shadow: 0 0 10px rgba(37, 244, 238, 0.6);
}

.clip-card-mini .clip-mini-tag.tiktok {
  color: #25f4ee;
  border-color: rgba(37, 244, 238, 0.55);
}
.clip-card-mini .clip-mini-tag.kick {
  color: var(--kick);
  border-color: rgba(83, 252, 24, 0.45);
}
.clip-card-mini .clip-mini-tag.twitch {
  color: #c084fc;
  border-color: rgba(145, 70, 255, 0.45);
}

/* Botón de reproducción dorado circular en el centro */
.clip-card-mini .clip-mini-play {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5c37f 0%, #c49a45 100%);
  color: #110d07;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(229,195,127,0.6), 0 3px 10px rgba(0,0,0,0.6);
  z-index: 3;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  pointer-events: none;
}

.clip-card-mini:hover .clip-mini-play {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 24px rgba(229,195,127,0.95), 0 4px 14px rgba(0,0,0,0.7);
}

.clip-card-mini .clip-mini-play svg {
  width: 15px;
  height: 15px;
  margin-left: 2px;
}

/* Recuadro oscuro con Título y Resumen abajo */
.clip-card-mini .clip-mini-body {
  position: relative;
  z-index: 3;
  background: linear-gradient(0deg, rgba(8,6,4,0.96) 0%, rgba(14,10,7,0.88) 75%, transparent 100%);
  padding: 8px 9px;
  border-radius: 6px;
  width: 100%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(229,195,127,0.18);
  box-sizing: border-box;
}

.clip-card-mini .clip-mini-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
}

.clip-card-mini:hover .clip-mini-title {
  color: var(--gold-2);
}

.clip-card-mini .clip-mini-desc {
  font-size: 9.5px;
  color: #cbd5e1;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive Grid */
@media(max-width:1100px){
  .clips-grid-5{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
  }
}
@media(max-width:850px){
  .clips-grid-5{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
}
@media(max-width:580px){
  .clips-grid-5{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .clip-card-mini{
    min-height:160px;
    padding:6px;
  }
  .clip-card-mini .clip-mini-title{
    font-size:11px;
  }
  .clip-card-mini .clip-mini-desc{
    font-size:9px;
  }
}

/* Legacy Fallback Classes */
.clips-layout{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px;align-items:start;}
.clip-feature{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:1 / 1;min-height:360px;max-width:480px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;border:1px solid rgba(229,195,127,0.32);background:linear-gradient(160deg, #18130e 0%, #0d0a07 100%);box-shadow:0 16px 40px rgba(0,0,0,0.8);cursor:pointer;}
.clip-feature img, #clipFeatureImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.65;}
.clip-feature .content{position:relative;z-index:2;background:linear-gradient(0deg, rgba(10,7,5,0.96) 0%, rgba(14,10,7,0.9) 75%, transparent 100%);padding:14px 16px;border-radius:8px;}
.clip-feature-desc{font-size:12.5px;color:#cbd5e1;line-height:1.45;margin:4px 0 0;}
.clip-list{display:flex;flex-direction:column;gap:12px;}
.clip-item{
  padding:12px 16px;
  border-radius:4px;
  display:flex;
  gap:16px;
  align-items:center;
  transition:.18s ease;
  cursor:pointer;
  background:rgba(18, 14, 11, 0.90);
  border:1px solid var(--line);
}
.clip-item:hover{
  border-color:rgba(255,173,47,.45);
  transform:translateX(4px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  background:rgba(22, 17, 13, 0.95);
}
.merch-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 16px 28px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(20, 16, 13, 0.92), rgba(28, 22, 17, 0.92)) !important;
  border: 1px solid rgba(229, 195, 127, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255, 235, 185, 0.15) !important;
  font-size: 13px;
  font-weight: 700;
  color: #e5c37f;
  text-align: center;
}
.merch-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.clip-item .clip-thumb{
  width:110px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  flex:none;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);
  position:relative;
}
.clip-item .clip-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.clip-item:hover .clip-thumb img{transform:scale(1.05);}
.clip-item-play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  color:#fff;
  opacity:0;
  transition:opacity .15s ease;
}
.clip-item:hover .clip-item-play-overlay{opacity:1;}
.clip-item .clip-info{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;}
.clip-item h3{font-size:15.5px;text-transform:none;letter-spacing:0;font-weight:800;margin:0;}
@media (max-width:900px){.clips-layout{grid-template-columns:1fr;} .clip-feature{aspect-ratio:1 / 1; min-height:300px; max-width:440px; margin:0 auto;}}
@media (max-width:540px){.clip-item{flex-direction:column;align-items:flex-start;} .clip-item .clip-thumb{width:100%;height:130px;}}


/* Servidores Section */
/* ============================================================
   SERVIDORES
   ============================================================ */
.servers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.server-card{
  padding:26px;
  border-radius:20px !important;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:linear-gradient(145deg, #14110d 0%, #1c1612 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.35) !important;
  box-shadow:0 14px 40px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255, 235, 185, 0.18) !important;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.server-card:hover{
  border-color:#e5c37f !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.85), 0 0 24px rgba(229, 195, 127, 0.20) !important;
  transform:translateY(-3px) !important;
}
.server-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.server-card h3{font-size:17.5px;text-transform:none;letter-spacing:-.01em;font-weight:800;margin:0;color:#ffffff !important;}
.server-card p{margin:0;color:#94a3b8 !important;font-size:13.5px;line-height:1.6;flex:1;}
.server-connect-box{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.server-ip-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 16px;
  border-radius:12px;
  background:rgba(10, 8, 6, 0.85) !important;
  border:1px dashed rgba(229, 195, 127, 0.45) !important;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:#e5c37f !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.server-actions-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
@media (max-width:900px){.servers-grid{grid-template-columns:1fr;}}


/* Tuesday Kick Radio Broadcast Section & Countdown */
/* ============================================================
   PROGRAMA DE RADIO EN KICK (MARTES 18:00H)
   ============================================================ */
.radio-layout{
  max-width:920px;
  margin:0 auto;
}
.radio-card{
  padding:22px 26px !important;
  border-radius:24px !important;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  overflow:hidden;
}
.radio-watermark-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.radio-card:hover .radio-watermark-bg {
  opacity: 0.26;
  transform: scale(1.04);
}
.radio-watermark-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  border-radius: inherit;
  filter: drop-shadow(0 0 30px rgba(229, 195, 127, 0.5));
}
.radio-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:12px;
  border-bottom:1px solid rgba(229, 195, 127, 0.18);
}
.radio-live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  background:rgba(229, 195, 127, 0.12);
  border:1px solid rgba(229, 195, 127, 0.4);
  color:#e5c37f;
}
.radio-live-pill.is-live-show{
  background:linear-gradient(135deg, rgba(75,255,138,.28), rgba(22,17,13,.95));
  border-color:rgba(75,255,138,.5);
  color:var(--kick);
  box-shadow:0 0 24px rgba(75,255,138,.35);
  animation:pulse 1.5s infinite;
}
.radio-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(229, 195, 127, 0.3);
}


/* Indicador ON AIR */
.turntable-status-light{
  position:absolute;
  bottom:4px;
  left:8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:8px;
  background:rgba(0,0,0,0.9);
  border:1px solid rgba(229,195,127,0.4);
  z-index:12;
}
.status-light-pulse{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#75ff8a;
  box-shadow:0 0 10px #75ff8a;
  animation:pulse 1.4s infinite;
}
.status-light-text{
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:800;
  color:#e5c37f;
  letter-spacing:.06em;
}
.radio-card-info h3{
  margin:0 0 8px;
  font-size:23px;
  font-weight:800;
  color:#fff;
  letter-spacing:-.01em;
  text-transform:none;
  background:linear-gradient(135deg, #ffffff 0%, #f7e3af 60%, #e5c37f 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.radio-card-info p{
  margin:0 0 18px;
  color:#cbd5e1;
  font-size:14.5px;
  line-height:1.65;
}
.radio-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* Callout Banner VIP de Peticiones en Discord (Oro Champán Metalizado) */
.radio-suggestions-box{
  background:linear-gradient(145deg, #14110d 0%, #1c1612 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.45) !important;
  border-radius:20px !important;
  padding:24px 30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  margin-top:24px !important;
  box-shadow:0 14px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255, 235, 185, 0.25) !important;
  position:relative;
  overflow:hidden;
}
.radio-suggestions-box::after{
  content:"";
  position:absolute;
  bottom:-40px;
  right:-40px;
  width:140px;
  height:140px;
  background:radial-gradient(circle, rgba(229, 195, 127, 0.18) 0%, transparent 70%);
  pointer-events:none;
}
.radio-suggestions-head strong{
  font-size:14px;
  color:var(--gold-2);
  display:block;
  margin-bottom:3px;
}
.radio-suggestions-head span{
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:14px;
}
.radio-form-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.radio-form-row input{
  flex:1;
  min-width:180px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft);
  color:var(--text);
  font-size:13px;
  outline:none;
  transition:border-color .2s ease;
}
.radio-form-row input:focus{
  border-color:var(--gold-2);
}
.radio-suggestion-alert{
  margin-top:12px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(75,255,138,.12);
  border:1px solid rgba(75,255,138,.35);
  color:var(--kick);
  font-size:12.5px;
  font-weight:600;
}

.radio-song-box{
  margin-top:14px;
  padding:16px 20px;
  border-radius:4px;
  background:linear-gradient(145deg, rgba(20, 16, 12, 0.95) 0%, rgba(12, 9, 6, 0.98) 100%);
  border:1px solid rgba(229, 195, 127, 0.32);
  box-shadow:inset 0 1px 0 rgba(255, 240, 195, 0.15), 0 8px 24px rgba(0,0,0,0.5);
  position:relative;
  z-index:2;
}
.radio-song-box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.radio-song-box-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:800;
  color:#fff;
}
.radio-song-box-sender{
  font-size:11.5px;
  color:#94a3b8;
  display:flex;
  align-items:center;
  gap:6px;
}
.radio-song-form{
  display:flex;
  gap:10px;
  align-items:center;
}
.radio-song-input{
  flex:1;
  min-width:220px;
  padding:10px 16px;
  border-radius:3px;
  background:rgba(0, 0, 0, 0.65);
  border:1px solid rgba(229, 195, 127, 0.28);
  color:#fff;
  font-size:13px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.radio-song-input:focus{
  border-color:var(--gold-2);
  box-shadow:0 0 12px rgba(229, 195, 127, 0.25);
}
.radio-song-btn{
  padding:10px 20px;
  border-radius:3px;
  font-weight:800;
  font-size:12.5px;
  white-space:nowrap;
  cursor:pointer;
}

@media(max-width:720px){
  .radio-card-body{grid-template-columns:1fr; text-align:center;}
  .radio-vinyl-wrap{margin:0 auto;}
  .radio-actions{justify-content:center;}
  .radio-form-row{flex-direction:column;}
  .radio-form-row input, .radio-form-row button{width:100%;}
}


/* Tienda Oficial & Coming Soon Banner */
/* ============================================================
   TIENDA / DONACIONES / SORTEO
   ============================================================ */

/* --- Sistema de E-Commerce & Merchandising (CRO) --- */
/* --- Sistema de E-Commerce & Merchandising - Champagne Gold Brushed Metal --- */
.merch-promo-banner{
  margin-bottom:28px;
  padding:20px 26px;
  border-radius:18px;
  background:linear-gradient(145deg, #14110d 0%, #1c1612 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.45) !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  box-shadow:0 12px 36px rgba(0,0,0,.7), inset 0 1px 0 rgba(255, 235, 185, 0.25) !important;
}
.merch-promo-left{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1;
  min-width:0;
}
.merch-promo-tag{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:800;
  padding:6px 14px;
  border-radius:8px;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  color:#0c0903;
  border:1px solid rgba(255, 240, 195, 0.9);
  letter-spacing:.06em;
  white-space:nowrap;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(229, 195, 127, 0.3);
}
.merch-promo-text h4{
  margin:0 0 3px;
  font-size:15.5px;
  font-weight:800;
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:-.01em;
  color:#f8fafc;
}
.merch-promo-text p{
  margin:0;
  font-size:13px;
  color:#94a3b8;
  line-height:1.45;
}
.merch-promo-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.merch-promo-code{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:800;
  padding:9px 16px;
  border-radius:12px;
  background:rgba(10, 12, 18, 0.85);
  border:1px dashed rgba(229, 195, 127, 0.55);
  color:#e5c37f;
  letter-spacing:.08em;
  user-select:all;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.merch-promo-btn{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:800;
  padding:10px 18px;
  border-radius:12px;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  border:1px solid rgba(255, 240, 195, 0.9);
  color:#0c0903;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 18px rgba(229, 195, 127, 0.35);
}
.merch-promo-btn:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 24px rgba(229, 195, 127, 0.50);
  filter:brightness(1.06);
}

/* Filtros de categorías */
.bestsellers-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.bestsellers-head h3{font-size:15px;letter-spacing:.02em;text-transform:none;font-family:var(--font-body);font-weight:800;color:var(--text);}
.bestsellers-head span{font-size:12.5px;color:var(--muted-dim);font-weight:600;}

/* Filtros de categorías - Ultra-Lujo Champagne Gold */
.merch-filters-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.merch-filter-pill{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(229, 195, 127, 0.25);
  color:#cbd5e1;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.merch-filter-pill:hover{
  border-color:#e5c37f;
  color:#fff;
  background:rgba(229, 195, 127, 0.14);
}
.merch-filter-pill.active{
  border-color:rgba(255, 240, 195, 0.9);
  color:#0c0903;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 20px rgba(229, 195, 127, 0.38);
}

/* Tarjetas de Producto - Obsidiana Cálida & Champagne Gold */
.bestseller-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.bestseller-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg, #14110d 0%, #1c1612 100%) !important;
  border:1px solid rgba(229, 195, 127, 0.35) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.75), inset 0 1px 0 rgba(255, 235, 185, 0.2) !important;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
  text-decoration:none;
  color:inherit;
}
.bestseller-card:hover{
  border-color:#e5c37f !important;
  box-shadow:0 20px 60px rgba(0,0,0,.85), 0 0 24px rgba(229, 195, 127, 0.25) !important;
  transform:translateY(-4px) !important;
}
.bestseller-media{
  position:relative;
  aspect-ratio:1/1;
  background:#0d0a07 !important;
  overflow:hidden;
  border-bottom:1px solid rgba(229, 195, 127, 0.2) !important;
}
.bestseller-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.bestseller-card:hover .bestseller-media img{
  transform:scale(1.05);
}
.bestseller-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:8px;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  color:#0c0903;
  border:1px solid rgba(255, 240, 195, 0.9);
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
  backdrop-filter:blur(6px);
}
.badge-bestseller{
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  color:#0c0903;
  border-color:rgba(255, 240, 195, 0.9);
  box-shadow:0 4px 14px rgba(229, 195, 127, 0.35);
}
.badge-limited{
  background:linear-gradient(135deg, rgba(255,75,75,.95), rgba(195,30,30,.95));
  color:#fff;
  border-color:rgba(255,120,120,.45);
  box-shadow:0 2px 10px rgba(255,75,75,.3);
}
.badge-new{
  background:linear-gradient(135deg, rgba(75,255,138,.95), rgba(20,180,75,.95));
  color:#052610;
  border-color:rgba(140,255,180,.45);
  box-shadow:0 2px 10px rgba(75,255,138,.3);
}
.badge-favorite{
  background:linear-gradient(135deg, rgba(169,112,255,.95), rgba(125,60,220,.95));
  color:#fff;
  border-color:rgba(200,160,255,.45);
  box-shadow:0 2px 10px rgba(169,112,255,.3);
}

.bestseller-quick-view-btn{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  opacity:0;
  pointer-events:none;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  padding:8px 16px;
  border-radius:10px;
  background:rgba(10, 12, 18, 0.92);
  border:1px solid #e5c37f;
  color:#e5c37f;
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease, background .2s ease, color .2s ease;
  z-index:3;
  white-space:nowrap;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
}
.bestseller-card:hover .bestseller-quick-view-btn{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.bestseller-quick-view-btn:hover{
  background:#e5c37f;
  color:#0c0903;
}

.bestseller-body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.bestseller-body h4{
  font-size:15px;
  font-weight:800;
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1.3;
  margin:0;
  color:#f8fafc;
}
.bestseller-vendor{font-size:12px;color:#94a3b8;font-weight:600;}
.bestseller-price{margin-top:6px;font-size:17px;font-weight:800;font-family:var(--font-mono);color:#e5c37f;}
.bestseller-price-note{font-size:11.5px;color:#94a3b8;font-weight:600;}
.bestseller-details{margin-top:auto;padding-top:6px;font-size:11px;color:#64748b;font-weight:600;}

.bestseller-card-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:14px !important;
  width:100% !important;
}
.bestseller-buy-now-btn{
  flex:1 !important;
  width:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:13px !important;
  font-family:var(--font-body) !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.02em !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 6px 20px rgba(229, 195, 127, 0.38) !important;
  cursor:pointer !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.bestseller-buy-now-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 28px rgba(229, 195, 127, 0.55) !important;
  filter:brightness(1.06) !important;
}
.bestseller-buy-now-btn svg{
  width:14px !important;
  height:14px !important;
  transition:transform .18s ease !important;
  color:#0c0903 !important;
  fill:currentColor !important;
}
.bestseller-buy-now-btn:hover svg{
  transform:translateX(3px) !important;
}
.bestseller-qv-btn-small{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:0 16px !important;
  border-radius:13px !important;
  font-family:var(--font-body) !important;
  font-size:13.5px !important;
  font-weight:800 !important;
  letter-spacing:.02em !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 6px 20px rgba(229, 195, 127, 0.38) !important;
  cursor:pointer !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.bestseller-qv-btn-small:hover{
  transform:translateY(-2px) !important;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 28px rgba(229, 195, 127, 0.55) !important;
  filter:brightness(1.06) !important;
}

#quickViewBuyBtn{
  color:#0a0703 !important;
  background:linear-gradient(135deg, #ffea9f 0%, #ffc266 35%, #ffad2f 70%, #d98200 100%) !important;
  border:1px solid rgba(255, 235, 170, 0.8) !important;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px rgba(255, 173, 47, 0.40) !important;
  font-weight:800 !important;
  font-size:14.5px !important;
  min-height:46px !important;
  border-radius:14px !important;
}
#quickViewBuyBtn:hover{
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 12px 32px rgba(255, 173, 47, 0.60) !important;
  filter:brightness(1.06) !important;
}

/* Barra de Garantías Tienda Oficial */
.merch-guarantees-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:32px;
}
.merch-guarantee-card{
  padding:18px 20px;
  border-radius:var(--radius-md);
  background:rgba(18,14,11,.75);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:16px;
}
.merch-guarantee-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(255,173,47,.1);
  border:1px solid rgba(255,173,47,.25);
  color:var(--gold-2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.merch-guarantee-icon svg{width:20px;height:20px;}
.merch-guarantee-text h4{
  margin:0 0 3px;
  font-size:13.5px;
  font-weight:800;
  font-family:var(--font-body);
  text-transform:none;
  letter-spacing:0;
  color:#fff;
}
.merch-guarantee-text p{
  margin:0;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}


/* ============================================================
   RESPONSIVE SECTION OVERRIDES (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero{
    padding:68px 0 20px !important;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .hero-copy h1{
    font-size:clamp(28px, 7.5vw, 40px) !important;
    line-height:1.05 !important;
    margin-bottom:10px !important;
  }
  .hero-sub{
    font-size:13.5px !important;
    line-height:1.5 !important;
    margin-bottom:14px !important;
  }
  .hero-actions{
    flex-direction:column !important;
    width:100% !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }
  .hero-actions .btn{
    width:100% !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }
  .hero-actions .btn.btn-community-hub{
    min-height:56px !important;
    padding:10px 14px !important;
    border-radius:16px !important;
    gap:10px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }
  .hero-notice{
    font-size:11.5px !important;
    padding:8px 12px !important;
    width:100% !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .hero-mini-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .hero-mini-card{
    padding:16px 14px !important;
    border-radius:16px !important;
  }

  /* HUD Card en Móvil */
  .hud{
    padding:18px 14px !important;
    border-radius:18px !important;
    gap:14px !important;
  }
  .hud-channel-card{
    padding:10px 12px !important;
    border-radius:12px !important;
  }
  .hud-channel-action{
    padding:5px 9px !important;
    font-size:10.5px !important;
  }
  .hud-countdown{
    padding:14px 12px 12px !important;
    border-radius:14px !important;
  }
  .cd-nums{
    gap:6px !important;
    margin:6px 0 10px !important;
  }
  .cd-box{
    max-width:68px !important;
    padding:7px 4px 5px !important;
    border-radius:10px !important;
  }
  .cd-box strong{
    font-size:24px !important;
  }
  .cd-box span{
    font-size:8px !important;
  }
  .hud-mini-row{
    padding:8px 10px !important;
    font-size:12px !important;
  }
  .hud-mini-row .d{
    font-size:12.5px !important;
    min-width:58px !important;
  }
  .hud-mini-row .t{
    font-size:12px !important;
    margin:0 4px !important;
  }
  .hud-mini-row .h{
    font-size:10px !important;
    padding:2px 6px !important;
  }

  /* Horario */
  .horario-layout{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .horario-art{
    min-height:180px !important;
    max-height:220px !important;
  }

  /* Clips */
  .clips-layout{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .clip-feature{
    aspect-ratio:1 / 1 !important;
    min-height:280px !important;
    max-width:380px !important;
    margin:0 auto !important;
    padding:14px !important;
  }
  .clip-item{
    flex-direction:row !important;
    align-items:center !important;
    padding:10px 12px !important;
    gap:12px !important;
  }
  .clip-item .clip-thumb{
    width:84px !important;
    height:56px !important;
    flex-shrink:0 !important;
  }
  .clip-item h3{
    font-size:13.5px !important;
  }
  .clip-item p{
    font-size:11.5px !important;
  }

  /* Servidores Rust */
  .servers-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .server-ip-pill{
    font-size:11.5px !important;
    padding:8px 10px !important;
    word-break:break-all !important;
    width:100% !important;
  }

  /* Radio Show */
  .radio-card-body{
    grid-template-columns:1fr !important;
    gap:18px !important;
    text-align:center !important;
  }
  .radio-card-top{
    flex-direction:column !important;
    align-items:center !important;
    gap:10px !important;
    text-align:center !important;
  }
  .radio-turntable-deck{
    width:130px !important;
    height:130px !important;
  }
  .radio-vinyl-disc{
    width:108px !important;
    height:108px !important;
  }
  .radio-actions{
    justify-content:center !important;
    width:100% !important;
    gap:8px !important;
  }
  .radio-actions .btn{
    flex:1 1 calc(50% - 6px) !important;
    justify-content:center !important;
    min-width:130px !important;
  }
  .radio-song-box{
    padding:12px !important;
  }
  .radio-song-box form{
    flex-direction:column !important;
    gap:8px !important;
  }
  .radio-song-box input{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .radio-song-box button{
    width:100% !important;
    min-height:40px !important;
  }
  .radio-countdown-centered-card{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:4px !important;
    padding:4px 8px !important;
    width:100% !important;
  }
  .radio-contact-ticker-bar{
    height:26px !important;
    margin:4px 0 5px 0 !important;
  }
  .radio-contact-ticker-bar .ticker-item{
    font-size:8.5px !important;
    padding-right:24px !important;
  }

  /* Partners & Comunidad */
  .partners-grid, .grid-cards{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  /* Tienda Oficial & Promo Banner */
  .bestseller-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .merch-promo-banner{
    flex-direction:column !important;
    align-items:stretch !important;
    padding:18px 16px !important;
    gap:14px !important;
  }
  .merch-promo-right{
    width:100% !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .merch-promo-code{
    width:100% !important;
    text-align:center !important;
  }
  .merch-promo-btn{
    width:100% !important;
    justify-content:center !important;
    min-height:42px !important;
  }
  .merch-filters-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    flex-wrap:nowrap !important;
    padding-bottom:6px !important;
  }
  .merch-filter-pill{
    white-space:nowrap !important;
    flex-shrink:0 !important;
  }

  /* Noticias */
  .news-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .news-filter-bar{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .news-search-box{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .news-tags-filter{
    display:flex !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:6px !important;
    flex-wrap:nowrap !important;
  }
  .news-tag-pill{
    white-space:nowrap !important;
    flex-shrink:0 !important;
  }

  /* Footer Responsive Breakpoint */
  .footer-clean-panel {
    padding: 20px 16px 16px 16px !important;
    gap: 14px !important;
  }
  .footer-main-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .footer-action-pills {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .footer-info-pill {
    justify-content: flex-start !important;
  }
  .footer-nav-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .footer-back-top-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
   SECCIÓN FOOTER PROFESIONAL — LIMPIO, ESENCIAL & TOP 1 MUNDIAL
   ============================================================ */
.footer-clean-panel {
  width: 100%;
  box-sizing: border-box;
  padding: 24px 28px 20px 28px !important;
  border-radius: 16px !important;
  background: linear-gradient(165deg, rgba(20, 15, 11, 0.98) 0%, rgba(10, 8, 6, 0.99) 100%) !important;
  border: 1px solid rgba(229, 195, 127, 0.22) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 235, 185, 0.12) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Resplandor sutil superior */
.footer-clean-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 195, 127, 0.5), transparent);
  pointer-events: none;
}

/* Fila 1: Identidad & Acciones Rápidas */
.footer-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 260px;
}
.footer-logo-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.2px solid rgba(229, 195, 127, 0.4);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 12px rgba(229, 195, 127, 0.2);
  overflow: hidden;
  flex-shrink: 0;
  background: #0d0905;
}
.footer-brand-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.footer-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ffffff 0%, #fae6be 60%, #e5c37f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-official-badge {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  padding: 1.5px 6px;
  border-radius: 3px;
  background: rgba(229, 195, 127, 0.14);
  border: 1px solid rgba(229, 195, 127, 0.35);
  color: var(--gold-2);
  text-transform: uppercase;
}
.footer-ssl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 1.5px 6px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  text-transform: uppercase;
}
.footer-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.35;
}

/* Píldoras de acción a la derecha */
.footer-action-pills {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(28, 22, 17, 0.9), rgba(16, 12, 9, 0.96));
  border: 1px solid rgba(229, 195, 127, 0.22);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  text-decoration: none;
  font-size: 11.5px;
  color: #f1f5f9;
  transition: all .2s ease;
}
.footer-info-pill:hover {
  border-color: var(--gold-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(229, 195, 127, 0.15);
}
.live-users-pill strong {
  color: #53fc18;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .02em;
}
.live-users-pill {
  cursor: default;
}
.mail-pill svg {
  color: var(--gold-2);
}
.mail-pill:hover svg {
  color: #fff;
}
.pill-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #53fc18;
  box-shadow: 0 0 8px #53fc18;
  animation: pulseLiveDot 1.6s infinite ease-in-out;
  flex-shrink: 0;
}
@keyframes pulseLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

/* Divisor Fino */
.footer-hairline {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(229,195,127,0) 0%, rgba(229,195,127,0.22) 15%, rgba(229,195,127,0.22) 85%, rgba(229,195,127,0) 100%);
  margin: 0;
}

/* Fila 2: Legal & Subir arriba */
.footer-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-legal {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.footer-legal-tag {
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .08em;
  color: var(--gold-2);
  text-transform: uppercase;
  margin-right: 2px;
}
.footer-legal button.legal-doc-trigger {
  background: none !important;
  border: none !important;
  padding: 3px 6px !important;
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: all .16s ease !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
.footer-legal button.legal-doc-trigger:hover {
  color: #fff !important;
  background: rgba(229, 195, 127, 0.08) !important;
  transform: translateY(-1px) !important;
}
.footer-dot-sep {
  color: rgba(229, 195, 127, 0.35);
  font-size: 10px;
  user-select: none;
}

/* Botón Subir Arriba */
.footer-back-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, rgba(30, 24, 18, 0.9), rgba(18, 14, 10, 0.95));
  border: 1px solid rgba(229, 195, 127, 0.28);
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.footer-back-top-btn:hover {
  background: linear-gradient(145deg, rgba(45, 34, 25, 0.95), rgba(28, 20, 14, 0.98));
  border-color: var(--gold-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(229, 195, 127, 0.2);
}

/* Fila 3: Legal Disclaimers */
.footer-bottom-row {
  width: 100%;
}
.footer-legal-disclaimer {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
.footer-legal-disclaimer strong {
  color: #cbd5e1;
  font-weight: 600;
}

/* ============================================================
   SECCIÓN: TIENDA OFICIAL (GRUPOS Y CARRUSEL SLIDE COMPACTO)
   ============================================================ */
.shop-groups-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 30px;
  flex-wrap: wrap;
  max-width: 680px;
}
.shop-group-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(18, 13, 9, 0.75);
  border: 1px solid rgba(229, 195, 127, 0.25);
  color: #c7baa7;
  font-family: var(--font-display, inherit);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  user-select: none;
}
.shop-group-tab:hover {
  background: rgba(229, 195, 127, 0.14);
  border-color: rgba(229, 195, 127, 0.55);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px rgba(229, 195, 127, 0.25);
}
.shop-group-tab.active {
  background: linear-gradient(135deg, rgba(229, 195, 127, 0.28) 0%, rgba(184, 144, 71, 0.38) 100%);
  border-color: var(--gold-2, #e5c37f);
  color: #f7e3af;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), 0 0 16px rgba(229, 195, 127, 0.35);
}
.shop-group-tab-icon {
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}
.shop-group-tab-label {
  letter-spacing: 0.02em;
}
.shop-group-tab-count {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(229, 195, 127, 0.3);
  color: var(--gold-2, #e5c37f);
}
.shop-group-tab.active .shop-group-tab-count {
  background: var(--gold-2, #e5c37f);
  color: #120d09;
  border-color: var(--gold-2, #e5c37f);
}

.shop-group-block {
  margin-bottom: 36px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.shop-group-block:last-child {
  margin-bottom: 0;
}
.shop-group-block.is-hidden {
  display: none !important;
}

.shop-group-subhead-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-left: 14px;
  flex: 1;
  min-width: 0;
}
.shop-group-subhead-title {
  font-family: var(--font-display, inherit);
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.shop-group-subhead-desc {
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .shop-group-subhead-desc {
    display: none;
  }
}

.shop-carousel-slide {
  flex: 0 0 155px !important;
  width: 155px !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  position: relative;
}
@media (max-width: 600px) {
  .shop-carousel-slide {
    flex: 0 0 130px !important;
    width: 130px !important;
  }
}
.shop-carousel-slide:hover {
  transform: translateY(-4px);
}
.shop-carousel-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #241c15 0%, #110d0a 100%);
  border: 1px solid rgba(229, 195, 127, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-carousel-slide:hover .shop-carousel-thumb-box {
  border-color: rgba(229, 195, 127, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(229, 195, 127, 0.25);
}
.shop-carousel-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.shop-carousel-slide:hover .shop-carousel-thumb-img {
  transform: scale(1.06);
}
.shop-carousel-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(10, 8, 6, 0.9);
  border: 1px solid rgba(229, 195, 127, 0.7);
  color: var(--gold-2);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
}
.shop-carousel-discount-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 850;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
  border: 1px solid rgba(254, 202, 202, 0.4);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.shop-carousel-quick-view-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.shop-carousel-slide:hover .shop-carousel-quick-view-overlay {
  opacity: 1;
}
.shop-carousel-quick-btn {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #120e0b;
  background: var(--gold-2);
  padding: 4px 10px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transform: translateY(6px);
  transition: transform 0.25s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-carousel-slide:hover .shop-carousel-quick-btn {
  transform: translateY(0);
}
.shop-carousel-info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 0 2px;
}
.shop-carousel-category {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.shop-carousel-card-title {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s ease;
}
.shop-carousel-slide:hover .shop-carousel-card-title {
  color: var(--gold-2);
}
.shop-carousel-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}
.shop-carousel-price-box {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.shop-carousel-current-price {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 850;
  color: var(--gold-2);
}
.shop-carousel-old-price {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #64748b;
  text-decoration: line-through;
}
.shop-carousel-action-chip {
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
  background: rgba(229, 195, 127, 0.12);
  border: 1px solid rgba(229, 195, 127, 0.35);
  padding: 2px 7px;
  border-radius: 3px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.shop-carousel-slide:hover .shop-carousel-action-chip {
  background: var(--gold-2);
  color: #120e0b;
  border-color: var(--gold-2);
}

/* ============================================================
   BANNER DE PROMOCIÓN COMPACTO (ULTRA-SLIM & ESTRECHO)
   ============================================================ */
.tienda-promo-banner {
  max-width: 500px;
  width: fit-content;
  margin: 0 auto 18px auto;
  padding: 5px 10px 5px 7px;
  min-height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(22, 17, 12, 0.94) 0%, rgba(13, 10, 7, 0.98) 100%);
  border: 1px solid rgba(229, 195, 127, 0.32);
  box-shadow: 
    0 6px 20px -5px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 238, 185, 0.18),
    0 0 14px -4px rgba(229, 195, 127, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.tienda-promo-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(247, 227, 175, 0.25) 20%, 
    rgba(255, 245, 215, 0.85) 50%, 
    rgba(229, 195, 127, 0.35) 80%, 
    transparent 100%
  );
  pointer-events: none;
}

.tienda-promo-banner:hover {
  border-color: rgba(247, 227, 175, 0.52);
  box-shadow: 
    0 10px 28px -5px rgba(0, 0, 0, 0.88),
    inset 0 1px 0 rgba(255, 238, 185, 0.28),
    0 0 20px -2px rgba(229, 195, 127, 0.18);
}

/* Left Group */
.tienda-promo-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.tienda-promo-icon-box {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(229, 195, 127, 0.22) 0%, rgba(229, 195, 127, 0.05) 100%);
  border: 1px solid rgba(229, 195, 127, 0.42);
  box-shadow: inset 0 0 6px rgba(229, 195, 127, 0.14), 0 2px 5px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-2);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.tienda-promo-banner:hover .tienda-promo-icon-box {
  transform: scale(1.05);
  border-color: var(--gold-2);
}

.tienda-promo-svg {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.tienda-promo-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.tienda-promo-headline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.tienda-promo-title {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tienda-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(247, 227, 175, 0.25) 0%, rgba(229, 195, 127, 0.1) 100%);
  color: var(--gold-2);
  border: 1px solid rgba(247, 227, 175, 0.52);
  box-shadow: 0 1px 5px rgba(229, 195, 127, 0.18);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 999px;
  line-height: 1.2;
  flex-shrink: 0;
}

.tienda-promo-badge::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 4px var(--gold-2);
}

.tienda-promo-desc {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(226, 232, 240, 0.68);
  margin: 0;
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Store Button */
.tienda-direct-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fae29c 0%, #e5c37f 50%, #c49640 100%);
  color: #120c04;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 
    0 2px 8px rgba(229, 195, 127, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.tienda-direct-store-btn svg {
  width: 11px;
  height: 11px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tienda-direct-store-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #fff0c7 0%, #ecd091 50%, #cca04a 100%);
  box-shadow: 
    0 4px 14px rgba(229, 195, 127, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #000;
}

.tienda-direct-store-btn:hover svg {
  transform: translate(1.5px, -1.5px);
}

.tienda-direct-store-btn:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 540px) {
  .tienda-promo-banner {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .tienda-promo-desc,
  .tienda-promo-title {
    white-space: normal;
  }
  .tienda-promo-left {
    width: 100%;
  }
  .tienda-direct-store-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}