/* Radio Hualla 98.9 FM (Hualla, Víctor Fajardo, Ayacucho) — identidad propia.
   Huayno y folklore ayacuchano: el reproductor es un RETABLO ayacuchano (techo a dos aguas, puertas pintadas
   con flores que abren y traen dos vúmetros de aguja), cuerdas de charango que vibran con la música y la faja
   tejida de rombos. Colores del logo: rojo, negro, blanco y el naranja del charango. Letra: Bungee (como «HUALLA»). */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

:root{--titulos:'Bungee',system-ui,sans-serif;--crema:#fff6ea;--tinta:#140b07}

/* Escenario: rojo Hualla con rombos tejidos muy suaves y una faja andina abajo */
.escenario{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.10) 0 2px,transparent 2px 22px),
    radial-gradient(120% 85% at 50% 10%,color-mix(in srgb,var(--principal) 92%,#ff6a3d),color-mix(in srgb,var(--principal) 38%,var(--tinta)) 75%);
}
.escenario-fondo{opacity:.25}
.faja{position:absolute;left:0;right:0;bottom:34px;height:18px;z-index:1;opacity:.55;pointer-events:none;
  background:
    linear-gradient(45deg,transparent 33%,var(--dorado) 33% 40%,transparent 40% 60%,var(--dorado) 60% 67%,transparent 67%) 0 0/18px 18px,
    linear-gradient(-45deg,transparent 33%,var(--crema) 33% 40%,transparent 40% 60%,var(--crema) 60% 67%,transparent 67%) 0 0/18px 18px,
    linear-gradient(var(--tinta),var(--tinta));
  border-block:3px solid var(--crema)}

/* Cuerdas de charango y pulso */
.viz-cuerdas{top:30%;height:40%;opacity:.42;mix-blend-mode:screen}
.viz-pulso{bottom:0;height:90px;opacity:.35}
.oxi-sonando .viz-cuerdas{opacity:.6}

/* ---------- Retablo ---------- */
.retablo{position:relative;width:min(74vw,290px);margin:34px 0 18px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.45))}
.techo{display:block;height:64px;margin:0 6%;background:var(--tinta);clip-path:polygon(50% 0,100% 100%,0 100%);position:relative}
.techo i{position:absolute;inset:7px 9px 0;clip-path:polygon(50% 0,100% 100%,0 100%);
  background:
    radial-gradient(circle at 50% 62%,var(--dorado) 0 5px,var(--principal) 5px 10px,transparent 11px),
    radial-gradient(circle at 30% 82%,var(--principal) 0 4px,transparent 5px),
    radial-gradient(circle at 70% 82%,var(--principal) 0 4px,transparent 5px),
    var(--crema)}
.caja{position:relative;display:grid;grid-template-columns:24% 1fr 24%;background:var(--tinta);padding:6px;border-radius:4px 4px 10px 10px}
.nicho{position:relative;aspect-ratio:1;border-radius:6px;padding:8%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#fff,var(--crema) 60%,color-mix(in srgb,var(--crema) 80%,var(--dorado)));
  box-shadow:inset 0 0 0 4px var(--principal),inset 0 0 0 7px var(--crema),inset 0 6px 18px rgba(0,0,0,.25)}
.nicho img{width:100%;height:100%;object-fit:contain;transition:transform .12s}
.nicho img[src^="http"]{object-fit:cover;border-radius:6px}
.oxi-sonando .nicho img{transform:scale(calc(1 + var(--bajo,0) * .05))}

