/* ================================
   KMultiradios – Custom Redesign
   (solo overrides: no rompe JS)
   ================================ */

/* 1) CAMBIO DE COLOR PRINCIPAL (rosa -> tu color) */
:root{
  --player-primary: #ff7b00;   /* <— cambia aquí */
  --body-bg: var(--player-primary);
  --scrollbar-color: var(--player-primary);

  /* un look más “premium” */
  --player-headings-bg: rgba(15,23,42,.18);
  --player-footer-bg: #ff7b00;
  --player-footer-color: #0f172a;
  --promo-bg: rgb(255 255 255 / 10%);
  --swiper-news-item-slider: rgb(255 255 255 / 92%);
}
html.dark{
  --player-primary: #ff7b00;
  --body-bg: var(--player-primary);
  --player-headings-bg: rgba(255,255,255,.12);
  --swiper-news-item-slider: rgba(255,255,255,.10);
}

/* 2) FONDO / MARCO GENERAL — Dark Premium */
body{
  background:
    radial-gradient(ellipse 80% 50% at 15% 15%, rgba(255,100,0,.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 80%, rgba(110,0,220,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(255,50,0,.06) 0%, transparent 65%),
    linear-gradient(160deg, #0d0015 0%, #180030 38%, #1c0900 72%, #0d0015 100%) !important;
}

/* 3) HEADER + SECCIONES (más limpio) */
.header-top{
  border-radius: 18px;
}
.header-top,
.player-equalizer,
.player.is-static .player-right{
  background: linear-gradient(135deg, var(--player-primary), #ff4d00);
}

.section-heading{
  display:flex;
  align-items:center;
  gap: 14px;
  background: none !important;
}
.section-heading::after{
  content:"";
  flex:1;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}
html.dark .section-heading::after{
  background: rgba(255,255,255,.18);
}
.section-name{
  display:flex;
  align-items:center;
  gap:.75rem;
  background: transparent !important;
  padding-right: .75rem;
}

/* 4) FOOTER (usa variables, NO hardcode rosa) */
.footer{
  background-color: var(--player-footer-bg);
}

/* 5) BOTONES / HOVERS */
.btn{ border-radius: 999px; font-weight: 800; }
.btn:hover{ transform: translateY(-1px); }

.social-item{
  transition: transform .3s ease, color .3s ease, background-color .3s ease;
  background-color: rgba(255,255,255,.95);
  color: #111;
}
.social-item:hover{
  color: var(--player-primary);
  transform: scale(1.06);
}

/* ================================
   PLAYER (arregla: letras NO tapan portada)
   ================================ */

/* En el modo estático (el grande), lo volvemos tipo “card” */
.player.is-static{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.player.is-static .player-wrapper{
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

/* Imagen ocupa arriba, completa */
.player.is-static .player-left{
  max-width: 100% !important;
}
#player-section,
.player.is-static .player-left{
  aspect-ratio: 16/12; /* antes era 1:1 */
}
.player.is-static .player-picture.image{
  width: 100% !important;
  aspect-ratio: 16/12;
}
.player.is-static .player-picture-wrapper{
  border: 0;
  border-radius: 0;
}
.player.is-static .player-picture-wrapper .image-wrapper{
  border-radius: 0;
}

/* Meta debajo de la imagen (ya NO es absoluta) */
.player.is-static .player-meta{
  position: static !important;
  width: 100% !important;
  padding: 1rem 1rem 1.1rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.player.is-static .player-title strong{
  background: rgba(0,0,0,.55);
  padding: .25rem .5rem;
  border-radius: 10px;
}
.player.is-static .player-desc{
  margin-top: .35rem;
}
.player.is-static .player-desc .artist-name{
  background: rgba(0,0,0,.65);
  border-radius: 10px;
}

/* Controles al final, sin tapar la portada */
.player.is-static .player-right{
  position: static !important;
  padding: 1rem;
}

/* ================================
   PLAY BUTTON – Diseño Premium Llamativo
   ================================ */
.player.is-static .player-button-play {
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: 52px !important;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  overflow: visible !important;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #7c3aed 100%);
  box-shadow: 0 4px 24px rgba(0, 114, 255, 0.55), 0 0 40px rgba(124, 58, 237, 0.3);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  outline: none;
  white-space: nowrap;
}

/* Destello animado de fondo */
.player.is-static .player-button-play::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c6ff, #7c3aed, #00c6ff);
  background-size: 200% 200%;
  animation: play-glow-rotate 2.5s linear infinite;
  z-index: -1;
  opacity: 0.7;
  filter: blur(6px);
  pointer-events: none;
}

.player.is-static .player-button-play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #7c3aed 100%);
  z-index: -1;
  pointer-events: none;
}

.player.is-static .player-button-play .play-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.player.is-static .player-button-play .play-label {
  font-family: 'Bebas Neue', cursive;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.player.is-static .player-button-play:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 10px 36px rgba(0, 114, 255, 0.7), 0 0 60px rgba(124, 58, 237, 0.45) !important;
}

.player.is-static .player-button-play:active {
  transform: scale(0.96) !important;
}

@keyframes play-glow-rotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Evita que el texto del player tape (marquee) demasiado */
.player-fix{ max-width: 100%; }
.player-title{ font-size: 1.05rem; }

/* ================================
   MODAL: ya no rosa (usa el color principal)
   ================================ */
.modal.modal-video{
  background-color: var(--player-primary);
}

/* ================================
   INSTALL BUTTONS (si quieres, más elegante)
   ================================ */
.install-buttons-wrapper{
  background-color: rgba(0,0,0,.55);
}
.install-botton .install-button{
  --btn-bg: #fff;
  --btn-color: #000;
  border-radius: 999px;
}

/* Un detalle: barras del equalizer */
.equalizer-bar{
  opacity: var(--player-equalizer-opacity, 0.18);
}
/* ===== FIX MÓVIL: PLAYER MÁS BAJO + PLAY VISIBLE ===== */
@media (max-width: 575px){

  /* el player grande NO cuadrado, mejor 16:9 */
  #player-section,
  .player.is-static .player-left{
    aspect-ratio: 16/9 !important;
  }

  /* que la portada se vea bien */
  .player.is-static .player-picture img{
    object-fit: cover !important;
  }

  /* play en móvil: centrado en la barra inferior, bien visible */
  .player.is-static .player-button-play {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 18px 0 14px !important;
    box-shadow: 0 4px 20px rgba(0,100,255,.7), 0 0 0 3px rgba(255,255,255,.15) !important;
  }

  .player.is-static .player-button-play .play-label {
    font-size: 1.1rem !important;
  }

  /* barra inferior compacta */
  .player.is-static .player-right{
    padding: .6rem 1rem !important;
    gap: .5rem !important;
  }

  /* separar el player del resto */
  #player-section {
    margin-bottom: 36px !important;
  }

  /* separar la sección entera (slider+player) del banner Alexa */
  .section.section-columns {
    margin-bottom: 28px !important;
  }
}

/* ===== BANNER ALEXA MÓVIL ===== */
@media (max-width: 575px) {
  /* Reducir sombra del player para que no se fusione visualmente */
  .player.is-static {
    box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
  }
  /* Espacio claro entre player y banner Alexa */
  .alexa-section {
    margin-top: 44px !important;
  }
  .alexa-banner {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 14px 12px !important;
    gap: 12px !important;
    border-radius: 18px !important;
  }
  .alexa-banner .alexa-logo-wrap {
    width: 68px !important;
    min-width: 68px !important;
    height: 40px !important;
    padding: 5px 7px !important;
  }
  .alexa-banner .alexa-logo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .alexa-banner p {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .alexa-banner .alexa-cmd {
    padding: 5px 10px !important;
    display: flex !important;
  }
  .alexa-banner .alexa-cmd span {
    font-size: 11px !important;
  }
}

/* ===== FIX MÓVIL: SLIDER MÁS GRANDE ===== */
@media (max-width: 575px){
  .slider-wrapper{
    aspect-ratio: 16/9 !important;
  }
}
/* ===== FIX: SE DESCUADRA A LA DERECHA EN MÓVIL ===== */
html, body{
  overflow-x: hidden !important;
}

/* Evita que el contenedor meta padding raro y empuje */
@media (max-width: 575px){
  .container{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .main-body{
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Player bien centrado y sin “extra” a la derecha */
  .player.is-static,
  #player-section{
    width: 100% !important;
    max-width: 100% !important;
  }
}@media (max-width: 575px){
  #player-section,
  .player.is-static .player-left{
    aspect-ratio: 18/9 !important; /* antes 16/9 */
  }
}

/* Aumentar tamaño del logo (Kreactivo) */
.header-brand{
  height: 60px !important;
  width: auto !important;
}

/

* En pantallas grandes, todavía más */
@media (min-width: 992px){
  .header-brand{
    height: 78px !important;
  }
}

/* ================================
   NEWS FEED – badge de fuente
   ================================ */
.news-image {
  position: relative;
}
.news-source-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,0.65);
  color: #ff7b00;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ================================
   NOW PLAYING – fallback de portada
   ================================ */
.player-picture-wrapper img[src=""],
.player-picture-wrapper img:not([src]),
.player-picture-wrapper img[src*="data:image"] {
  /* Fondo degradado cuando no hay portada */
  background: linear-gradient(135deg, #ff7b00 0%, #ff3d00 100%);
}

/* ================================
   SECTION HEADINGS – Bebas Neue
   ================================ */
.section-name {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 1.6rem !important;
  letter-spacing: .05em;
}
.section-name .icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* ================================
   SCROLL REVEAL – secciones
   ================================ */
.section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.section.is-visible {
  opacity: 1;
  transform: none;
}

/* ================================
   CHANNEL CARDS – Emisoras
   ================================ */
.channel-item {
  border-radius: 18px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.channel-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

/* ================================
   HISTORY – Historial de canciones
   ================================ */
.history-art {
  border-radius: 10px;
}
.history {
  transition: transform .25s ease;
}
.history:hover {
  transform: scale(1.03);
}

/* ================================
   TEAM CARDS – Locutores
   ================================ */
.team-item {
  border-radius: 18px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.team-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

/* ================================
   ACTION BAR – audio bars 4 barras
   ================================ */
#ab-nowplaying .audio-bar:nth-child(4) {
  animation-delay: .45s;
}

/* ================================
   PLAYER – portada siempre visible
   ================================ */
.player-picture-wrapper img {
  background: linear-gradient(135deg, #1a0a00, #3d1500);
}

/* ================================
   Listener counter – pulso
   ================================ */
#listener-count {
  line-height: 1 !important;
}

.player-nowplaying{
  margin-top:6px;
  color:#fff;
}

#np-title{
  font-weight:700;
  font-size:14px;
  line-height:1.1;
}

#np-artist{
  font-size:12px;
  opacity:.85;
}

/* ================================
   HERO SECTION – único e inmersivo
   ================================ */
.hero-kreactivo {
  position: relative;
  width: 100%;
  padding: 48px 20px 36px;
  overflow: hidden;
  text-align: center;
  /* Fondo oscuro fijo — ignora modo light/dark */
  background:
    radial-gradient(ellipse 80% 50% at 15% 20%, rgba(255,100,0,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 75%, rgba(110,0,220,.18) 0%, transparent 55%),
    linear-gradient(160deg, #0d0015 0%, #180030 38%, #1c0900 72%, #0d0015 100%) !important;
  /* Anula el glassmorphism blanco de main-body > section */
  border: none !important;
  border-radius: 20px !important;
}

/* Resplandores animados de fondo */
.hero-kreactivo::before,
.hero-kreactivo::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: hero-pulse 6s ease-in-out infinite alternate;
}
.hero-kreactivo::before {
  width: 500px; height: 300px;
  top: -60px; left: -100px;
  background: radial-gradient(circle, rgba(255,100,0,.35), transparent 70%);
}
.hero-kreactivo::after {
  width: 400px; height: 250px;
  bottom: -40px; right: -80px;
  background: radial-gradient(circle, rgba(120,0,255,.28), transparent 70%);
  animation-delay: 3s;
}
@keyframes hero-pulse {
  from { transform: scale(1);   opacity: .7; }
  to   { transform: scale(1.15); opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Barras de ecualizador grandes */
.hero-eq {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 48px;
  margin-bottom: 4px;
}
.hero-eq-bar {
  display: block;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(to top, #ff7b00, #ff3d00, #ff00aa);
  animation: hero-eq-anim 1.1s ease-in-out infinite alternate;
  transform-origin: bottom;
}
.hero-eq-bar:nth-child(1){ height: 30%; animation-duration: 0.8s;  animation-delay: 0.0s; }
.hero-eq-bar:nth-child(2){ height: 70%; animation-duration: 1.0s;  animation-delay: 0.1s; }
.hero-eq-bar:nth-child(3){ height: 50%; animation-duration: 0.7s;  animation-delay: 0.2s; }
.hero-eq-bar:nth-child(4){ height: 90%; animation-duration: 1.2s;  animation-delay: 0.05s;}
.hero-eq-bar:nth-child(5){ height: 60%; animation-duration: 0.9s;  animation-delay: 0.3s; }
.hero-eq-bar:nth-child(6){ height: 80%; animation-duration: 0.75s; animation-delay: 0.15s;}
.hero-eq-bar:nth-child(7){ height: 40%; animation-duration: 1.1s;  animation-delay: 0.25s;}
.hero-eq-bar:nth-child(8){ height: 65%; animation-duration: 0.85s; animation-delay: 0.35s;}
@keyframes hero-eq-anim {
  from { transform: scaleY(.25); }
  to   { transform: scaleY(1);   }
}

.hero-title {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  text-shadow:
    0 0 40px rgba(255,100,0,.6),
    0 0 80px rgba(255,100,0,.25),
    0 2px 0 rgba(0,0,0,.5);
  margin: 0;
}
.hero-title span {
  background: linear-gradient(90deg, #ff9500, #ff3d00, #ff00aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-tagline {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 400;
  color: rgba(255,255,255,.85);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 0 20px rgba(255,100,0,.5);
}

.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,100,0,.35);
  backdrop-filter: blur(10px);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hero-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff4d00;
  box-shadow: 0 0 8px #ff4d00;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Ola inferior */
.hero-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  pointer-events: none;
}
.hero-wave svg { width: 100%; height: 100%; }

/* Notas musicales flotantes */
.hero-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hn {
  position: absolute;
  font-size: 1.4rem;
  color: rgba(255,150,0,.35);
  animation: float-note 8s ease-in-out infinite;
  user-select: none;
}
.hn:nth-child(1)  { left:  5%; animation-duration: 7s;  animation-delay: 0s;   font-size: 1.1rem; }
.hn:nth-child(2)  { left: 15%; animation-duration: 9s;  animation-delay: 1.2s; color: rgba(200,0,255,.25); }
.hn:nth-child(3)  { left: 25%; animation-duration: 6s;  animation-delay: 0.5s; font-size: 1.8rem; }
.hn:nth-child(4)  { left: 40%; animation-duration:10s;  animation-delay: 2s;   color: rgba(255,80,0,.3); font-size:.9rem;}
.hn:nth-child(5)  { left: 55%; animation-duration: 8s;  animation-delay: 0.8s; }
.hn:nth-child(6)  { left: 65%; animation-duration: 7.5s;animation-delay: 1.5s; color: rgba(200,0,255,.2); }
.hn:nth-child(7)  { left: 75%; animation-duration: 9.5s;animation-delay: 3s;   font-size: 1.6rem; }
.hn:nth-child(8)  { left: 85%; animation-duration: 6.5s;animation-delay: 0.3s; font-size: 1rem; }
.hn:nth-child(9)  { left: 93%; animation-duration: 8.5s;animation-delay: 2.5s; color: rgba(255,80,0,.28); }
@keyframes float-note {
  0%   { transform: translateY(100%) rotate(-10deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .6; }
  100% { transform: translateY(-120%) rotate(15deg); opacity: 0; }
}

/* Redes sociales */
.hero-social {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.hs-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.hs-btn svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.hs-fb { background: linear-gradient(135deg, #1877f2, #0d5abf); box-shadow: 0 4px 16px rgba(24,119,242,.4); }
.hs-ig { background: linear-gradient(135deg, #f09433,#e6683c,#dc2743,#cc2366,#bc1888); box-shadow: 0 4px 16px rgba(220,39,67,.4); }
.hs-yt { background: linear-gradient(135deg, #ff0000, #cc0000); box-shadow: 0 4px 16px rgba(255,0,0,.4); }
.hs-btn:hover { transform: translateY(-4px) scale(1.1); }
.hs-fb:hover  { box-shadow: 0 10px 28px rgba(24,119,242,.6); }
.hs-ig:hover  { box-shadow: 0 10px 28px rgba(220,39,67,.6); }
.hs-yt:hover  { box-shadow: 0 10px 28px rgba(255,0,0,.6); }

@media (max-width: 575px) {
  .hero-kreactivo { padding: 32px 16px 24px; }
  .hero-eq { height: 36px; }
  .hero-eq-bar { width: 5px; }
  .hs-btn { width: 40px; height: 40px; }
}

/* ================================
   GLASSMORPHISM – secciones flotantes
   ================================ */
.main-body > section,
.section.action-bar-font {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
  padding: 16px;
}

/* El player no lleva glass extra — ya tiene su propio estilo */
.player.is-static {
  background: transparent;
}

/* La barra de acción (listener counter, botones, EN VIVO) */
.section.action-bar-font {
  background: rgba(20,5,40,.45) !important;
  border-color: rgba(255,100,0,.15) !important;
}

/* Banner Alexa */
.alexa-section {
  background: rgba(0,30,60,.45) !important;
  border-color: rgba(0,180,255,.18) !important;
}

/* Sección de noticias */
#section-news {
  padding: 16px 16px 24px;
}