/* ==========================================================================
   RADIO CHOS MALAL 102.1 MHz  ·  Hoja de estilos principal
   Mobile-first · Tema configurable desde el panel de administracion
   --------------------------------------------------------------------------
   NOTA IMPORTANTE SOBRE ANIMACIONES
   Por pedido expreso del cliente, TODAS las animaciones deben reproducirse
   siempre, incluso si el sistema operativo del visitante tiene activada la
   preferencia "reducir movimiento" (prefers-reduced-motion: reduce).
   Por eso: (1) no existe ninguna regla que desactive animaciones dentro de
   una media query de prefers-reduced-motion, y (2) al final del archivo hay
   un bloque que fuerza explicitamente animation-play-state: running.
   ========================================================================== */

/* ---------------------------------- TEMA --------------------------------- */
:root{
  --brand:        #7C4DFF;   /* Color principal del sitio            */
  --brand-2:      #22D3EE;   /* Color secundario / degradados        */
  --player:       #A78BFA;   /* Acento del reproductor               */
  --bg:           #06060D;   /* Fondo general                        */

  --txt:          #F5F6FF;
  --txt-dim:      #A9AFC8;
  --glass:        rgba(255,255,255,.055);
  --glass-brd:    rgba(255,255,255,.10);
  --radius:       22px;
  --topbar-h:     58px;
  --ff:           'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --safe-b:       env(safe-area-inset-bottom, 0px);
  --safe-t:       env(safe-area-inset-top, 0px);
}

/* --------------------------------- RESET --------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--ff);
  font-weight:500;
  line-height:1.5;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img,svg,video{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
::selection{ background:var(--brand); color:#fff; }
:focus-visible{ outline:2px solid var(--brand-2); outline-offset:3px; border-radius:8px; }
[hidden]{ display:none !important; }

/* ============================== FONDO ANIMADO ============================= */
.bg-fx{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--brand-2) 12%, transparent) 0%, transparent 70%),
    var(--bg);
}
.aurora{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
  will-change:transform;
}
.a1{
  width:58vmax; height:58vmax; left:-18vmax; top:-22vmax;
  background:radial-gradient(circle, var(--brand) 0%, transparent 68%);
  animation:floatA 19s ease-in-out infinite;
}
.a2{
  width:46vmax; height:46vmax; right:-16vmax; top:12vmax;
  background:radial-gradient(circle, var(--brand-2) 0%, transparent 66%);
  animation:floatB 23s ease-in-out infinite;
}
.a3{
  width:52vmax; height:52vmax; left:20vmax; bottom:-26vmax;
  background:radial-gradient(circle, var(--player) 0%, transparent 68%);
  animation:floatA 27s ease-in-out infinite reverse;
  opacity:.32;
}
@keyframes floatA{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(6vmax,4vmax,0) scale(1.13); }
}
@keyframes floatB{
  0%,100%{ transform:translate3d(0,0,0) scale(1.05); }
  50%    { transform:translate3d(-7vmax,6vmax,0) scale(.9); }
}

/* Ondas de sonido de fondo (guiño a la portada original de la radio) */
.bg-waves{ position:absolute; inset:0; opacity:.5; }
.bg-waves svg{ position:absolute; left:0; top:50%; width:170%; height:60%; transform:translateY(-50%); }
.bw{ fill:none; stroke-width:1.1; vector-effect:non-scaling-stroke; }
.bw1{ stroke:color-mix(in srgb, var(--brand) 55%, transparent);   animation:slide 16s linear infinite; }
.bw2{ stroke:color-mix(in srgb, var(--brand-2) 45%, transparent); animation:slide 22s linear infinite reverse; }
.bw3{ stroke:color-mix(in srgb, var(--player) 35%, transparent);  animation:slide 30s linear infinite; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-450px); } }

/* ================================ TOPBAR ================================= */
.topbar{
  position:sticky; top:0; z-index:40;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding:var(--safe-t) 14px 0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--glass-brd);
}
.topbar-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav-logo-wrap{ position:relative; display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; }
.nav-logo{
  width:38px; height:38px; border-radius:50%; object-fit:contain;
  animation:navSpin 9s linear infinite, navGlow 2.6s ease-in-out infinite;
}
@keyframes navSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes navGlow{
  0%,100%{ filter:drop-shadow(0 0 0 color-mix(in srgb, var(--brand) 0%, transparent)); }
  50%    { filter:drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 85%, transparent)); }
}
.topbar-text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.topbar-text strong{ font-size:14px; font-weight:800; letter-spacing:.04em; }
.topbar-text small{ font-size:10px; font-weight:600; color:var(--txt-dim); letter-spacing:.16em; }
.topbar-actions{ display:flex; align-items:center; gap:8px; }