/* Puertas pintadas, abiertas hacia afuera; cada una con un vúmetro de aguja */
.puerta{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:
    radial-gradient(circle at 50% 84%,var(--principal) 0 5px,var(--dorado) 5px 7px,transparent 8px),
    radial-gradient(circle at 25% 12%,var(--principal) 0 3px,transparent 4px),
    radial-gradient(circle at 75% 12%,var(--dorado) 0 3px,transparent 4px),
    var(--crema);
  border:3px solid var(--principal);border-radius:4px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.puerta.izq{transform-origin:100% 50%;transform:perspective(600px) rotateY(28deg)}
.puerta.der{transform-origin:0 50%;transform:perspective(600px) rotateY(-28deg)}
.oxi-sonando .puerta.izq{transform:perspective(600px) rotateY(14deg)}
.oxi-sonando .puerta.der{transform:perspective(600px) rotateY(-14deg)}
.puerta b{font:400 .75rem var(--titulos);color:var(--principal)}
.dial{position:relative;width:84%;aspect-ratio:2/1.15;overflow:hidden;border-radius:999px 999px 6px 6px;
  background:
    repeating-conic-gradient(from -60deg at 50% 100%,var(--tinta) 0 1.2deg,transparent 1.2deg 12deg) 0 0/100% 100% no-repeat,
    conic-gradient(from -60deg at 50% 100%,transparent 0 92deg,var(--principal) 92deg 120deg,transparent 120deg),
    #fffdf7;
  box-shadow:inset 0 0 0 2px var(--tinta)}
.dial::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--tinta)}
.dial i{position:absolute;left:50%;bottom:0;width:2px;height:88%;margin-left:-1px;background:var(--principal);transform-origin:50% 100%;
  transform:rotate(-55deg);transition:transform .08s linear}
.izq .dial i{transform:rotate(calc(-55deg + var(--izq,0) * 110deg))}
.der .dial i{transform:rotate(calc(-55deg + var(--der,0) * 110deg))}

/* Base del retablo: flores que laten con los bajos */
.flores{display:flex;justify-content:space-around;margin:-4px 4% 0;padding:8px 6px 6px;background:var(--tinta);border-radius:0 0 12px 12px}
.flores i{width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle,var(--dorado) 0 22%,transparent 24%),
    conic-gradient(var(--principal) 0 25%,var(--crema) 0 50%,var(--principal) 0 75%,var(--crema) 0);
  -webkit-mask:radial-gradient(circle,#000 62%,transparent 64%);mask:radial-gradient(circle,#000 62%,transparent 64%)}
.oxi-sonando .flores i{transform:scale(calc(.85 + var(--bajo,0) * .45)) rotate(calc(var(--nivel,0) * 90deg))}
.flores i:nth-child(even){background:radial-gradient(circle,var(--principal) 0 22%,transparent 24%),
  conic-gradient(var(--dorado) 0 25%,var(--crema) 0 50%,var(--dorado) 0 75%,var(--crema) 0)}

/* Textos y botones con el rojo, negro y blanco del logo */
.sello{background:var(--tinta);border:2px solid var(--crema);font-family:var(--titulos);font-weight:400;letter-spacing:.04em}
.cancion{font-size:clamp(1.45rem,6.4vw,2.2rem);font-weight:400;letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.artista{font-weight:700}
.play{background:var(--principal);color:#fff;border:5px solid var(--crema);
  box-shadow:0 0 0 5px var(--tinta),0 14px 34px rgba(0,0,0,.45),0 0 calc(10px + var(--nivel,0) * 40px) color-mix(in srgb,var(--acento) 70%,transparent)}
.play:hover{background:color-mix(in srgb,var(--principal) 85%,#fff)}
.girando{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.barra-vol span{background:var(--crema)}
.al-aire{background:var(--crema);color:var(--principal)}
.mini{background:linear-gradient(90deg,var(--tinta),color-mix(in srgb,var(--principal) 70%,var(--tinta)));border:2px solid color-mix(in srgb,var(--crema) 50%,transparent)}
.mini .play{border-width:3px;box-shadow:0 0 0 3px var(--tinta)}

/* Bloques: títulos con Bungee y una raya tejida bajo cada título */
.bloque h2{font-weight:400;font-size:1.25rem;letter-spacing:.02em;flex-wrap:wrap}
.bloque h2::after{content:"";flex-basis:100%;height:6px;margin-top:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--principal) 0 33%,var(--dorado) 33% 66%,var(--principal) 66%) 0 0/36px 6px;max-width:120px}
.lista-temas li::before{font-weight:400;color:var(--principal)}
:root[data-tema="noche"] .lista-temas li::before{color:var(--dorado)}
@media (prefers-color-scheme:dark){:root:not([data-tema="dia"]) .lista-temas li::before{color:var(--dorado)}}
.boton{background:var(--principal);color:#fff}

@media (min-width:760px){
  .retablo{width:320px;margin:30px 40px}
  .techo{height:78px}
  .faja{bottom:70px}
  .viz-pulso{height:130px}
}