/* Radio Stylos 105.9 · identidad propia: equipo de sonido azul de los 2000 (minicomponente).
   Variado: música y entrevistas. Azul rey de su esfera, rojo de su 105.9, pantalla LCD celeste y vúmetros de aguja. */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@1,800&family=Orbitron:wght@700&display=swap');

:root{
  --titulos:'Exo 2',system-ui,sans-serif;
  --lcd:#1ec8ff;
  --radio:16px;
  --brillo:linear-gradient(180deg,#5a7bff,var(--principal));
  --tarjeta:#0d1440;
}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--tarjeta:#fff;--texto:#0b1240}}
:root[data-tema="dia"]{--tarjeta:#fff;--texto:#0b1240}

/* ===== Escenario ===== */
.escenario{background:radial-gradient(80% 60% at 50% 30%,#2730c9,#0b1060 55%,#040724);padding-bottom:80px}
.escenario::after{height:60px}
.escenario-fondo{opacity:.18}
.piso{position:absolute;left:-50%;right:-50%;bottom:0;height:45%;transform:perspective(320px) rotateX(62deg);transform-origin:bottom;
  background:linear-gradient(90deg,rgba(30,200,255,.35) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(rgba(30,200,255,.35) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%);
  animation:piso 3s linear infinite paused}
.oxi-sonando .piso{animation-play-state:running}
@keyframes piso{to{background-position:0 48px,0 48px}}
.viz-osc{top:auto;bottom:22%;height:26%;opacity:.35;mix-blend-mode:screen}

/* ===== Equipo ===== */
.equipo{width:min(92vw,400px);margin-top:44px;padding:14px;border-radius:22px;
  background:linear-gradient(180deg,#3a3f52,#15182a 55%,#0b0d18);
  box-shadow:0 24px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 2px #05060c}
.lcd{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto 54px;gap:8px 12px;padding:10px 12px;border-radius:12px;
  background:radial-gradient(120% 140% at 30% 0%,#0e2a66,#061436 70%);box-shadow:inset 0 0 0 2px #000,inset 0 0 24px rgba(30,200,255,.25);
  color:var(--lcd);font-family:'Orbitron',monospace;text-shadow:0 0 8px rgba(30,200,255,.8)}
.lcd-arte{grid-row:1/3;width:64px;height:100%;object-fit:contain;border-radius:8px;background:#000a1f;box-shadow:0 0 0 1px rgba(30,200,255,.4)}
.lcd-arte[src^="http"]{object-fit:cover}
.lcd-dial{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.lcd-frec{font-size:2.3rem;line-height:1;letter-spacing:.04em}
.lcd-chico{font-size:.7rem;opacity:.85}
.lcd-chico i{font-style:normal;padding:0 4px;border:1px solid currentColor;border-radius:3px;margin-left:3px}
.lcd-reloj{align-self:flex-start}
.viz-lcd{width:100%;height:54px;display:block}
.frente{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:14px}
.medidor{padding:5px;border-radius:10px;background:linear-gradient(#5b6075,#1d2030);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.vu{aspect-ratio:200/120;border-radius:6px}
.esfera{position:relative;width:min(26vw,108px);aspect-ratio:1}
.esfera img{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));transition:transform .06s linear}
.oxi-sonando .esfera img{transform:scale(calc(1 + var(--bajo,0) * .07))}
.esfera .ondas i{border-color:var(--lcd)}

/* Vúmetro (pieza vu de OXIRA Player; solo lo que se usa, en vez de piezas.css entero) */
.pz-vu{--vu-fondo:#bfe9ff;--vu-tinta:#06204a;--vu-rojo:#e0263a;--vu-aguja:#e0263a;--vu-eje:#06204a;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 20%,#fff,var(--vu-fondo) 70%);box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 14px rgba(30,200,255,.35)}
.pz-vu-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pz-vu-escala{stroke:var(--vu-tinta);stroke-width:1.6}
.pz-vu-rojo{stroke:var(--vu-rojo);stroke-width:5}
.pz-vu-marca{stroke:var(--vu-tinta);stroke-width:1.6}.pz-vu-marca.rojo{stroke:var(--vu-rojo)}.pz-vu-marca.chica{stroke-width:1}
.pz-vu-num{fill:var(--vu-tinta);font:bold 11px Arial}.pz-vu-num.rojo{fill:var(--vu-rojo)}
.pz-vu-rotulo{fill:var(--vu-tinta);font:bold 14px Arial;letter-spacing:1px}
.pz-vu-signo{fill:var(--vu-tinta);font:bold 18px Arial}.pz-vu-signo.rojo{fill:var(--vu-rojo)}
.pz-vu-marca-txt{fill:var(--vu-rojo);font:bold italic 9px Arial}
.pz-vu-aguja{transform-box:view-box;transform-origin:100px 135px;transition:transform .08s linear}
.pz-vu-aguja line{stroke:var(--vu-aguja);stroke-width:2;stroke-linecap:round}
.pz-vu-eje{fill:var(--vu-eje)}

/* ===== Mando ===== */
.sello{background:rgba(224,38,58,.15);border-color:var(--dorado);font-family:'Orbitron',monospace;font-size:.75rem;letter-spacing:.12em}
.cancion{font-style:italic;font-weight:800;font-size:clamp(1.6rem,7vw,2.5rem);text-transform:uppercase;letter-spacing:-.01em;
  color:#fff;text-shadow:0 0 18px rgba(59,91,255,.9),2px 2px 0 var(--dorado);padding:2px 4px}
.artista{color:#bcd0ff}
/* play: botón cromado con aro de luz roja */
.play{width:96px;height:96px;color:#fff;background:radial-gradient(circle at 50% 35%,#4c6bff,var(--principal) 60%,#0a0f6b);
  box-shadow:0 0 0 6px #c7ccd8,0 0 0 8px #6b7080,0 0 0 11px var(--dorado),0 0 28px 10px color-mix(in srgb,var(--dorado) 45%,transparent),inset 0 -6px 10px rgba(0,0,0,.4)}
.oxi-detenido .play{box-shadow:0 0 0 6px #c7ccd8,0 0 0 8px #6b7080,0 0 0 11px #4b1820,inset 0 -6px 10px rgba(0,0,0,.4)}
.play .girando{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.controles{gap:26px}
.play-chico{width:48px;height:48px;box-shadow:0 0 0 3px #c7ccd8,0 0 0 5px var(--dorado)}
.barra-vol::before{height:8px;background:#05081f;box-shadow:inset 0 1px 3px #000}
.barra-vol span{height:8px;background:linear-gradient(90deg,var(--lcd),#7fe7ff)}
.barra-vol span::after{width:12px;height:22px;top:-7px;border-radius:3px;background:linear-gradient(#f4f5f8,#9aa0b0)}

@media (min-width:760px){
  .escenario{padding:96px 32px 120px}
  .equipo{width:410px;margin:20px}
}

/* ===== Bloques ===== */
.bloque h2{font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.3rem}
.bloque h2 .ic{color:var(--dorado)}
.boton-wa{border-radius:14px;font-family:var(--titulos);font-style:italic;font-weight:800;text-transform:uppercase}
.boton{color:#fff}
.lista-temas li{border-radius:12px;box-shadow:inset 3px 0 0 var(--acento)}
.lista-temas li::before{font-family:'Orbitron',monospace;font-size:1rem;color:var(--acento)}
.red{border-radius:50%}
.mini{background:linear-gradient(180deg,#2a2f44,#0d1022);border-radius:16px;box-shadow:0 0 0 1px #000,0 0 18px rgba(30,200,255,.3)}
.mini img{object-fit:contain;background:#061436}
@media (min-width:900px){
  .contenido .bloque{box-shadow:inset 0 0 0 1px var(--linea),inset 0 3px 0 var(--acento)}
}