.live-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.12em;
  background:color-mix(in srgb, #ff2d55 18%, transparent);
  border:1px solid color-mix(in srgb, #ff2d55 45%, transparent);
  color:#ff8fa3;
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:#ff2d55; flex:0 0 auto;
  animation:blink 1.35s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(255,45,85,.7); }
  50%    { opacity:.35; box-shadow:0 0 0 6px rgba(255,45,85,0); }
}
.icon-btn{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--glass-brd);
  transition:background .2s, transform .15s;
}
.icon-btn:active{ transform:scale(.92); }
.icon-btn svg{ width:19px; height:19px; fill:currentColor; }

/* ================================= MAIN ================================== */
main{ position:relative; z-index:1; }

/* ================================= HERO ================================== */
.hero{
  min-height:calc(100vh - var(--topbar-h));
  min-height:calc(100dvh - var(--topbar-h) - var(--safe-t));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px, 3.4vh, 30px);
  padding:clamp(14px, 3vh, 26px) 16px clamp(18px, 4vh, 34px);
  text-align:center;
}

/* ---------------------------- LOGO ANIMADO ------------------------------- */
.brand{ position:relative; display:grid; place-items:center; padding:12px 0; width:100%; }

/* Ondas de sonido que emanan del logo */
.sonar{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.sonar span{
  position:absolute; width:min(58%, 260px); aspect-ratio:1; border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--brand) 70%, transparent);
  animation:sonar 3.6s cubic-bezier(.22,.7,.3,1) infinite;
}
.sonar span:nth-child(2){ animation-delay:1.2s; border-color:color-mix(in srgb, var(--brand-2) 70%, transparent); }
.sonar span:nth-child(3){ animation-delay:2.4s; border-color:color-mix(in srgb, var(--player) 65%, transparent); }
@keyframes sonar{
  0%  { transform:scale(.55); opacity:0; }
  18% { opacity:.85; }
  100%{ transform:scale(2.1);  opacity:0; }
}
/* Cuando el administrador sube un logo propio, el resplandor reemplaza los anillos */
.brand.has-custom-logo .sonar span{
  border:0; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 45%, transparent) 0%, transparent 70%);
  animation-duration:3s;
}

.brand-inner{ position:relative; z-index:1; }
.logo-default{ display:flex; align-items:center; gap:clamp(10px, 2.6vw, 20px); }

.logo-mark{
  width:clamp(78px, 21vw, 122px); height:auto; flex:0 0 auto;
  animation:markPulse 2.8s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{ transform:scale(1);    filter:drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent)); }
  50%    { transform:scale(1.045); filter:drop-shadow(0 10px 30px color-mix(in srgb, var(--brand) 75%, transparent)); }
}
.lm-disc{ fill:#fff; }
/* Ecualizador: la onda "respira" verticalmente como una senal real */
.lm-wave-group{ transform-origin:100px 100px; animation:eq 1.5s ease-in-out infinite alternate; }
@keyframes eq{ from{ transform:scaleY(.86); } to{ transform:scaleY(1.14); } }
.lm-wave{
  fill:none; stroke:#0a0a12; stroke-width:12; stroke-linecap:round; stroke-linejoin:round;
}
/* Senal de color que recorre la onda, como el audio pasando por el aire */
.lm-wave-run{
  stroke:var(--brand); stroke-width:12;
  stroke-dasharray:46 320; stroke-dashoffset:0;
  animation:runSignal 2.4s linear infinite;
}
@keyframes runSignal{ from{ stroke-dashoffset:366; } to{ stroke-dashoffset:0; } }

/* Logo subido por el administrador */
.brand-img{
  display:block; width:auto; max-width:min(78vw, 460px);
  max-height:clamp(96px, 20vh, 190px); object-fit:contain;
  animation:markPulse 2.8s ease-in-out infinite;
}

/* Marca tipografica */
.wordmark{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; text-align:left; }
.wm-radio{
  font-size:clamp(12px, 3.3vw, 19px); font-weight:400; letter-spacing:.3em;
  color:var(--txt); opacity:.9;
}
.wm-name{
  font-size:clamp(22px, 6.6vw, 38px); font-weight:800; letter-spacing:-.005em;
  margin:.1em 0 .08em;
  text-shadow:0 2px 22px color-mix(in srgb, var(--brand) 55%, transparent);
}
.wm-freq{
  font-size:clamp(15px, 4.5vw, 26px); font-weight:800; letter-spacing:.06em;
  background:linear-gradient(90deg, var(--brand-2), var(--brand), var(--brand-2));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shine 5s linear infinite;
}
.wm-freq em{ font-style:normal; font-size:.72em; }
@keyframes shine{ from{ background-position:0% 50%; } to{ background-position:220% 50%; } }

/* =============================== PLAYER ================================== */
.player{
  position:relative; width:100%; max-width:520px;
  padding:16px 16px 12px;
  border-radius:var(--radius);
  background:
    linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.02)),
    color-mix(in srgb, var(--player) 8%, transparent);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    0 20px 50px -18px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 60px -30px color-mix(in srgb, var(--player) 90%, transparent);
  text-align:left;
}
.player::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 35%, color-mix(in srgb, var(--player) 30%, transparent) 50%, transparent 65%);
  background-size:280% 100%;
  opacity:.5;
  animation:sheen 7s linear infinite;
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite:exclude; -webkit-mask-composite:xor;
  padding:1px;
}
@keyframes sheen{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }

