/* Radio Frecuencia Viva (Huasahuasi, Tarma) · identidad propia: campo andino moderno.
   Huayno, música del centro y noticias. Andenes, chacras de papa con su flor lila, sol de la sierra y una radio de campo con dial. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&display=swap');

:root{
  --titulos:'Fredoka',system-ui,sans-serif;
  --flor:#b48ce8;
  --tierra:#7a5230;
  --radio:24px;
  --brillo:linear-gradient(160deg,#5cc04a,var(--acento) 45%,var(--principal));
  /* cielo y cerros de noche */
  --cielo-a:#081428;--cielo-b:#1d3b5c;--astro:#f3ecd2;--astro-luz:rgba(243,236,210,.1);
  --c1:#16304a;--c2:#1c4a2a;--c2b:#173d23;--c3:#256b34;--c3b:#1f5a2c;
  --tinta:#f4f8ee;--tinta-suave:rgba(244,248,238,.75);
  --tarjeta:#13261a;
}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){
  --cielo-a:#62b6ea;--cielo-b:#fde7b5;--astro:#ffd23a;--astro-luz:rgba(255,210,58,.5);
  --c1:#7f9fb4;--c2:#4f9a3e;--c2b:#3f8432;--c3:#2f7f33;--c3b:#256a2a;
  --tinta:#10301a;--tinta-suave:rgba(16,48,26,.75);--tarjeta:#fff;--texto:#1d2a17}}
:root[data-tema="dia"]{
  --cielo-a:#62b6ea;--cielo-b:#fde7b5;--astro:#ffd23a;--astro-luz:rgba(255,210,58,.5);
  --c1:#7f9fb4;--c2:#4f9a3e;--c2b:#3f8432;--c3:#2f7f33;--c3b:#256a2a;
  --tinta:#10301a;--tinta-suave:rgba(16,48,26,.75);--tarjeta:#fff;--texto:#1d2a17}

/* ===== Escenario: cielo + cerros ===== */
.escenario{background:linear-gradient(180deg,var(--cielo-a),var(--cielo-b) 62%);color:var(--tinta);padding-bottom:150px}
.escenario::after{height:40px;background:linear-gradient(transparent,var(--fondo))}
.barra{color:var(--tinta)}
.astro{position:absolute;left:50%;top:40px;width:46px;height:46px;border-radius:50%;background:var(--astro);
  box-shadow:0 0 0 calc(10px + var(--bajo,0) * 26px) var(--astro-luz),0 0 40px 6px var(--astro-luz);transition:box-shadow .08s}
.viz canvas{left:0;width:100%}
.viz-viento{top:22%;height:26%;opacity:.35}
.andenes{position:absolute;left:0;bottom:0;width:100%;height:46%;display:block}
.andenes .c1{fill:var(--c1)}.andenes .c2{fill:var(--c2)}.andenes .c2b{fill:var(--c2b)}.andenes .c3{fill:var(--c3)}.andenes .c3b{fill:var(--c3b)}
.viz-chacra{bottom:0;height:96px;opacity:.9;-webkit-mask:linear-gradient(transparent,#000 35%);mask:linear-gradient(transparent,#000 35%)}
.oxi-detenido .viz-chacra{opacity:.6}

/* ===== Radio de campo ===== */
.radio-campo{position:relative;width:min(80vw,300px);margin:48px 0 6px;padding:16px 16px 12px;border-radius:30px;
  background:linear-gradient(180deg,#f6f1e2,#e3dac2);color:#24331f;
  box-shadow:0 22px 40px rgba(0,0,0,.35),inset 0 -6px 0 rgba(0,0,0,.08),inset 0 0 0 3px #fff}
.antena{position:absolute;right:38px;top:-58px;width:4px;height:70px;border-radius:2px;background:linear-gradient(#ddd,#888);transform:rotate(18deg);transform-origin:bottom}
.antena::before{content:"";position:absolute;top:-6px;left:-3px;width:10px;height:10px;border-radius:50%;background:#bbb}
.dial{position:relative;display:flex;justify-content:space-between;padding:6px 12px 14px;border-radius:12px;font:700 .72rem var(--titulos);color:#e8f5d0;
  background:linear-gradient(#15301c,#1f4428);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
  background-image:linear-gradient(#15301c,#1f4428),repeating-linear-gradient(90deg,#9bd36a 0 1px,transparent 1px 10px)}
.dial::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:6px;
  background:repeating-linear-gradient(90deg,rgba(155,211,106,.8) 0 1px,transparent 1px 8px)}
.aguja{position:absolute;top:3px;bottom:3px;left:calc(12px + (100% - 24px) * .705);width:3px;border-radius:2px;background:#ff4a2e;box-shadow:0 0 8px #ff4a2e;
  transform:translateX(calc((var(--nivel,0) - .3) * 6px))}
.radio-cara{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:center;margin-top:12px}
.visor{aspect-ratio:1;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff,#eef3e6);display:grid;place-items:center;
  box-shadow:inset 0 0 0 3px var(--acento),0 4px 0 rgba(0,0,0,.12)}
.visor img{width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .08s}
.visor img[src^="http"]{object-fit:cover;padding:0}
.oxi-sonando .visor img{transform:scale(calc(1 + var(--bajo,0) * .04))}
.rejilla{height:100%;min-height:120px;border-radius:18px;padding:10px;
  background:radial-gradient(circle,#4d5b45 1.6px,transparent 2px) 0 0/9px 9px,#2a3326;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.viz-rejilla{width:100%;height:100%;display:block}
.frec{display:flex;justify-content:space-between;align-items:center;margin:10px 4px 0;font:700 1.05rem var(--titulos)}
.frec b{color:var(--principal)}
.frec span{word-spacing:.2em;font-size:.75rem;padding:3px 10px;border-radius:999px;background:var(--principal);color:#fff}

/* ===== Mando ===== */
.sello{background:color-mix(in srgb,var(--tinta) 12%,transparent);border-color:transparent;font:600 .9rem var(--titulos);letter-spacing:.02em;color:var(--tinta)}
.cancion{font-weight:700;font-size:clamp(1.7rem,7vw,2.6rem);color:var(--tinta);text-shadow:0 2px 12px color-mix(in srgb,var(--cielo-a) 60%,transparent)}
.artista{color:var(--tinta-suave);font-weight:600}
/* play con forma de hoja */
.play{width:94px;height:94px;border-radius:50% 50% 50% 14%;color:#fff;box-shadow:0 10px 26px rgba(20,80,31,.45),inset 0 -5px 0 rgba(0,0,0,.18)}
.play .girando{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.play-chico{width:50px;height:50px}
.volumen .boton-redondo{background:color-mix(in srgb,var(--tinta) 14%,transparent);color:var(--tinta)}
.barra-vol::before{background:color-mix(in srgb,var(--tinta) 22%,transparent)}
.barra-vol span{background:linear-gradient(90deg,var(--acento),var(--dorado))}
.datos{color:var(--tinta-suave)}
.aviso{background:rgba(0,0,0,.45);color:#fff}
.barra .boton-chico,.barra .boton-redondo{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 14%,transparent)}
.marca img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}

@media (min-width:760px){
  .escenario{padding:100px 32px 190px}
  .radio-campo{width:320px;margin:30px}
  .viz-chacra{height:130px}
  .astro{left:auto;right:8%;top:90px;width:90px;height:90px}
}

/* ===== Bloques: flor de papa y surcos ===== */
.bloque h2{font-weight:700}
.bloque h2 .ic{color:var(--flor)}
.bloque h2::before{content:"";width:22px;height:22px;flex:none;order:-1;
  background:radial-gradient(circle,var(--dorado) 22%,transparent 24%),
  conic-gradient(from 0deg,var(--flor) 0 14%,transparent 0 20%,var(--flor) 0 34%,transparent 0 40%,var(--flor) 0 54%,transparent 0 60%,var(--flor) 0 74%,transparent 0 80%,var(--flor) 0 94%,transparent 0);
  border-radius:50%}
.bloque h2 .ic{display:none}
.boton-wa{border-radius:20px 20px 20px 6px;font-family:var(--titulos);font-weight:700}
.boton-wa.claro{border-radius:20px 20px 6px 20px}
.boton{color:#fff}
.lista-temas li{border-radius:16px;position:relative;overflow:hidden}
.lista-temas li::before{color:var(--acento)}
.lista-temas li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,var(--tierra) 0 10px,transparent 10px 16px);opacity:.5}
.mini{background:linear-gradient(90deg,var(--principal),#14421d);border-radius:22px}
.mini img{background:#fff;object-fit:contain}
@media (min-width:900px){
  .contenido .bloque{box-shadow:inset 0 0 0 1px var(--linea),inset 0 -5px 0 color-mix(in srgb,var(--acento) 55%,transparent)}
}

/* Fondo real: el valle de Huasahuasi (foto de su web) bajo el cielo, para que se vea su tierra y su gente */
.escenario{background:linear-gradient(180deg,color-mix(in srgb,var(--cielo-a) 72%,transparent),color-mix(in srgb,var(--cielo-b) 80%,transparent) 62%),
  url(../img/fotos/huasahuasi.webp) center 35%/cover no-repeat}