/* Radio San Juan (Llata) · identidad propia: afiche chicha + parlante de fiesta en llamas.
   Cumbia, tropical y folklore. Naranja fuego, amarillo y fucsia fosforescente sobre negro. */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

:root{
  --titulos:'Bungee',system-ui,sans-serif;
  --fucsia:#ff2e88;
  --radio:10px;
  --brillo:linear-gradient(180deg,var(--dorado),var(--acento) 70%,#e64a00);
  --tarjeta:#1d130d;
}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--tarjeta:#fff;--texto:#1b0f07}}
:root[data-tema="dia"]{--tarjeta:#fff;--texto:#1b0f07}

/* Fondo de la página: papel de afiche con grano (SVG en línea, < 1 KB) */
body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
  var(--fondo)}

/* ===== Escenario ===== */
.escenario{background:radial-gradient(90% 70% at 50% 100%,#5a1600,#1a0a04 60%,#0b0604);padding-bottom:84px}
.escenario::after{height:70px}
.escenario-fondo{opacity:.25;filter:blur(40px) saturate(1.6)}
/* franjas de afiche chicha arriba */
.franjas{position:absolute;inset:0 0 auto;height:12px;background:linear-gradient(90deg,var(--fucsia) 0 33%,var(--dorado) 33% 66%,var(--acento) 66%);box-shadow:0 0 18px var(--acento)}
.viz canvas{left:0;width:100%}
.viz-llama,.viz-llama-atras{bottom:0;top:auto;height:30%;mix-blend-mode:screen;filter:blur(1.5px);opacity:.8;
  -webkit-mask:linear-gradient(transparent,#000 55%);mask:linear-gradient(transparent,#000 55%)}
.viz-llama-atras{height:40%;transform:scaleX(-1);opacity:.6;filter:blur(7px)}
.viz-chispas{inset:0;height:100%}
.oxi-detenido .viz-llama,.oxi-detenido .viz-llama-atras{opacity:.3}
/* sin título de canción: el letrero EN VIVO ya lo dice el título grande */
.sin-titulo.oxi-sonando .sello [data-oxi="envivo"]{display:none}

/* ===== Parlante ===== */
.parlante{position:relative;display:grid;justify-items:center;gap:14px;margin:34px 0 0}
.parlante-caja{position:relative;width:min(70vw,270px);aspect-ratio:1;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(145deg,#2b2420,#0f0c0a);
  box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 4px #000,inset 0 0 0 7px var(--acento),inset 0 2px 0 9px rgba(255,255,255,.06);transform:rotate(-2deg)}
.perno{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eee,#666 60%,#222)}
.p1{left:14px;top:14px}.p2{right:14px;top:14px}.p3{left:14px;bottom:14px}.p4{right:14px;bottom:14px}
.parlante-aro{width:86%;aspect-ratio:1;border-radius:50%;padding:7%;
  background:radial-gradient(circle closest-side,#1a1a1a 80%,#3a3a3a 88%,#0c0c0c 96%,var(--acento) 97%);
  box-shadow:0 0 0 3px #000,0 0 30px color-mix(in srgb,var(--acento) 45%,transparent)}
.parlante-cono{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:repeating-radial-gradient(circle closest-side,#262626 0 3px,#151515 3px 7px);
  box-shadow:inset 0 8px 18px rgba(0,0,0,.8);transition:transform .06s linear}
.parlante-cono img{width:62%;height:62%;border-radius:50%;object-fit:contain;padding:6%;background:radial-gradient(circle at 35% 30%,#ffb057,var(--acento) 45%,#7a2400);
  box-shadow:0 6px 16px rgba(0,0,0,.7),inset 0 0 0 3px #000}
.parlante-cono img[src^="http"]{object-fit:cover;padding:0}
.oxi-sonando .parlante-cono{transform:scale(calc(1 + var(--bajo,0) * .09))}
.oxi-sonando .parlante-cono img{transform:none}
.parlante .ondas{position:absolute;inset:7%;border-radius:50%}
.ondas i{border:3px solid var(--dorado)}
@keyframes onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.viz-luces{width:min(70vw,270px);height:46px}

/* ===== Mando ===== */
.sello{gap:0;padding:0;border:0;background:none;border-radius:0;font:400 1rem var(--titulos);letter-spacing:.02em;transform:rotate(-2deg)}
.sello b{font-weight:400;padding:6px 12px;background:var(--dorado);color:#1b0f07;box-shadow:4px 4px 0 var(--fucsia)}
.sello [data-oxi="envivo"]{padding:6px 10px;background:#000;color:#fff;margin-left:6px}
.sello .punto{margin-right:8px}
.cancion{font-size:clamp(1.6rem,7vw,2.5rem);font-weight:400;color:var(--dorado);text-shadow:3px 3px 0 var(--fucsia),0 0 24px color-mix(in srgb,var(--acento) 60%,transparent);margin-top:6px;padding:4px 0}
.artista{font-size:1.1rem;font-weight:700;color:#ffd9b8}
.play{width:96px;height:96px;border-radius:24px;transform:rotate(-3deg);color:#1b0f07;box-shadow:6px 6px 0 var(--fucsia),0 0 40px color-mix(in srgb,var(--acento) 55%,transparent)}
.play:active{transform:rotate(-3deg) scale(.94)}
.oxi-sonando .play{animation:salto .9s ease-in-out infinite}
@keyframes salto{50%{transform:rotate(-3deg) translateY(-3px)}}
.play-chico{width:50px;height:50px;border-radius:14px;box-shadow:3px 3px 0 var(--fucsia);animation:none!important}
.barra-vol span{background:linear-gradient(90deg,var(--acento),var(--dorado))}
.al-aire{color:#1b0f07}

@media (min-width:760px){
  .escenario{padding:96px 32px 120px}
  .parlante{margin:0 30px}
  .parlante-caja,.viz-luces{width:300px}
  .sello{transform-origin:left}
}

/* ===== Bloques: títulos de afiche ===== */
.bloque h2{font-weight:400;font-size:1.35rem;text-transform:uppercase;color:var(--texto)}
.bloque h2 .ic{color:var(--fucsia)}
.bloque h2::after{content:"";flex:1;height:4px;background:linear-gradient(90deg,var(--acento),var(--dorado),transparent);margin-left:4px}
.boton-wa{font-family:var(--titulos);font-weight:400;border-radius:12px;box-shadow:5px 5px 0 #0b4d26}
.boton-wa.claro{box-shadow:inset 0 0 0 3px #25d366,5px 5px 0 #25d366}
.boton{border-radius:10px;box-shadow:4px 4px 0 var(--fucsia);color:#1b0f07}
.lista-temas li{border-radius:10px;border-left:6px solid var(--acento)}
.lista-temas li:nth-child(3n+2){border-left-color:var(--dorado)}
.lista-temas li:nth-child(3n){border-left-color:var(--fucsia)}
.lista-temas li::before{font-weight:400;color:var(--acento)}
.red{border-radius:12px}
.mini{border-radius:14px;background:#140b06;box-shadow:0 0 0 2px var(--acento),0 10px 30px rgba(0,0,0,.5)}
.mini img{background:var(--acento)}
@media (min-width:900px){
  .contenido .bloque{border-radius:12px;box-shadow:inset 0 0 0 1px var(--linea),0 4px 0 var(--acento)}
}
/* Sin Facebook: lo de la radio ocupa todo el ancho (en vez de dejar la columna derecha vacía) */
@media (min-width:900px){
}