.player-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.np{ min-width:0; }
.np-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:9.5px; font-weight:800; letter-spacing:.16em; color:var(--txt-dim);
}
.np-title{
  display:block; margin-top:5px; font-size:16px; font-weight:800; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np-meta{ display:block; font-size:11.5px; font-weight:500; color:var(--txt-dim); }
.listeners{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  padding:5px 9px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-brd);
  font-size:11px; font-weight:700;
}
.listeners svg{ width:13px; height:13px; fill:var(--brand-2); }

/* Visualizador */
.viz{
  display:flex; align-items:flex-end; gap:2.5px;
  height:44px; margin:12px 0 4px; padding:0 1px;
}
.viz i{
  flex:1 1 0; min-width:2px; height:16%;
  border-radius:3px;
  background:linear-gradient(to top, var(--brand), var(--brand-2));
  opacity:.5;
  transform-origin:bottom;
  animation-name:vizBar; animation-iteration-count:infinite;
  animation-direction:alternate; animation-timing-function:ease-in-out;
  transition:opacity .3s;
}
@keyframes vizBar{ from{ height:12%; } to{ height:100%; } }
.player.is-playing .viz i{ opacity:1; }
/* En reposo las barras siguen moviendose, pero mas lento y suave.
   El !important es necesario porque cada barra recibe su propia duracion
   como estilo en linea (generada al azar por el JavaScript). */
.player:not(.is-playing) .viz i{ animation-duration:2.6s !important; opacity:.42; }

