/* Radio Alegría (Tarma) · identidad propia: casete de fiesta, letra de cartel, neón magenta/celeste y brochazo amarillo
   (los colores del logo). Cumbia andina, orquestas típicas y huaylarsh del valle: alegre, de fiesta patronal. */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

:root{
  --titulos:'Bungee',system-ui,sans-serif;
  --amarillo:#ffe14d;
  --brillo:linear-gradient(135deg,var(--acento),#b8149a);
  --radio:16px;
}
:root{--tarjeta:color-mix(in srgb,var(--fondo) 80%,#3b1f8a)}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--texto:#1a1145;--tarjeta:#fff}}
:root[data-tema="dia"]{--texto:#1a1145;--tarjeta:#fff}

/* ---------- Escenario: noche de fiesta con trama de puntos ---------- */
.escenario{padding:64px 16px 72px;
  background:
    radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--acento) 45%,transparent),transparent 45%),
    radial-gradient(circle at 85% 70%,color-mix(in srgb,var(--dorado) 40%,transparent),transparent 45%),
    radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.6px) 0 0/14px 14px,
    linear-gradient(160deg,#241463,var(--principal) 55%,#0c0920)}
.escenario-fondo{opacity:.25}
.brocha{position:absolute;left:-10%;right:-10%;top:30%;height:150px;transform:rotate(-8deg);opacity:.9;
  background:linear-gradient(90deg,transparent,var(--amarillo) 12%,#ffc400 60%,transparent 96%);
  clip-path:polygon(0 30%,6% 8%,14% 22%,24% 4%,36% 18%,48% 0,60% 16%,72% 2%,84% 20%,100% 6%,100% 80%,90% 96%,78% 84%,64% 100%,50% 86%,36% 98%,22% 84%,10% 96%,0 78%)}
.oxi-sonando .brocha{transform:rotate(-8deg) scaleY(calc(1 + var(--bajo,0) * .18))}

.viz-neon{top:auto;bottom:0;height:34%;opacity:.55;mix-blend-mode:screen}
.viz-onda{top:22%;height:40%;opacity:.45;mix-blend-mode:screen}
.viz-confeti{top:0;height:100%}
.viz-rayos,.viz-humo,.viz-barras{display:none}

/* ---------- Casete ---------- */
.casete{position:relative;width:min(76vw,310px);margin:18px 0 6px;transform:rotate(-5deg);filter:drop-shadow(10px 12px 0 var(--dorado)) drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.oxi-sonando .casete{transform:rotate(-5deg) scale(calc(1 + var(--bajo,0) * .04))}
.casete-cuerpo{position:relative;aspect-ratio:1.58;border-radius:14px;padding:7% 7% 0;
  background:linear-gradient(180deg,#26262e,#111117);box-shadow:inset 0 0 0 3px #000,inset 0 2px 0 4px rgba(255,255,255,.08)}
.tornillo{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bbb,#444);box-shadow:0 0 0 2px #0a0a0a}
.t1{left:3%;top:4%}.t2{right:3%;top:4%}.t3{left:3%;bottom:5%}.t4{right:3%;bottom:5%}
.casete-etiqueta{position:relative;height:72%;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#fff 0 22%,var(--acento) 22% 30%,var(--dorado) 30% 38%,#fff 38%)}
.etiqueta-logo{position:absolute;left:30%;top:4%;width:40%;height:50%;object-fit:contain;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
/* Carátula del tema como pegatina (solo cuando hay carátula de verdad; si no, el logo ya está en la etiqueta) */
.pegatina{position:absolute;z-index:3;right:-5%;top:-6%;width:30%;height:auto;aspect-ratio:1;object-fit:cover;border:5px solid #fff;border-radius:8px;transform:rotate(9deg);
  box-shadow:4px 6px 0 var(--acento),0 10px 20px rgba(0,0,0,.4)}
.pegatina:not([src^="http"]){display:none}
.cara{position:absolute;left:5%;top:6%;z-index:2;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
  font:1rem var(--titulos);background:#1a1145;color:var(--amarillo)}
.casete-ventana{position:absolute;left:24%;right:24%;top:47%;height:28%;border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;
  background:linear-gradient(180deg,rgba(20,20,30,.92),rgba(40,40,60,.92));box-shadow:inset 0 0 0 3px #000,0 0 0 4px rgba(255,255,255,.85);z-index:2}
.carrete{position:relative;width:28%;aspect-ratio:1;border-radius:50%;background:#3a2a1a;box-shadow:0 0 0 4px #5a3b22}
.carrete.der{box-shadow:0 0 0 1px #5a3b22}
.carrete i{position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle closest-side,#111 0 28%,transparent 30%),repeating-conic-gradient(#f4f4f4 0 14deg,transparent 14deg 60deg);
  box-shadow:0 0 0 2px #f4f4f4}
.oxi-sonando .carrete i{animation:carrete 1.8s linear infinite}
.cinta{flex:1;height:30%;margin:0 4%;background:#5a3b22;border-radius:3px}
.casete-base{position:absolute;left:18%;right:18%;bottom:0;height:16%;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);background:#1d1d24;box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
@keyframes carrete{to{transform:rotate(-1turn)}}

/* ---------- Mando ---------- */
.sello{background:var(--amarillo);color:#1a1145;border:0;transform:skew(-8deg);border-radius:6px;font-family:var(--titulos);font-weight:400;letter-spacing:.04em}
.oxi-sonando .punto{background:var(--acento);box-shadow:0 0 0 0 var(--acento)}
.cancion{font-weight:400;font-size:clamp(1.45rem,6.4vw,2.2rem);text-shadow:3px 3px 0 var(--acento)}
.artista{color:var(--dorado);font-weight:700}
.play{color:#fff;background:var(--acento);border:4px solid #0c0920;border-radius:24px;
  box-shadow:7px 7px 0 var(--dorado),0 0 34px color-mix(in srgb,var(--acento) 60%,transparent)}
.oxi-sonando .play{box-shadow:7px 7px 0 var(--dorado),0 0 calc(20px + var(--nivel,0) * 40px) var(--acento)}
.girando{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.barra-vol span{background:linear-gradient(90deg,var(--dorado),var(--amarillo))}
.volumen .boton-redondo{background:rgba(255,255,255,.12)}
.al-aire{background:var(--dorado);color:#0c0920}

.diales{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 0;padding:0}
.diales li{display:flex;flex-direction:column;align-items:center;min-width:70px;padding:6px 8px;border-radius:12px;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  background:rgba(12,9,32,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:rgba(255,255,255,.85)}
.diales b{font:1.05rem var(--titulos);color:var(--amarillo);line-height:1.15}
.diales li:nth-child(2) b{color:var(--dorado)} .diales li:nth-child(3) b{color:#ff7ac0} .diales li:nth-child(4) b{color:#fff}

@media (min-width:760px){
  .escenario{padding:96px 32px 110px}
  .casete{width:380px;margin:20px}
  .diales{justify-content:flex-start}
  .brocha{top:34%;height:190px}
}

/* ---------- Bloques ---------- */
.bloque h2{font-weight:400;font-size:1.3rem}
.bloque h2 .ic{color:var(--acento)}
.boton-wa{font-weight:400;border:3px solid #0c0920;box-shadow:5px 5px 0 var(--acento)}
.boton-wa.claro{box-shadow:inset 0 0 0 3px #25d366,5px 5px 0 var(--dorado);border:0}
.lista-temas li::before{font-weight:400;color:var(--acento)}
.lista-temas li:nth-child(even)::before{color:var(--dorado)}
.boton{background:var(--acento);color:#fff}
.datos-contacto .ic{color:var(--acento)}
.pie b{font-family:var(--titulos);font-weight:400}
.mini{background:#1a1145;box-shadow:0 0 0 2px var(--acento),0 10px 30px rgba(0,0,0,.4)}
.mini .play-chico{border-width:3px;border-radius:14px;box-shadow:3px 3px 0 var(--dorado)}
.mini img{background:#fff;object-fit:contain}
.mini img[src^="http"]{object-fit:cover}
@media (min-width:900px){
  .contenido .bloque{box-shadow:inset 0 0 0 1px var(--linea),6px 6px 0 color-mix(in srgb,var(--acento) 35%,transparent)}
  .contenido>.wa{box-shadow:none}
}