/* Radio Sembrador 101.9 FM (Yanahuanca, Pasco) — identidad propia.
   Radio campesina y cultural de la quebrada de Chaupihuaranga (folklore andino): amanecer en el campo.
   El logo va en un sello dentado verde (como su escudo) delante de un sol que gira; abajo los cerros respiran
   con la música (espectro) y el sembrío crece (barras finas). El play también es un sello dentado, amarillo.
   Colores del logo: verdes, amarillo y celeste. Letra: Bree Serif. */
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

:root{--titulos:'Bree Serif',Georgia,serif;--cielo-a:#5fb7e6;--cielo-b:#bfe6f3;--tierra:#0f4419;--dentado:polygon(50.0% 0.0%,57.0% 5.6%,65.5% 2.4%,70.4% 9.9%,79.4% 9.5%,81.8% 18.2%,90.5% 20.6%,90.1% 29.6%,97.6% 34.5%,94.4% 43.0%,100.0% 50.0%,94.4% 57.0%,97.6% 65.5%,90.1% 70.4%,90.5% 79.4%,81.8% 81.8%,79.4% 90.5%,70.4% 90.1%,65.5% 97.6%,57.0% 94.4%,50.0% 100.0%,43.0% 94.4%,34.5% 97.6%,29.6% 90.1%,20.6% 90.5%,18.2% 81.8%,9.5% 79.4%,9.9% 70.4%,2.4% 65.5%,5.6% 57.0%,0.0% 50.0%,5.6% 43.0%,2.4% 34.5%,9.9% 29.6%,9.5% 20.6%,18.2% 18.2%,20.6% 9.5%,29.6% 9.9%,34.5% 2.4%,43.0% 5.6%);--dentado2:polygon(50.0% 0.0%,59.3% 9.1%,71.7% 5.0%,76.2% 17.2%,89.1% 18.8%,87.8% 31.8%,98.7% 38.9%,92.0% 50.0%,98.7% 61.1%,87.8% 68.2%,89.1% 81.2%,76.2% 82.8%,71.7% 95.0%,59.3% 90.9%,50.0% 100.0%,40.7% 90.9%,28.3% 95.0%,23.8% 82.8%,10.9% 81.2%,12.2% 68.2%,1.3% 61.1%,8.0% 50.0%,1.3% 38.9%,12.2% 31.8%,10.9% 18.8%,23.8% 17.2%,28.3% 5.0%,40.7% 9.1%)}
:root[data-tema="noche"]{--cielo-a:#0b2340;--cielo-b:#1f5a6b}
@media (prefers-color-scheme:dark){:root:not([data-tema="dia"]){--cielo-a:#0b2340;--cielo-b:#1f5a6b}}

/* Cielo: de día celeste, de noche azul de madrugada con estrellas */
.escenario{color:#fff;padding-bottom:120px;background:linear-gradient(var(--cielo-a),var(--cielo-b) 62%,#e9f3c9 78%,var(--tierra) 78.2%)}
:root[data-tema="noche"] .escenario,:root:not([data-tema="dia"]) .escenario{background-image:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff 98%,transparent),radial-gradient(1px 1px at 32% 8%,#fff 98%,transparent),
  radial-gradient(1.5px 1.5px at 66% 14%,#fff 98%,transparent),radial-gradient(1px 1px at 84% 26%,#fff 98%,transparent),
  radial-gradient(1px 1px at 48% 30%,#fff 98%,transparent),
  linear-gradient(var(--cielo-a),var(--cielo-b) 62%,#c9a24a 78%,var(--tierra) 78.2%)}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]) .escenario{background-image:linear-gradient(var(--cielo-a),var(--cielo-b) 62%,#e9f3c9 78%,var(--tierra) 78.2%)}}
:root[data-tema="dia"] .escenario{background-image:linear-gradient(var(--cielo-a),var(--cielo-b) 62%,#e9f3c9 78%,var(--tierra) 78.2%)}
.escenario-fondo{display:none}
.escenario::after{height:60px}

/* Nubes que pasan */
.nube{position:absolute;z-index:1;width:120px;height:34px;border-radius:30px;background:#fff;opacity:.75;pointer-events:none;
  box-shadow:30px -14px 0 4px #fff,64px -4px 0 0 #fff;animation:nube 60s linear infinite}
.n1{top:18%;left:-160px}.n2{top:34%;left:-160px;transform:scale(.7);animation-duration:90s;animation-delay:-40s;opacity:.55}
@keyframes nube{to{left:110%}}
:root[data-tema="noche"] .nube{opacity:.12}
@media (prefers-color-scheme:dark){:root:not([data-tema="dia"]) .nube{opacity:.12}}

/* Cerros y sembrío */
.viz canvas{left:-2%;width:104%}
.viz-cerro-lejos{bottom:70px;height:150px}
.viz-sembrio{bottom:40px;height:90px;opacity:.9}
.viz-cerro-cerca{bottom:0;height:110px}
.viz-sembrio.pc{display:none}

/* ---------- El sol y el sello ---------- */
.sol{position:relative;width:min(62vw,250px);aspect-ratio:1;margin:30px 0 26px;display:grid;place-items:center}
.rayos{position:absolute;inset:-34%;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(color-mix(in srgb,var(--dorado) 75%,transparent) 0 6deg,transparent 6deg 15deg);
  -webkit-mask:radial-gradient(circle closest-side,#000 30%,transparent 100%);mask:radial-gradient(circle closest-side,#000 30%,transparent 100%);
  animation:gira 80s linear infinite;opacity:.8}
.oxi-sonando .rayos{animation-duration:24s;scale:calc(1 + var(--nivel,0) * .12)}
.sol::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle closest-side,#fff7c2,var(--dorado) 60%,transparent);opacity:.85}
.dentado{position:relative;width:100%;height:100%;display:grid;place-items:center;clip-path:var(--dentado);
  background:radial-gradient(circle,#fff 0 58%,var(--dorado) 58% 63%,var(--principal) 63%);transition:transform .15s}
.dentado img{width:74%;height:74%;object-fit:contain}
.dentado img[src^="http"]{object-fit:cover;border-radius:50%}
.oxi-sonando .dentado{transform:scale(calc(1 + var(--bajo,0) * .05)) rotate(calc(var(--nivel,0) * 6deg))}

/* Semillas que caen al sonar */
.semillas i{position:absolute;top:80%;width:7px;height:10px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--dorado);opacity:0}
.oxi-sonando .semillas i{animation:semilla 3s ease-in infinite}
.semillas i:nth-child(1){left:8%}.semillas i:nth-child(2){left:26%;animation-delay:.6s!important}
.semillas i:nth-child(3){left:44%;animation-delay:1.2s!important}.semillas i:nth-child(4){left:60%;animation-delay:1.8s!important}
.semillas i:nth-child(5){left:78%;animation-delay:2.4s!important}.semillas i:nth-child(6){left:92%;animation-delay:.3s!important}
@keyframes semilla{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(90px) rotate(200deg);opacity:0}}

/* Textos sobre el cielo */
.sello{background:var(--principal);border:2px solid var(--dorado);font-family:var(--titulos);font-weight:400}
.cancion{font-weight:400;font-size:clamp(1.7rem,7vw,2.6rem);text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 18px rgba(0,0,0,.25)}
.artista{color:#fff;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.datos{color:#fff}
.volumen .boton-redondo{background:color-mix(in srgb,var(--principal) 80%,transparent)}
.barra-vol::before{background:rgba(255,255,255,.5)}
.barra-vol span{background:var(--dorado)}
.aviso{background:color-mix(in srgb,var(--principal) 85%,transparent)}

/* Play: sello dentado amarillo, como el escudo de la radio */
.play{border-radius:0;clip-path:var(--dentado2);background:radial-gradient(circle,#fff36b,var(--dorado) 70%);color:var(--principal);
  box-shadow:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));width:100px;height:100px}
.oxi-sonando .escenario .play{animation:gira 20s linear infinite}
.oxi-sonando .escenario .play .ic{animation:gira 20s linear infinite reverse}
.girando{border-color:rgba(31,122,42,.25);border-top-color:var(--principal)}
.mini{background:linear-gradient(90deg,var(--principal),#2d7f37);border-top:3px solid var(--dorado)}
.mini .play{width:52px;height:52px}

/* Bloques: verde campo, títulos con Bree Serif y un brote */
.bloque h2{font-weight:400;font-size:1.6rem}
.bloque h2 .ic{color:var(--principal)}
:root[data-tema="noche"] .bloque h2 .ic{color:var(--acento)}
@media (prefers-color-scheme:dark){:root:not([data-tema="dia"]) .bloque h2 .ic{color:var(--acento)}}
.lista-temas li{border-left:5px solid var(--acento)}
.boton{background:var(--principal);color:#fff}
.app-web{border:2px dashed var(--acento);border-radius:var(--radio)}

@media (min-width:760px){
  .escenario{padding-bottom:170px}
  .sol{width:280px;margin:40px 50px}
  .viz-cerro-lejos{bottom:90px;height:200px}
  .viz-sembrio{bottom:50px;height:120px}
  .viz-sembrio.pc{display:block}.viz-sembrio.cel{display:none}
  .viz-cerro-cerca{height:140px}
}