*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:var(--pagebg);color:#eef2ff;background-position:center}
.hero{padding:18px max(20px,5vw);background:linear-gradient(135deg,var(--primary),#111827);position:sticky;top:0;z-index:5;box-shadow:0 8px 30px #0005}
.brand{display:flex;align-items:center;gap:14px}.logo{font-size:42px;width:62px;height:62px;display:grid;place-items:center}.logo img{width:100%;height:100%;object-fit:contain}.brand h1{margin:0}.brand p{margin:4px 0;color:#ddd}.brand small{color:#ddd}
nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}nav a{color:white;text-decoration:none;font-weight:700}
main{max-width:1100px;margin:auto;padding:30px 20px}.player-card{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;background:linear-gradient(145deg,#111827ee,#0f172aee);padding:28px;border-radius:26px;box-shadow:0 20px 70px #0007;border:1px solid #ffffff15}
.cover{aspect-ratio:1;border-radius:24px;background:radial-gradient(circle at 30% 30%,var(--secondary),var(--primary));display:grid;place-items:center;font-size:80px;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.now span{display:inline-block;background:#ef4444;padding:6px 10px;border-radius:999px;font-weight:800}.now h2{font-size:36px;margin:14px 0 8px}.play{background:var(--secondary);border:0;padding:15px 20px;border-radius:999px;font-size:18px;font-weight:800;cursor:pointer}.notice{padding:12px;background:#78350f;border-radius:10px}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.socials a{padding:10px 14px;border-radius:999px;background:#111827e8;color:white;text-decoration:none;border:1px solid #ffffff18;font-weight:700}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}.features article,.section{background:#111827e8;border:1px solid #253047;border-radius:18px;padding:22px}.section{margin:18px 0}.affiliation{display:flex;align-items:center;gap:16px;background:#111827e8;border:1px solid #253047;border-radius:18px;padding:18px}.affiliation img{width:90px;max-height:70px;object-fit:contain}.affiliation div{display:grid;gap:4px}.affiliation a{color:#c4b5fd}
.wa-float{position:fixed;right:18px;bottom:18px;background:#22c55e;color:white;text-decoration:none;font-weight:900;padding:14px 18px;border-radius:999px;box-shadow:0 12px 35px #0008;z-index:9}
footer{text-align:center;padding:26px;color:#94a3b8}
@media(max-width:700px){.hero{position:relative}.player-card{grid-template-columns:1fr}.cover{max-width:230px;margin:auto;width:100%}.now{text-align:center}.features{grid-template-columns:1fr}.now h2{font-size:28px}.affiliation{align-items:flex-start}.brand h1{font-size:24px}}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.public-news-card{background:#0d1727;border:1px solid #253047;border-radius:15px;overflow:hidden}.public-news-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.public-news-card>div{padding:16px}.public-news-card small{color:var(--secondary);font-weight:800}.public-news-card h3{margin:8px 0;font-size:20px}.public-news-card p{margin:0;color:#d0d8e6;line-height:1.55;white-space:normal}
@media(max-width:700px){.news-grid{grid-template-columns:1fr}}

.schedule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.schedule-card{background:#0d1727;border:1px solid #253047;border-radius:15px;overflow:hidden;display:grid;grid-template-columns:130px 1fr}.schedule-card img{width:100%;height:100%;min-height:150px;object-fit:cover}.schedule-card>div{padding:16px}.schedule-card h3{margin:9px 0 8px}.schedule-card p{margin:5px 0;color:#d0d8e6}.day-pill{display:inline-block;padding:5px 8px;border-radius:99px;background:var(--primary);font-size:12px;font-weight:800}.schedule-time{font-weight:800;color:var(--secondary)!important}
@media(max-width:700px){.schedule-grid{grid-template-columns:1fr}.schedule-card{grid-template-columns:100px 1fr}}

.hosts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.host-card{background:#0d1727;border:1px solid #253047;border-radius:15px;overflow:hidden;display:grid;grid-template-columns:150px 1fr}.host-photo{min-height:190px;background:#17243a;display:grid;place-items:center;font-size:44px}.host-photo img{width:100%;height:100%;object-fit:cover}.host-card>div:last-child{padding:16px}.host-card h3{margin:0 0 4px}.host-card small{color:var(--secondary);font-weight:800}.host-card p{color:#d0d8e6;line-height:1.5}.host-links{display:flex;flex-wrap:wrap;gap:8px}.host-links a{padding:7px 10px;border-radius:99px;background:#1b2a40;color:white;text-decoration:none;font-size:13px;font-weight:800}
@media(max-width:700px){.hosts-grid{grid-template-columns:1fr}.host-card{grid-template-columns:110px 1fr}.host-photo{min-height:160px}}

.ads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ad-card{background:#0d1727;border:1px solid #253047;border-radius:14px;overflow:hidden}.ad-card img{display:block;width:100%;aspect-ratio:16/6;object-fit:cover}.ad-card small{display:block;padding:9px 11px;color:#cbd5e1;font-weight:700}
@media(max-width:700px){.ads-grid{grid-template-columns:1fr}.ad-card img{aspect-ratio:16/5}}

.videos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.video-card{background:#0d1727;border:1px solid #253047;border-radius:15px;overflow:hidden}.video-frame{position:relative;padding-top:56.25%;background:#000}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-card h3{padding:14px 16px;margin:0}
@media(max-width:700px){.videos-grid{grid-template-columns:1fr}}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery-card{margin:0;background:#0d1727;border:1px solid #253047;border-radius:14px;overflow:hidden}.gallery-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.gallery-card figcaption{padding:10px 12px;color:#dbe4f2;font-weight:700}
@media(max-width:700px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

.poll-form{display:grid;gap:10px}.poll-option{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#0d1727;border:1px solid #253047;border-radius:12px;cursor:pointer}.poll-option input{width:20px;height:20px}.poll-public-results{display:grid;gap:12px}.poll-bar-row>div{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}.poll-bar-row i{display:block;height:10px;background:#1f2b3d;border-radius:99px;overflow:hidden}.poll-bar-row em{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}.poll-public-results small{color:#94a3b8}


/* ===== v0.9.2: correcciones página pública ===== */
.ad-card a{display:block}
.ad-card img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:#08111f;
  max-height:420px;
}
@media(max-width:700px){
  .ad-card img{
    aspect-ratio:auto;
    max-height:none;
  }
}

.request-form{display:grid;gap:14px}.request-form label{display:grid;gap:7px;font-weight:800}.request-form input,.request-form textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #334155;background:#0d1727;color:white;font:inherit;box-sizing:border-box}.request-form textarea{resize:vertical}.request-form small{font-weight:500;color:#94a3b8}.request-submit{width:100%;border:0;cursor:pointer}.public-success,.public-error{padding:12px 14px;border-radius:12px;margin-bottom:14px;font-weight:800}.public-success{background:#064e3b;color:#d1fae5}.public-error{background:#7f1d1d;color:#fee2e2}

.request-form select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #334155;background:#0d1727;color:white;font:inherit}.messages-section{scroll-margin-top:100px}


/* ===== v1.1.3 Reflexiones / marquee ===== */
.reflection-ticker{
  display:flex;
  align-items:center;
  gap:0;
  width:100%;
  overflow:hidden;
  background:#10192a;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:2;
}
.reflection-label{
  flex:0 0 auto;
  padding:12px 16px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  white-space:nowrap;
}
.reflection-viewport{
  overflow:hidden;
  flex:1;
}
.reflection-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:22px;
  padding:11px 0;
  animation:reflection-scroll 32s linear infinite;
}
.reflection-track:hover{
  animation-play-state:paused;
}
.reflection-item{
  white-space:nowrap;
  color:#e5e7eb;
  font-size:15px;
}
.reflection-item b{
  color:#fbbf24;
}
.reflection-sep{
  color:#8b5cf6;
}
@keyframes reflection-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(max-width:700px){
  .reflection-label{
    padding:10px 12px;
    font-size:13px;
  }
  .reflection-track{
    animation-duration:26s;
    gap:18px;
  }
  .reflection-item{
    font-size:14px;
  }
}
@media(prefers-reduced-motion:reduce){
  .reflection-track{
    animation:none;
    overflow:auto;
  }
}


/* ===== v1.1.4 Contacto completo ===== */
.contact-section .contact-intro{
  color:#cbd5e1;
  margin:0 0 20px;
  line-height:1.6;
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.contact-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:88px;
  padding:16px;
  border:1px solid #26344b;
  border-radius:18px;
  background:#101a2c;
  color:#f8fafc;
  text-decoration:none;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
a.contact-card:hover{
  transform:translateY(-2px);
  border-color:#7c3aed;
  background:#142038;
}
.contact-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:14px;
  background:#1b2940;
  font-size:22px;
}
.contact-card div{
  min-width:0;
}
.contact-card small{
  display:block;
  margin-bottom:4px;
  color:#94a3b8;
}
.contact-card b{
  display:block;
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  .contact-grid{grid-template-columns:1fr}
}


/* ===== v1.1.5 Quiénes somos / misión ===== */
.about-section{
  padding:0;
  overflow:hidden;
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(240px,.85fr) minmax(0,1.4fr);
  min-height:360px;
}
.about-image{
  min-height:360px;
  background:#0d1727;
}
.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-copy{
  padding:28px;
}
.section-kicker{
  display:inline-block;
  margin-bottom:6px;
  color:var(--secondary);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.about-copy h2{
  margin:0 0 14px;
  font-size:32px;
}
.about-text{
  color:#d3dceb;
  line-height:1.7;
}
.about-values{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}
.about-values article{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  background:#0d1727;
  border:1px solid #253047;
  border-radius:15px;
}
.about-values article>span{
  font-size:24px;
}
.about-values h3{
  margin:0 0 7px;
}
.about-values p{
  margin:0;
  color:#cbd5e1;
  line-height:1.55;
}
.about-verse{
  margin:20px 0 0;
  padding:15px 18px;
  border-left:4px solid var(--secondary);
  background:#0d1727;
  color:#f8fafc;
  font-style:italic;
  line-height:1.55;
}
@media(max-width:760px){
  .about-grid{
    grid-template-columns:1fr;
  }
  .about-image{
    min-height:240px;
    max-height:320px;
  }
  .about-copy{
    padding:22px;
  }
  .about-copy h2{
    font-size:27px;
  }
  .about-values{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PUBLIC V2 - Diseño premium para radio online
   ========================================================= */
.public-v2{
  --v2-bg:#07111f;
  --v2-card:#0f1b2d;
  --v2-card2:#13233a;
  --v2-line:rgba(255,255,255,.09);
  --v2-text:#f8fafc;
  --v2-muted:#9fb0c6;
  --v2-glow:0 22px 60px rgba(0,0,0,.35);
  margin:0;
  background:
    radial-gradient(circle at 20% -10%, rgba(124,58,237,.30), transparent 35%),
    radial-gradient(circle at 100% 0%, rgba(236,72,153,.18), transparent 28%),
    linear-gradient(180deg,#07111f 0%,#091525 100%);
  color:var(--v2-text);
}

.public-v2 .site-header{
  position:relative;
  overflow:hidden;
  padding:28px 22px 20px;
  background:
    linear-gradient(135deg,rgba(124,58,237,.92),rgba(76,29,149,.90)),
    radial-gradient(circle at 75% 20%,rgba(255,255,255,.16),transparent 28%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}

.public-v2 .site-header::after{
  content:"";
  position:absolute;
  inset:auto -80px -120px auto;
  width:280px;
  height:280px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  filter:blur(2px);
}

.public-v2 .site-header .brand,
.public-v2 .site-header .identity,
.public-v2 .site-header > div:first-child{
  position:relative;
  z-index:2;
}

.radio-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  margin-bottom:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.38);
  border:1px solid rgba(255,255,255,.16);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.public-v2 .site-header h1{
  margin:4px 0 4px;
  font-size:clamp(30px,7vw,48px);
  line-height:1.05;
  letter-spacing:-.03em;
}

.public-v2 .radio-slogan{
  margin:0;
  color:#e9ddff;
  font-size:16px;
  line-height:1.45;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}
.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:13px;
  background:rgba(15,23,42,.36);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  backdrop-filter:blur(10px);
}
.hero-btn.primary{
  background:#fff;
  color:#3b1677;
  border-color:#fff;
}

.public-v2 nav{
  position:relative;
  z-index:3;
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin-top:18px;
  padding-bottom:2px;
  scrollbar-width:none;
}
.public-v2 nav::-webkit-scrollbar{display:none}
.public-v2 nav a{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(9,15,30,.28);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.public-v2 main{
  width:min(100% - 24px,1080px);
  margin:0 auto;
  padding:24px 0 60px;
}

.public-v2 .reflection-ticker{
  width:min(100% - 24px,1080px);
  margin:14px auto 0;
  border:1px solid var(--v2-line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(15,27,45,.90);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.public-v2 .player-v2,
.public-v2 .player-card{
  position:relative;
  overflow:hidden;
  margin:0 0 22px;
  padding:26px;
  border-radius:28px;
  border:1px solid var(--v2-line);
  background:
    radial-gradient(circle at 50% -10%,rgba(124,58,237,.20),transparent 35%),
    linear-gradient(180deg,#101d31,#0c1728);
  box-shadow:var(--v2-glow);
}

.public-v2 .player-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 35%);
}

.public-v2 .player-card img,
.public-v2 .cover,
.public-v2 .cover-art{
  border-radius:24px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.30);
}

.public-v2 .player-card h2{
  font-size:clamp(28px,7vw,42px);
  margin-top:18px;
  letter-spacing:-.025em;
}

.public-v2 .section,
.public-v2 .section-v2,
.public-v2 .features,
.public-v2 .affiliation{
  margin:20px 0;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--v2-line);
  background:linear-gradient(180deg,rgba(16,29,49,.96),rgba(12,23,40,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.18);
}

.public-v2 .section h2,
.public-v2 .features h2{
  margin:0 0 18px;
  font-size:clamp(24px,6vw,34px);
  letter-spacing:-.025em;
}

.public-v2 .program-card,
.public-v2 .news-card,
.public-v2 .locutor-card,
.public-v2 .video-card,
.public-v2 .gallery-card,
.public-v2 .ad-card{
  overflow:hidden;
  border:1px solid var(--v2-line)!important;
  border-radius:20px!important;
  background:#0d192b!important;
  box-shadow:none!important;
}

.public-v2 .program-card img,
.public-v2 .news-card img,
.public-v2 .locutor-card img,
.public-v2 .video-card img,
.public-v2 .gallery-card img,
.public-v2 .ad-card img{
  width:100%;
  object-fit:cover;
}

.public-v2 .socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 4px;
}
.public-v2 .socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 13px;
  border-radius:999px;
  background:#12213a;
  border:1px solid var(--v2-line);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

.public-v2 .contact-card,
.public-v2 .about-values article{
  background:#0c1728!important;
  border-color:var(--v2-line)!important;
}

.public-v2 footer{
  margin-top:10px;
  padding:28px 16px 36px;
  text-align:center;
  color:#8fa1b8;
  border-top:1px solid var(--v2-line);
}

@media(min-width:760px){
  .public-v2 .site-header{
    padding:34px 5vw 24px;
  }
  .public-v2 .site-header > *{
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
  }
  .public-v2 .player-card{
    padding:34px;
  }
}

@media(max-width:620px){
  .public-v2 .site-header{
    padding:22px 18px 18px;
  }
  .public-v2 main{
    width:min(100% - 18px,1080px);
    padding-top:18px;
  }
  .public-v2 .section,
  .public-v2 .section-v2,
  .public-v2 .features,
  .public-v2 .affiliation{
    padding:18px;
    border-radius:20px;
  }
  .public-v2 .player-v2,
  .public-v2 .player-card{
    padding:18px;
    border-radius:22px;
  }
  .public-v2 .reflection-ticker{
    width:min(100% - 18px,1080px);
    border-radius:14px;
  }
}


/* =========================================================
   PUBLIC V2.1 - Mobile header + compact player
   ========================================================= */
.mobile-radio-bar,
.mobile-player-actions{
  display:none;
}

@media(max-width:620px){
  .public-v2 .site-header{
    padding:14px 14px 12px;
    min-height:auto;
  }

  /* Hide oversized identity block on mobile; keep compact bar */
  .public-v2 .site-header > .brand,
  .public-v2 .site-header > .identity,
  .public-v2 .site-header > div:not(.mobile-radio-bar):not(.reflection-ticker):not(.hero-actions):first-child{
    max-width:100%;
  }

  .public-v2 .site-header h1{
    font-size:26px;
    margin:0 0 3px;
  }

  .public-v2 .site-header .radio-slogan{
    font-size:14px;
    line-height:1.35;
  }

  .public-v2 .site-header .radio-badge{
    font-size:9px;
    padding:4px 8px;
    margin-bottom:6px;
  }

  .public-v2 .hero-actions{
    display:none;
  }

  .mobile-radio-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.13);
    position:relative;
    z-index:4;
  }

  .mobile-radio-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .mobile-radio-brand b{
    display:block;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
  }

  .mobile-radio-brand small{
    display:block;
    margin-top:2px;
    color:#e9ddff;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .mobile-radio-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 5px rgba(34,197,94,.14);
  }

  .mobile-menu-btn{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:13px;
    background:rgba(15,23,42,.38);
    color:#fff;
    font-size:23px;
    line-height:1;
  }

  .public-v2 nav{
    display:none;
    flex-direction:column;
    gap:8px;
    margin-top:12px;
    padding:12px;
    border-radius:16px;
    background:rgba(10,17,31,.52);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
  }

  .public-v2.public-menu-open nav,
  body.public-menu-open nav{
    display:flex;
  }

  .public-v2 nav a{
    width:100%;
    justify-content:flex-start;
    padding:11px 13px;
    border-radius:11px;
    background:rgba(255,255,255,.05);
  }

  .public-v2 .reflection-ticker{
    margin-top:10px;
  }

  .public-v2 .reflection-label{
    padding:8px 10px;
    font-size:11px;
  }

  .public-v2 .reflection-track{
    padding:8px 0;
    animation-duration:22s;
  }

  .public-v2 .reflection-item{
    font-size:12px;
  }

  .public-v2 main{
    width:min(100% - 14px,1080px);
    padding-top:12px;
  }

  .public-v2 .player-v2,
  .public-v2 .player-card{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:14px;
    align-items:center;
    padding:14px;
    border-radius:18px;
    min-height:0;
  }

  .public-v2 .player-card img,
  .public-v2 .player-card .cover,
  .public-v2 .player-card .cover-art{
    width:96px!important;
    height:96px!important;
    min-width:96px!important;
    min-height:96px!important;
    border-radius:16px!important;
    object-fit:cover!important;
    margin:0!important;
  }

  .public-v2 .player-card h2{
    font-size:22px;
    margin:4px 0 4px;
  }

  .public-v2 .player-card p{
    margin:4px 0;
    font-size:13px;
  }

  .public-v2 .player-card .live,
  .public-v2 .player-card .badge,
  .public-v2 .player-card .live-badge{
    width:max-content;
    margin:0 0 5px;
    padding:5px 9px;
    font-size:10px;
    border-radius:999px;
  }

  .public-v2 .player-card audio{
    width:100%;
    grid-column:1 / -1;
    height:40px;
    margin-top:6px;
  }

  .public-v2 .player-card .stream-warning,
  .public-v2 .player-card .warning,
  .public-v2 .player-card .notice{
    grid-column:1 / -1;
    margin-top:4px;
    padding:10px 12px;
    font-size:12px;
    border-radius:12px;
  }

  .mobile-player-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:-8px 0 18px;
  }

  .mobile-player-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:8px 6px;
    border-radius:12px;
    background:#101d31;
    border:1px solid var(--v2-line);
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    text-align:center;
  }

  .public-v2 .section,
  .public-v2 .section-v2,
  .public-v2 .features,
  .public-v2 .affiliation{
    margin:14px 0;
  }
}

@media(max-width:390px){
  .public-v2 .player-v2,
  .public-v2 .player-card{
    grid-template-columns:82px 1fr;
  }
  .public-v2 .player-card img,
  .public-v2 .player-card .cover,
  .public-v2 .player-card .cover-art{
    width:82px!important;
    height:82px!important;
    min-width:82px!important;
    min-height:82px!important;
  }
  .mobile-player-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PUBLIC V2.2 - Hora, fecha y clima
   ========================================================= */
.visitor-info-bar{
  width:min(100% - 24px,1080px);
  margin:12px auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.visitor-info-item{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:68px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(15,27,45,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.visitor-info-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  background:#17253b;
  font-size:20px;
}
.visitor-info-item div{
  min-width:0;
}
.visitor-info-item small{
  display:block;
  margin-bottom:3px;
  color:#8fa2bb;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.visitor-info-item b{
  display:block;
  color:#f8fafc;
  font-size:14px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

@media(max-width:620px){
  .visitor-info-bar{
    width:min(100% - 14px,1080px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:8px;
  }
  .visitor-info-item{
    min-height:64px;
    padding:9px 8px;
    border-radius:13px;
    gap:7px;
  }
  .visitor-info-icon{
    width:30px;
    height:30px;
    flex-basis:30px;
    border-radius:10px;
    font-size:16px;
  }
  .visitor-info-item small{
    font-size:8px;
    letter-spacing:.03em;
  }
  .visitor-info-item b{
    font-size:11px;
  }
}

@media(max-width:390px){
  .visitor-info-bar{
    grid-template-columns:1fr 1fr;
  }
  .visitor-info-item.weather-item{
    grid-column:1 / -1;
  }
}


/* =========================================================
   v2.3 - Reproductor tipo Luna / Radio App
   ========================================================= */
.luna-player{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(230px,.82fr) minmax(0,1.18fr);
  gap:34px;
  align-items:center;
  overflow:hidden;
  margin:0 0 22px;
  padding:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:32px;
  background:
    radial-gradient(circle at 15% 10%,rgba(168,85,247,.28),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(14,165,233,.17),transparent 30%),
    linear-gradient(145deg,#0e1a2d,#081321 72%);
  box-shadow:0 30px 70px rgba(0,0,0,.38);
}
.luna-backdrop{
  position:absolute;
  inset:-35px;
  z-index:-2;
  background-position:center;
  background-size:cover;
  opacity:.10;
  filter:blur(34px) saturate(1.4);
  transform:scale(1.12);
}
.luna-player:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 34%);
}
.luna-cover-wrap{
  position:relative;
  display:grid;
  place-items:center;
}
.luna-cover-ring{
  position:relative;
  width:min(100%,330px);
  aspect-ratio:1;
  padding:7px;
  border-radius:31px;
  background:linear-gradient(135deg,var(--primary),#ec4899,var(--secondary));
  box-shadow:0 20px 55px rgba(0,0,0,.38);
}
.luna-cover-ring:before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:38px;
  border:1px solid rgba(255,255,255,.08);
}
.luna-cover{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:25px;
  background:linear-gradient(135deg,#f59e0b,#7c3aed);
}
.luna-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.luna-cover-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:88px;
}
.luna-live{
  position:absolute;
  right:2px;
  bottom:15px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 8px 22px rgba(239,68,68,.32);
}
.luna-live i{
  width:7px;height:7px;border-radius:50%;background:#fff;
  animation:lunaPulse 1.2s ease-in-out infinite;
}
@keyframes lunaPulse{50%{opacity:.35;transform:scale(.72)}}
.luna-info{min-width:0}
.luna-station{
  margin-bottom:9px;
  color:var(--secondary);
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.luna-song{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(29px,4vw,48px);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.035em;
  color:#fff;
}
.luna-artist{
  margin-top:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#b9c6d9;
  font-size:17px;
  white-space:nowrap;
}
.luna-eq{
  display:flex;
  align-items:end;
  gap:4px;
  height:32px;
  margin:20px 0 18px;
}
.luna-eq i{
  display:block;
  width:4px;
  height:7px;
  border-radius:99px;
  background:linear-gradient(to top,var(--primary),var(--secondary));
  opacity:.35;
}
.luna-eq.active i{animation:lunaEq .75s ease-in-out infinite alternate;opacity:1}
.luna-eq.active i:nth-child(2n){animation-duration:.55s}
.luna-eq.active i:nth-child(3n){animation-duration:.9s}
.luna-eq.active i:nth-child(4n){animation-duration:.65s}
@keyframes lunaEq{to{height:30px}}
.luna-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.luna-play,
.luna-round{
  border:0;
  cursor:pointer;
  color:#fff;
}
.luna-play{
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#a855f7);
  box-shadow:0 12px 32px color-mix(in srgb,var(--primary) 45%,transparent);
  transition:transform .15s ease,filter .15s ease;
}
.luna-play:hover{transform:scale(1.04);filter:brightness(1.07)}
.luna-play:active{transform:scale(.97)}
.luna-play-icon{
  margin-left:4px;
  font-size:27px;
}
.is-playing .luna-play-icon{margin-left:0;font-size:23px}
.luna-round{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#14243b;
  border:1px solid rgba(255,255,255,.12);
  font-size:17px;
}
.luna-volume-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  max-width:430px;
  margin:18px auto 0;
  color:#8fa0b7;
  font-size:13px;
}
.luna-volume-row input{
  width:100%;
  accent-color:var(--primary);
}
.luna-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:13px;
  color:#8fa0b7;
  font-size:12px;
}
.luna-status-dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.10);
}
.luna-status-dot.error{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.10)}
.luna-notice{
  margin-top:22px;
  padding:13px 15px;
  border:1px solid rgba(245,158,11,.25);
  border-radius:14px;
  background:rgba(146,64,14,.30);
  color:#fed7aa;
  text-align:center;
}
.luna-player.song-changed .luna-song{animation:lunaSong .65s ease}
@keyframes lunaSong{
  0%{opacity:.25;transform:translateY(6px)}
  100%{opacity:1;transform:none}
}

/* Override previous player rules */
.public-v2 .luna-player{
  margin-bottom:12px;
}
.public-v2 .luna-player img{
  box-shadow:none!important;
  border-radius:0!important;
}

/* Mobile */
@media(max-width:620px){
  .luna-player,
  .public-v2 .luna-player{
    display:grid!important;
    grid-template-columns:108px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:center!important;
    padding:15px!important;
    border-radius:22px!important;
    min-height:0!important;
  }
  .luna-cover-ring{
    width:108px;
    padding:4px;
    border-radius:21px;
  }
  .luna-cover-ring:before{inset:-7px;border-radius:25px}
  .luna-cover{border-radius:17px}
  .luna-live{
    right:-3px;
    bottom:4px;
    padding:5px 7px;
    font-size:8px;
  }
  .luna-station{
    margin-bottom:5px;
    font-size:9px;
  }
  .luna-song{
    font-size:20px;
    line-height:1.08;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .luna-artist{
    margin-top:5px;
    font-size:12px;
  }
  .luna-eq{
    height:20px;
    margin:8px 0 7px;
    gap:3px;
  }
  .luna-eq i{width:3px}
  @keyframes lunaEq{to{height:19px}}
  .luna-controls{
    justify-content:flex-start;
    gap:9px;
  }
  .luna-play{
    width:52px;
    height:52px;
  }
  .luna-play-icon{font-size:18px}
  .is-playing .luna-play-icon{font-size:16px}
  .luna-round{
    width:34px;
    height:34px;
    font-size:13px;
  }
  .luna-volume-row{
    grid-column:1/-1;
    margin:11px 0 0;
  }
  .luna-status{
    grid-column:1/-1;
    justify-content:flex-start;
    margin-top:8px;
  }
  .luna-notice{
    grid-column:1/-1;
    margin:9px 0 0;
    padding:9px 10px;
    font-size:11px;
  }
}
@media(max-width:390px){
  .luna-player,
  .public-v2 .luna-player{
    grid-template-columns:92px minmax(0,1fr)!important;
  }
  .luna-cover-ring{width:92px}
  .luna-song{font-size:18px}
}


/* ===== v2.3.1 FIX MENÚ MÓVIL ===== */
@media(max-width:620px){
  body.public-menu-open{
    overflow-x:hidden;
  }

  .public-v2.public-menu-open nav,
  body.public-menu-open nav{
    display:flex !important;
    position:relative;
    z-index:20;
  }

  .public-v2.public-menu-open .mobile-menu-btn,
  body.public-menu-open .mobile-menu-btn{
    background:#7c3aed;
    border-color:rgba(255,255,255,.25);
  }
}


/* =========================================================
   V2.6 - REPRODUCTOR VERTICAL GLASS / ESTILO EMANUEL7
   Clases aisladas para evitar conflictos con versiones previas.
   ========================================================= */
.sky-player{
  position:relative;
  isolation:isolate;
  width:min(100%,560px);
  margin:18px auto 20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:rgba(6,12,28,.82);
  box-shadow:0 24px 58px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.sky-player-glow{
  position:absolute;
  inset:-40px;
  z-index:-2;
  background-position:center;
  background-size:cover;
  opacity:.10;
  filter:blur(38px) saturate(1.35);
  transform:scale(1.08);
}
.sky-player::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 0%,rgba(124,58,237,.22),transparent 38%),
    radial-gradient(circle at 100% 100%,rgba(34,211,238,.10),transparent 32%);
  pointer-events:none;
}
.sky-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(124,58,237,.20),rgba(168,85,247,.06));
}
.sky-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  background:rgba(255,23,68,.16);
  border:1px solid rgba(255,23,68,.34);
}
.sky-live-dot{
  width:9px;height:9px;border-radius:50%;
  background:#ff1744;
  box-shadow:0 0 12px #ff1744;
  animation:skyPulse 1.2s infinite;
}
@keyframes skyPulse{50%{transform:scale(1.35);opacity:.65}}
.sky-station-mini{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d8ccff;
  font-size:12px;
  font-weight:800;
}
.sky-hero{
  padding:28px 24px 24px;
  text-align:center;
}
.sky-logo-wrap{
  position:relative;
  width:220px;
  height:220px;
  margin:0 auto 22px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sky-ring{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.sky-ring-1{
  width:220px;height:220px;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:#a855f7;
  border-right-color:#22d3ee;
  animation:skySpin 10s linear infinite;
}
.sky-ring-2{
  width:250px;height:250px;
  border:2px dashed rgba(255,255,255,.10);
  border-right-color:#7c3aed;
  animation:skySpin 13s linear infinite reverse;
}
.sky-ring-3{
  width:280px;height:280px;
  border:3px solid transparent;
  border-top-color:rgba(255,255,255,.08);
  border-left-color:rgba(34,211,238,.20);
  animation:skySpin 18s linear infinite;
}
@keyframes skySpin{to{transform:rotate(360deg)}}
.sky-cover{
  position:relative;
  z-index:2;
  width:170px;
  height:170px;
  overflow:hidden;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.18);
  background:#0b1322;
  box-shadow:0 0 0 10px rgba(255,255,255,.04),0 0 38px rgba(124,58,237,.32);
}
.sky-cover img{display:block;width:100%;height:100%;object-fit:cover}
.sky-cover-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:78px;color:#fff}
.sky-side-bars{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:8px;align-items:center}
.sky-side-left{left:5px}.sky-side-right{right:5px}
.sky-side-bars i{display:block;width:8px;border-radius:999px;background:linear-gradient(to top,#fff,#a855f7);box-shadow:0 0 14px rgba(168,85,247,.4);animation:skyBars 1s infinite ease-in-out}
.sky-side-bars i:first-child{height:28px}.sky-side-bars i:last-child{height:42px;animation-delay:.3s}
@keyframes skyBars{50%{transform:scaleY(1.22)}}
.sky-name{
  margin:0 0 7px;
  font-size:clamp(28px,7vw,38px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 6px 18px rgba(0,0,0,.28);
}
.sky-subtitle{
  margin:0 auto 18px;
  max-width:38ch;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.45;
}
.sky-now-playing{
  margin:0 0 18px;
  padding:16px 14px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
.sky-now-label{
  margin-bottom:8px;
  color:#d8ccff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
}
.sky-artist{
  color:#fff;
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  overflow-wrap:anywhere;
}
.sky-song{
  margin-top:6px;
  color:#22e8ff;
  font-size:17px;
  line-height:1.32;
  font-weight:700;
  overflow-wrap:anywhere;
}
.sky-eq{
  display:flex;
  justify-content:center!important;
  align-items:end;
  gap:4px;
  height:24px;
  margin:12px 0 0!important;
}
.sky-eq i{width:4px!important;min-height:5px;border-radius:99px;background:linear-gradient(to top,#7c3aed,#22d3ee)!important;opacity:.45}
.sky-eq.active i{opacity:1;animation:lunaEq .75s ease-in-out infinite alternate}
.sky-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin:16px 0 14px;
}
.sky-play,.sky-side-btn{border:0;color:#fff;cursor:pointer}
.sky-play{
  display:grid;
  place-items:center;
  width:78px;
  height:78px;
  border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  box-shadow:0 12px 30px rgba(124,58,237,.36),inset 0 1px 0 rgba(255,255,255,.20);
}
.sky-play span{font-size:26px;line-height:1;margin-left:3px}
.sky-player.is-playing .sky-play span{font-size:22px;margin-left:0}
.sky-side-btn{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11);
  font-size:17px;
}
.sky-volume{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  max-width:360px;
  margin:0 auto;
  padding:11px 13px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.sky-volume input{width:100%;accent-color:#a855f7}
.sky-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:12px;
  color:#a9b8cb;
  font-size:12px;
}
.sky-notice{
  margin:12px auto 0;
  padding:13px 14px;
  border-radius:16px;
  max-width:360px;
  color:#fdebd2;
  background:rgba(146,64,14,.28);
  border:1px solid rgba(245,158,11,.22);
  font-size:13px;
  line-height:1.4;
}
.sky-player.song-changed .sky-song{animation:skySong .6s ease}
@keyframes skySong{0%{opacity:.25;transform:translateY(5px)}100%{opacity:1;transform:none}}

@media(max-width:620px){
  .sky-player{width:calc(100% - 10px);border-radius:24px}
  .sky-topbar{padding:12px 13px}
  .sky-hero{padding:24px 14px 20px}
  .sky-logo-wrap{width:188px;height:188px;margin-bottom:20px}
  .sky-ring-1{width:188px;height:188px}.sky-ring-2{width:214px;height:214px}.sky-ring-3{width:238px;height:238px}
  .sky-cover{width:145px;height:145px}
  .sky-side-bars{display:none}
  .sky-name{font-size:29px}
  .sky-subtitle{font-size:13px}
  .sky-artist{font-size:18px}
  .sky-song{font-size:16px}
  .sky-play{width:70px;height:70px}
  .sky-side-btn{width:42px;height:42px}
  .sky-volume{max-width:100%}
}

/* =========================================================
   V2.7 - FUTURISTIC HUD PLAYER (AISLADO)
   ========================================================= */
.hud-player{
  --hud-cyan:#00f3ff;
  --hud-magenta:#ff00ff;
  position:relative;
  width:min(100%,560px);
  margin:18px auto 22px;
  padding:28px 22px 24px;
  border-radius:26px;
  overflow:hidden;
  text-align:center;
  font-family:'Orbitron',system-ui,sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 50% 28%,rgba(0,243,255,.12),transparent 28%),
    linear-gradient(180deg,rgba(8,11,30,.96),rgba(4,10,25,.98));
  border:1px solid rgba(0,243,255,.24);
  box-shadow:0 0 32px rgba(0,243,255,.10),inset 0 0 28px rgba(255,0,255,.05),0 26px 70px rgba(0,0,0,.40);
}
.hud-player::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:linear-gradient(rgba(0,243,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,243,255,.08) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
}
.hud-head{position:relative;z-index:3;margin-bottom:18px}
.hud-station-name{
  font-weight:900;
  font-size:clamp(25px,7vw,38px);
  letter-spacing:.12em;
  line-height:1.1;
  text-transform:uppercase;
  background:linear-gradient(90deg,#b23cff,#59a7ff 48%,#00f3ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(0,243,255,.12);
}
.hud-live{display:inline-flex;align-items:center;gap:9px;margin-top:11px;color:var(--hud-cyan);font-size:14px;font-weight:700;letter-spacing:.08em}
.hud-live span{width:11px;height:11px;border-radius:50%;background:var(--hud-cyan);box-shadow:0 0 15px var(--hud-cyan);animation:hudPulse 1.15s infinite}
.hud-stage{position:relative;width:260px;height:260px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;z-index:2}
.hud-ring{position:absolute;border-radius:50%;border:2px solid transparent;opacity:.42;transition:.35s}
.hud-ring-1{width:252px;height:252px;border-top:3px solid var(--hud-magenta);border-bottom:1px solid var(--hud-magenta);box-shadow:0 0 14px rgba(255,0,255,.55),inset 0 0 9px rgba(255,0,255,.22)}
.hud-ring-2{width:226px;height:226px;border-left:3px solid var(--hud-cyan);border-right:3px dashed var(--hud-cyan);box-shadow:0 0 14px rgba(0,243,255,.48)}
.hud-ring-3{width:202px;height:202px;border:2px dashed rgba(255,255,255,.28)}
.hud-cover-shell{width:180px;height:180px;border-radius:50%;padding:6px;background:linear-gradient(135deg,rgba(0,243,255,.75),rgba(255,0,255,.7));box-shadow:0 0 28px rgba(0,243,255,.18);z-index:4}
.hud-cover{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#07111d;border:3px solid #050508;color:#fff;font-size:68px;box-shadow:0 0 0 7px rgba(255,255,255,.03),0 0 24px rgba(0,0,0,.75);transition:transform .22s}
.hud-display{position:relative;z-index:2;overflow:hidden;margin:0 auto 22px;padding:17px 15px;border-radius:14px;background:rgba(0,0,0,.44);border:1px solid rgba(0,243,255,.75);box-shadow:inset 0 0 14px rgba(0,243,255,.13),0 0 16px rgba(0,243,255,.06)}
.hud-display::after{content:"";position:absolute;left:0;top:-25%;width:100%;height:20%;background:linear-gradient(to bottom,transparent,rgba(0,243,255,.26),transparent);animation:hudScan 3.2s linear infinite}
.hud-label{margin-bottom:8px;color:#d8ccff;font-size:10px;font-weight:700;letter-spacing:.18em}
.hud-title{font-size:clamp(18px,5vw,25px);line-height:1.18;font-weight:900;color:var(--hud-cyan);text-shadow:0 0 7px rgba(0,243,255,.60);text-transform:uppercase;overflow-wrap:anywhere}
.hud-artist{margin-top:8px;color:var(--hud-magenta);font-size:clamp(12px,3.5vw,16px);font-weight:700;letter-spacing:.08em;overflow-wrap:anywhere}
.hud-controls{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:20px;margin:10px 0 16px}
.hud-play-btn{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;border:2px solid var(--hud-cyan);background:rgba(0,243,255,.05);color:var(--hud-cyan);cursor:pointer;box-shadow:0 0 18px rgba(0,243,255,.28),inset 0 0 12px rgba(0,243,255,.16);transition:.25s}
.hud-play-btn:hover{transform:scale(1.06);background:rgba(0,243,255,.10);box-shadow:0 0 28px rgba(0,243,255,.48),inset 0 0 16px rgba(0,243,255,.25)}
.hud-play-btn svg{position:absolute;width:29px;height:29px;fill:currentColor}.hud-pause-icon{display:none}.hud-play-icon{margin-left:4px}
.hud-player.playing .hud-play-icon{display:none}.hud-player.playing .hud-pause-icon{display:block}
.hud-icon-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:18px;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,.20)}
.hud-volume{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:0 auto 13px;padding:10px 13px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.hud-volume input{width:100%;accent-color:#a855f7}
.hud-status{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;color:#a9bad0;font-size:12px}.hud-status>span{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.55)}.hud-status>span.error{background:#ef4444;box-shadow:0 0 12px rgba(239,68,68,.45)}.hud-status>span.idle{background:#64748b;box-shadow:none}
.hud-warning{position:relative;z-index:2;padding:14px;border-radius:14px;background:rgba(146,64,14,.30);border:1px solid rgba(245,158,11,.25);color:#fed7aa}
.hud-player.playing .hud-ring-1{opacity:1;animation:hudRotateRight 4s linear infinite,hudGlow 1.5s alternate infinite}.hud-player.playing .hud-ring-2{opacity:1;animation:hudRotateLeft 3s linear infinite,hudGlow 1s alternate infinite}.hud-player.playing .hud-ring-3{opacity:.8;animation:hudRotateRight 10s linear infinite}.hud-player.playing .hud-cover{transform:scale(1.035);animation:hudBass .8s infinite alternate}
@keyframes hudRotateRight{to{transform:rotate(360deg)}}@keyframes hudRotateLeft{to{transform:rotate(-360deg)}}@keyframes hudGlow{to{filter:brightness(1.5)}}@keyframes hudBass{from{transform:scale(1.02)}to{transform:scale(1.045)}}@keyframes hudScan{from{top:-20%}to{top:120%}}@keyframes hudPulse{50%{transform:scale(1.35);opacity:.65}}
@media(max-width:620px){.hud-player{width:calc(100% - 18px);padding:24px 15px 20px;border-radius:22px}.hud-stage{width:230px;height:230px}.hud-ring-1{width:224px;height:224px}.hud-ring-2{width:201px;height:201px}.hud-ring-3{width:180px;height:180px}.hud-cover-shell{width:160px;height:160px}.hud-controls{gap:16px}.hud-play-btn{width:72px;height:72px}.hud-icon-btn{width:44px;height:44px}.hud-display{padding:15px 12px}}
@media(max-width:380px){.hud-stage{width:205px;height:205px}.hud-ring-1{width:200px;height:200px}.hud-ring-2{width:180px;height:180px}.hud-ring-3{width:162px;height:162px}.hud-cover-shell{width:145px;height:145px}}