/* Controles */
.player-controls{ display:flex; align-items:center; gap:14px; margin-top:6px; }
.play-btn{
  position:relative; flex:0 0 auto;
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--brand), var(--brand-2));
  box-shadow:
    0 10px 26px -8px color-mix(in srgb, var(--brand) 85%, transparent),
    0 0 0 1px rgba(255,255,255,.16) inset;
  color:#fff;
  transition:transform .16s cubic-bezier(.3,1.6,.5,1);
}
.play-btn:active{ transform:scale(.9); }
.play-btn svg{ width:27px; height:27px; fill:#fff; grid-area:1/1; }
.play-btn .ico-play{ margin-left:3px; }
.play-btn .ico-pause,
.play-btn .ico-load{ display:none; }
.play-ring{
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--brand-2) 80%, transparent);
  opacity:0;
}
.player.is-playing .play-btn .ico-play{ display:none; }
.player.is-playing .play-btn .ico-pause{ display:block; }
.player.is-playing .play-ring{ animation:ring 1.9s ease-out infinite; }
@keyframes ring{
  0%  { transform:scale(.92); opacity:.9; }
  100%{ transform:scale(1.55); opacity:0; }
}
.player.is-loading .play-btn .ico-play,
.player.is-loading .play-btn .ico-pause{ display:none; }
.player.is-loading .play-btn .ico-load{ display:block; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.vol{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
.vol-btn{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; }
.vol-btn .ico-mute{ display:none; }
.vol-btn.muted .ico-vol{ display:none; }
.vol-btn.muted .ico-mute{ display:block; }
.vol-range{
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:0; height:26px; background:transparent; cursor:pointer;
}
.vol-range::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--brand) var(--vol,80%), rgba(255,255,255,.14) var(--vol,80%));
}
.vol-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:-5px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent);
}
.vol-range::-moz-range-track{ height:6px; border-radius:99px; background:rgba(255,255,255,.14); }
.vol-range::-moz-range-progress{ height:6px; border-radius:99px; background:var(--brand); }
.vol-range::-moz-range-thumb{
  width:15px; height:15px; border:0; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.player-status{
  margin-top:8px; font-size:11px; font-weight:600; color:var(--txt-dim); text-align:center;
  min-height:1.2em;
}
.player-status.err{ color:#ff8fa3; }

/* =============================== REDES =================================== */
.socials{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:8px; width:100%; max-width:520px;
}
.soc{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:11px 4px; border-radius:16px;
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:9.5px; font-weight:700; letter-spacing:.03em; color:var(--txt-dim);
  transition:transform .16s, background .2s, color .2s, box-shadow .2s;
}
.soc svg{ width:21px; height:21px; fill:currentColor; transition:transform .2s; }
.soc:active{ transform:scale(.94); }
.soc-wa{ color:#4ce07a; }
.soc-fb{ color:#5b9bff; }
.soc-ig{ color:#ff6ba8; }
.soc-mail{ color:var(--brand-2); }
.soc:hover{ background:rgba(255,255,255,.1); box-shadow:0 8px 24px -12px currentColor; }
.soc:hover svg{ transform:translateY(-2px) scale(1.08); }
.soc span{ color:var(--txt); opacity:.85; }

/* Indicador de scroll */
.scroll-hint{
  display:grid; place-items:center; width:26px; height:42px; border-radius:14px;
  border:1.5px solid var(--glass-brd); margin-top:2px; flex:0 0 auto;
}
.scroll-hint span{
  width:4px; height:8px; border-radius:99px; background:var(--brand-2);
  animation:scrollDot 1.7s ease-in-out infinite;
}
@keyframes scrollDot{
  0%   { transform:translateY(-7px); opacity:0; }
  40%  { opacity:1; }
  100% { transform:translateY(8px);  opacity:0; }
}

/* ============================== PUBLICIDAD =============================== */
.ad-slot{ padding:16px; display:flex; justify-content:center; }
.ad-slot:empty{ display:none; }
.banner{
  position:relative; display:block; width:100%; max-width:900px;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.03);
  box-shadow:0 16px 40px -22px rgba(0,0,0,.9);
  transition:transform .18s, box-shadow .25s;
}
.banner:active{ transform:scale(.985); }
.banner-media{ display:block; width:100%; height:auto; max-height:38vh; object-fit:contain; }
.banner-tag{
  position:absolute; top:7px; left:7px; z-index:2;
  padding:2px 7px; border-radius:99px;
  font-size:8px; font-weight:800; letter-spacing:.14em;
  background:rgba(0,0,0,.5); color:rgba(255,255,255,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}

/* Banner por defecto: "Publicite aqui" */
.house-ad{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:15px 16px; min-height:96px;
  background:
    linear-gradient(115deg,
      color-mix(in srgb, var(--brand) 34%, transparent) 0%,
      color-mix(in srgb, var(--brand-2) 26%, transparent) 55%,
      color-mix(in srgb, var(--brand) 30%, transparent) 100%),
    rgba(255,255,255,.03);
  overflow:hidden;
}
.house-ad::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.26) 48%, transparent 62%);
  background-size:250% 100%;
  animation:sheen 3.6s linear infinite;
}
.house-ad::after{
  content:''; position:absolute; inset:-40% -10%;
  background:radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--brand-2) 45%, transparent) 0%, transparent 45%);
  animation:floatA 12s ease-in-out infinite;
  opacity:.6;
}
.ha-ico{
  position:relative; z-index:1; flex:0 0 auto;
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  animation:megafon 2.2s ease-in-out infinite;
}
.ha-ico svg{ width:26px; height:26px; fill:#fff; }
@keyframes megafon{
  0%,100%{ transform:rotate(-9deg) scale(1); }
  50%    { transform:rotate(9deg)  scale(1.08); }
}
.ha-txt{ position:relative; z-index:1; min-width:0; }
.ha-txt b{
  display:block; font-size:clamp(15px,4.4vw,21px); font-weight:900; letter-spacing:.03em;
  text-shadow:0 2px 14px rgba(0,0,0,.5); white-space:nowrap;
}
.ha-txt small{ display:block; font-size:11px; font-weight:600; color:rgba(255,255,255,.86); margin-top:2px; }
.ha-cta-t{ font-weight:800; }
/* En pantallas angostas el botón queda solo con el ícono de WhatsApp */
@media (max-width:470px){
  .house-ad{ gap:11px; padding:14px 13px; }
  .ha-ico{ width:44px; height:44px; border-radius:13px; }
  .ha-ico svg{ width:23px; height:23px; }
  .ha-txt small{ font-size:10.5px; }
  .ha-cta{ padding:11px; border-radius:50%; }
  .ha-cta-t{ display:none; }
  .ha-cta svg{ width:17px; height:17px; }
}
.ha-cta{
  position:relative; z-index:1; margin-left:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:99px;
  background:#fff; color:#0f1020;
  font-size:11px; font-weight:800; white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
  animation:ctaPulse 1.9s ease-in-out infinite;
}
.ha-cta svg{ width:14px; height:14px; fill:#25D366; }
@keyframes ctaPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.06); }
}

/* ============================== TARJETAS ================================= */
#contenido{ scroll-margin-top:calc(var(--topbar-h) + 10px); }
.panel-grid{
  display:grid; grid-template-columns:1fr; gap:14px;
  padding:6px 16px 16px; max-width:900px; margin:0 auto;
}
.card{
  padding:18px; border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9);
}
.card-title{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:800; letter-spacing:.01em; margin-bottom:9px;
}
.card-title svg{ width:20px; height:20px; fill:var(--brand-2); flex:0 0 auto; }
.card p{ font-size:13.5px; color:var(--txt-dim); font-weight:500; }
.card p strong{ color:var(--txt); font-weight:700; }

.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.facts li{
  padding:10px 6px; border-radius:14px; text-align:center;
  background:rgba(255,255,255,.045); border:1px solid var(--glass-brd);
}
.facts b{
  display:block; font-size:17px; font-weight:900;
  background:linear-gradient(135deg, var(--brand-2), var(--brand));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.facts span{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em; color:var(--txt-dim); margin-top:2px; }

/* ==================== CONTADOR DE OYENTES DEL MES ======================= */
.counter{
  margin-top:14px; padding:14px 16px 16px; border-radius:18px;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--brand) 20%, transparent),
      color-mix(in srgb, var(--brand-2) 12%, transparent)),
    rgba(255,255,255,.03);
  border:1px solid var(--glass-brd);
  position:relative; overflow:hidden;
}
.counter::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.14) 48%, transparent 64%);
  background-size:260% 100%;
  animation:sheen 6s linear infinite;
  pointer-events:none;
}
.counter-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  position:relative; z-index:1;
}
.counter-live{
  display:inline-flex; align-items:center; gap:6px;
  font-size:9px; font-weight:800; letter-spacing:.14em; color:var(--txt-dim);
}
.counter-month{
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid var(--glass-brd); color:var(--txt);
}
.counter-num{
  position:relative; z-index:1;
  display:flex; align-items:baseline; gap:1px; margin:6px 0 2px;
  font-size:clamp(34px, 11vw, 54px); font-weight:900; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.counter-num i{
  font-style:normal; display:inline-block;
  background:linear-gradient(150deg, #fff, var(--brand-2) 70%, var(--brand));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 4px 24px color-mix(in srgb, var(--brand) 40%, transparent);
}
.counter-num i.sep{ opacity:.55; }
.counter-num i.bump{ animation:digitBump .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes digitBump{
  0%  { transform:translateY(60%) scale(.7); opacity:.2; filter:blur(2px); }
  60% { transform:translateY(-8%) scale(1.06); opacity:1; filter:blur(0); }
  100%{ transform:translateY(0) scale(1); }
}
.counter-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.counter-label{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--txt-dim); }
.counter-now{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; color:var(--txt);
  padding:4px 9px; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid var(--glass-brd);
}
.counter-now i{
  width:6px; height:6px; border-radius:50%; background:#4ce07a;
  animation:blink 1.6s ease-in-out infinite;
}
.counter-now b{ color:#4ce07a; }
.counter-bar{
  position:relative; z-index:1;
  height:5px; border-radius:99px; margin-top:11px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
.counter-bar span{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:0 0 12px color-mix(in srgb, var(--brand-2) 80%, transparent);
  transition:width 1.2s cubic-bezier(.2,.8,.3,1);
}

/* ================================ FOOTER ================================= */
.footer{
  position:relative; z-index:1;
  padding:26px 20px calc(112px + var(--safe-b));
  text-align:center;
  border-top:1px solid var(--glass-brd);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.45));
}
.footer-logo img{
  width:48px; height:48px; border-radius:50%; object-fit:contain;
  animation:markPulse 3.4s ease-in-out infinite;
}
.footer-legal{
  margin-top:12px; font-size:10.5px; font-weight:600; letter-spacing:.05em;
  color:var(--txt-dim); line-height:1.7;
}
.footer-credit{ margin-top:12px; font-size:12px; font-weight:600; color:var(--txt-dim); }
.footer-credit a{ position:relative; color:var(--txt); }
.footer-credit a strong{
  font-weight:900;
  background:linear-gradient(90deg, var(--brand-2), var(--brand), var(--brand-2));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:shine 4s linear infinite;
}
.footer-credit a::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand-2), var(--brand));
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.footer-credit a:hover::after{ transform:scaleX(1); }

/* ============================= MINIPLAYER ================================ */
.miniplayer{
  position:fixed; z-index:45; left:10px; right:10px;
  bottom:calc(10px + var(--safe-b));
  display:flex; align-items:center; gap:11px;
  padding:9px 13px 9px 9px; border-radius:19px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.95);
  transform:translateY(calc(140% + var(--safe-b))); opacity:0; pointer-events:none;
  transition:transform .38s cubic-bezier(.2,.9,.25,1), opacity .3s;
}
.miniplayer.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mini-play{
  width:44px; height:44px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--brand), var(--brand-2));
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--brand) 85%, transparent);
}
.mini-play svg{ width:19px; height:19px; fill:#fff; grid-area:1/1; }
.mini-play .ico-pause{ display:none; }
body.playing .mini-play .ico-play{ display:none; }
body.playing .mini-play .ico-pause{ display:block; }
.mini-info{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.mini-info strong{ font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-info span{ font-size:10.5px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-bars{ display:flex; align-items:flex-end; gap:2.5px; height:20px; margin-left:auto; flex:0 0 auto; }
.mini-bars i{
  width:3px; border-radius:2px; height:30%;
  background:linear-gradient(to top, var(--brand), var(--brand-2));
  animation:vizBar .8s ease-in-out infinite alternate;
  opacity:.45;
}
.mini-bars i:nth-child(2){ animation-duration:.55s; }
.mini-bars i:nth-child(3){ animation-duration:1.05s; }
.mini-bars i:nth-child(4){ animation-duration:.7s;  }
body.playing .mini-bars i{ opacity:1; }

/* =============================== POP-UP ================================== */
.popup-overlay{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:20px;
  background:rgba(3,3,10,.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .3s ease both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.popup{
  position:relative; width:100%; max-width:420px;
  border-radius:20px; overflow:hidden;
  border:1px solid var(--glass-brd);
  box-shadow:0 30px 80px -24px rgba(0,0,0,1);
  animation:popIn .45s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes popIn{
  from{ transform:translateY(24px) scale(.9); opacity:0; }
  to  { transform:translateY(0) scale(1); opacity:1; }
}
.popup-media{ display:block; line-height:0; background:#0b0b14; }
.popup-media img,
.popup-media video{ display:block; width:100%; height:auto; max-height:74vh; }
.popup-close{
  position:absolute; top:9px; right:9px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:14px; font-weight:700;
  background:rgba(8,8,16,.72); color:#fff; border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.popup-close:active{ transform:scale(.9); }

/* ====================== BOTÓN "MIRANOS EN VIVO" ========================= */
.fb-live-btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:12px; padding:12px 14px;
  border-radius:15px;
  background:linear-gradient(120deg, #1877F2, #0b5fce 60%, #1877F2);
  background-size:200% 100%;
  color:#fff; font-size:12.5px; font-weight:900; letter-spacing:.08em;
  box-shadow:0 10px 26px -12px rgba(24,119,242,.95), 0 0 0 1px rgba(255,255,255,.14) inset;
  animation:fbSlide 6s linear infinite;
  transition:transform .16s;
}
.fb-live-btn:active{ transform:scale(.97); }
.fb-live-btn.is-busy{ opacity:.75; pointer-events:none; }
/* Si la transmisión es de YouTube, el botón toma el color de YouTube */
.fb-live-btn.is-yt{
  background:linear-gradient(120deg, #FF0033, #c4002a 60%, #FF0033);
  background-size:200% 100%;
  box-shadow:0 10px 26px -12px rgba(255,0,51,.9), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.fb-live-btn.is-busy .flb-txt::after{
  content:'…'; display:inline-block; width:1.2em; text-align:left;
}
@keyframes fbSlide{ from{ background-position:0% 50%; } to{ background-position:200% 50%; } }
.fb-live-btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
  background-size:260% 100%;
  animation:sheen 3.2s linear infinite;
}
.flb-ico{
  position:relative; z-index:1; display:grid; place-items:center;
  width:26px; height:26px; border-radius:9px; flex:0 0 auto;
  background:rgba(255,255,255,.2);
}
.flb-ico svg{ width:16px; height:16px; fill:#fff; }
.flb-txt{ position:relative; z-index:1; }
.flb-dot{
  position:relative; z-index:1;
  width:8px; height:8px; border-radius:50%; background:#ff2d55; flex:0 0 auto;
  animation:blink 1.2s ease-in-out infinite;
}

/* ============= EL REPRODUCTOR SE CONVIERTE EN VIDEO EN VIVO =============
   Las dos caras (radio y video) ocupan el mismo espacio. Al cambiar, la
   tarjeta anima su alto y la cara nueva entra con un zoom suave.          */
.player.is-morphing{
  overflow:hidden;
  transition:height .52s cubic-bezier(.3,.85,.25,1);
}
.player.is-morphing::after{ opacity:1; }         /* el brillo se intensifica */
.face-out{ animation:faceOut .22s ease-in forwards; }
.face-in{ animation:faceIn .46s cubic-bezier(.2,1.05,.35,1) both; }
@keyframes faceOut{
  to{ opacity:0; transform:scale(.93) translateY(-8px); filter:blur(5px); }
}
@keyframes faceIn{
  from{ opacity:0; transform:scale(.93) translateY(10px); filter:blur(5px); }
  to  { opacity:1; transform:none; filter:none; }
}

/* ------------------------- CARA DEL VIDEO ------------------------------- */
.player-video{ display:flex; flex-direction:column; gap:11px; }
.pv-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pv-live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:9.5px; font-weight:900; letter-spacing:.14em; color:var(--txt-dim);
}
.pv-live b{ color:var(--txt); letter-spacing:.1em; }
.pv-close{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  font-size:12px; flex:0 0 auto;
  background:var(--glass); border:1px solid var(--glass-brd);
  transition:background .2s, transform .15s;
}
.pv-close:hover{ background:rgba(255,255,255,.12); }
.pv-close:active{ transform:scale(.9); }

.pv-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden;
  background:#000 center/28px no-repeat;
  border:1px solid var(--glass-brd);
  box-shadow:0 14px 34px -18px #000;
}
.pv-frame::before{                                /* mientras carga el video */
  content:''; position:absolute; inset:0; margin:auto;
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--brand-2);
  animation:spin .9s linear infinite;
}
.pv-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; }

.pv-back{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:13px 14px; border-radius:15px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; font-size:12.5px; font-weight:900; letter-spacing:.07em;
  box-shadow:0 10px 26px -12px color-mix(in srgb, var(--brand) 90%, transparent),
             0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .16s;
}
.pv-back:active{ transform:scale(.97); }
.pv-back::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  background-size:260% 100%;
  animation:sheen 3.4s linear infinite;
}
.pvb-ico{
  position:relative; z-index:1; display:grid; place-items:center;
  width:26px; height:26px; border-radius:9px; flex:0 0 auto;
  background:rgba(255,255,255,.2);
}
.pvb-ico svg{ width:15px; height:15px; fill:#fff; }
.pv-open{
  display:block; text-align:center;
  padding:9px 12px; border-radius:11px;
  font-size:10.5px; font-weight:700; color:var(--txt-dim);
  background:var(--glass); border:1px solid var(--glass-brd);
  transition:color .2s, background .2s;
}
.pv-open:hover{ color:var(--txt); background:rgba(255,255,255,.1); }
.pv-open:active{ transform:scale(.98); }

/* Con el video abierto, el mini reproductor de radio se esconde y el botón
   de WhatsApp vuelve a su posición de siempre (ya no hay nada que tapar) */
body.video-mode .miniplayer{ transform:translateY(160%); opacity:0; pointer-events:none; }
body.video-mode.mini-on .wa-float{ bottom:calc(20px + var(--safe-b)); right:14px; }

/* =================== BOTÓN FLOTANTE DE WHATSAPP ========================= */
.wa-float{
  position:fixed; z-index:50;
  right:14px; bottom:calc(20px + var(--safe-b));
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(145deg,#25D366,#128C7E);
  box-shadow:0 12px 28px -8px rgba(18,140,126,.9), 0 0 0 1px rgba(255,255,255,.18) inset;
  animation:waBob 2.8s ease-in-out infinite;
  transition:bottom .38s cubic-bezier(.2,.9,.25,1), transform .16s;
}
.wa-float:active{ transform:scale(.9); }
.wa-float svg{ width:29px; height:29px; fill:#fff; position:relative; z-index:2; }
@keyframes waBob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}
/* Onda que sale del botón, como un mensaje que llega */
.wa-float-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.75);
  animation:waRing 2.2s ease-out infinite;
}
@keyframes waRing{
  0%  { transform:scale(1);   opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}
.wa-float-tip{
  position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
  padding:7px 12px; border-radius:99px; white-space:nowrap;
  font-size:11px; font-weight:800;
  background:#fff; color:#0f1020;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
  opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s;
}
.wa-float:hover .wa-float-tip{ opacity:1; transform:translateY(-50%) translateX(-2px); }
/* Cuando aparece el mini reproductor, el botón sube para no taparlo */
body.mini-on .wa-float{ bottom:calc(88px + var(--safe-b)); }

/* ============================== ESCRITORIO =============================== */
@media (min-width:600px){
  :root{ --topbar-h:64px; }
  .topbar{ padding-left:24px; padding-right:24px; }
  .nav-logo,.nav-logo-wrap{ width:42px; height:42px; }
  .topbar-text strong{ font-size:15px; }
  .player{ padding:20px 20px 14px; }
  .np-title{ font-size:18px; }
  .viz{ height:56px; gap:3px; }
  .play-btn{ width:74px; height:74px; }
  .play-btn svg{ width:30px; height:30px; }
  .soc{ flex-direction:row; gap:8px; padding:13px 10px; font-size:12px; }
  .soc svg{ width:19px; height:19px; }
  .house-ad{ min-height:120px; padding:18px 22px; }
  .ad-slot{ padding:22px 16px; }
  .card{ padding:22px; }
  .wa-float{ width:62px; height:62px; right:20px; bottom:calc(24px + var(--safe-b)); }
  .wa-float svg{ width:32px; height:32px; }
  .fb-live-btn{ font-size:13.5px; padding:13px 16px; }
}
@media (min-width:860px){
  .panel-grid{ max-width:720px; padding:10px 24px 22px; }
  .hero{ gap:34px; }
  .miniplayer{ left:auto; right:20px; width:330px; }
  /* En pantallas anchas el mini reproductor va al costado: el botón de
     WhatsApp se corre a la izquierda en lugar de subir. */
  body.mini-on .wa-float{ bottom:calc(20px + var(--safe-b)); right:366px; }
}
@media (min-width:1100px){
  .bg-waves svg{ width:120%; }
}

/* ======================= ANIMACIONES SIEMPRE ACTIVAS =====================
   El cliente pidio expresamente que las animaciones se reproduzcan aunque
   el visitante tenga activado "reducir movimiento" en su sistema operativo.
   Este bloque anula cualquier intento de pausarlas (hojas de estilo de
   terceros, resets o extensiones del navegador).
   ======================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-play-state:running !important;
    animation-duration:revert-layer !important;
    animation-iteration-count:revert-layer !important;
    transition-duration:revert-layer !important;
  }
}