/* Radio Tarikay 95.1 FM · «La radio de la identidad huamaliana». Identidad: radio de mesa de madera (dial ámbar
   con la aguja en 95.1, ojo mágico verde, perillas de madera y tela tejida en rojo, verde y amarillo) delante de los
   cerros de Huamalíes: la cordillera crece con la música, el río corre al pie, sol de día y estrellas de noche.
   Faja tejida como borde. Letra Lilita One (gruesa como su logo). */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

:root{
  --titulos:'Lilita One',system-ui,sans-serif;
  --verde:var(--principal);--rojo:var(--acento);--amarillo:var(--dorado);
  --madera:linear-gradient(180deg,#8a4a1f,#5e2f12 40%,#7a3f18 70%,#4a230c);
  --brillo:linear-gradient(180deg,#ff3a3a,var(--acento) 60%,#a8070f);
  --cielo-1:#0b1430;--cielo-2:#20356b;--cielo-3:#5a4a6e;--texto-esc:#fffaf0;
  --tejido:
    linear-gradient(135deg,var(--rojo) 25%,transparent 25%) -9px 0/18px 18px,
    linear-gradient(225deg,var(--rojo) 25%,transparent 25%) -9px 0/18px 18px,
    linear-gradient(315deg,var(--rojo) 25%,transparent 25%) 0 0/18px 18px,
    linear-gradient(45deg,var(--rojo) 25%,transparent 25%) 0 0/18px 18px,
    var(--amarillo);
}
/* Día: cielo de la mañana en la sierra */
:root[data-tema="dia"]{--cielo-1:#3f8fd8;--cielo-2:#8cc8f0;--cielo-3:#f6dfa8}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--cielo-1:#3f8fd8;--cielo-2:#8cc8f0;--cielo-3:#f6dfa8}}

.bloque h2{font-weight:400}
.lista-temas li::before,.programas time{font-weight:400}
.boton{color:#fff}
.dias button[aria-selected="true"]{color:#fff}

/* ---------- Paisaje ---------- */
.escenario{background:linear-gradient(180deg,var(--cielo-1),var(--cielo-2) 45%,var(--cielo-3) 70%,var(--verde));padding-bottom:84px}
.escenario::after{display:none}
.paisaje{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.astro{position:absolute;right:-12px;top:150px;width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffbe8,#f3e6b8 60%,#d9c98e);box-shadow:0 0 30px rgba(255,250,220,.5)}
:root[data-tema="dia"] .astro{background:radial-gradient(circle,#fff6b0,#ffd23f 60%,#ffb300);box-shadow:0 0 calc(30px + var(--bajo,0) * 60px) #ffd23f}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]) .astro{background:radial-gradient(circle,#fff6b0,#ffd23f 60%,#ffb300);box-shadow:0 0 calc(30px + var(--bajo,0) * 60px) #ffd23f}}
.estrellas{position:absolute;inset:0 0 50%;opacity:.8;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 25% 60%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 40% 15%,#fff,transparent),radial-gradient(1px 1px at 55% 45%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 70% 70%,#fff,transparent),radial-gradient(1px 1px at 85% 30%,#fff,transparent),
    radial-gradient(1px 1px at 92% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 5% 85%,#fff,transparent)}
:root[data-tema="dia"] .estrellas{display:none}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]) .estrellas{display:none}}
.cerro{position:absolute;left:-5%;right:-5%;bottom:0}
.c1{height:38%;background:color-mix(in srgb,var(--verde) 55%,#0a1a0c);opacity:.9;
  clip-path:polygon(0 70%,8% 40%,16% 55%,27% 18%,36% 48%,45% 30%,55% 60%,66% 22%,76% 50%,86% 28%,94% 52%,100% 38%,100% 100%,0 100%)}
.c2{height:20%;background:color-mix(in srgb,var(--verde) 70%,#06120a);
  clip-path:polygon(0 50%,12% 30%,22% 55%,35% 35%,48% 60%,60% 28%,72% 52%,84% 34%,100% 58%,100% 100%,0 100%)}
.viz canvas{position:absolute;left:0;width:100%}
.viz-cordillera{bottom:16%;height:42%;opacity:.55}
.viz-rio{bottom:3%;height:12%;opacity:.7;z-index:1}

/* ---------- Radio de mesa ---------- */
.radio-mesa{position:relative;width:min(84vw,330px);margin:40px 0 20px;padding:12px 12px 14px;border-radius:28px 28px 14px 14px;
  background:
    repeating-linear-gradient(92deg,rgba(0,0,0,.12) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(88deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),var(--madera);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -6px 0 rgba(0,0,0,.3),0 0 0 3px #3a1a06,0 24px 40px rgba(0,0,0,.5)}
.dial{position:relative;height:62px;border-radius:16px 16px 6px 6px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,#ffcc66,#e19a2a 55%,#8a4f0e);
  box-shadow:inset 0 0 0 3px #d9b56a,inset 0 0 0 5px #3a1a06,inset 0 6px 14px rgba(0,0,0,.4)}
.oxi-sonando .dial{background:radial-gradient(ellipse at 50% 120%,#fff1b8,#ffbe3d 55%,#a8620f);
  box-shadow:inset 0 0 0 3px #f1d38a,inset 0 0 0 5px #3a1a06,inset 0 6px 14px rgba(0,0,0,.3),0 0 calc(var(--nivel,0) * 22px) #ffbe3d}
.escala{position:absolute;left:9%;right:9%;top:8px;height:30px;
  background:repeating-linear-gradient(90deg,#3a1a06 0 1px,transparent 1px 4%) 0 100%/100% 8px no-repeat}
.escala b{position:absolute;top:0;transform:translateX(-50%);font:400 .78rem var(--titulos);color:#3a1a06}
.escala b:nth-child(1){left:0}.escala b:nth-child(2){left:20%}.escala b:nth-child(3){left:40%}
.escala b:nth-child(4){left:60%}.escala b:nth-child(5){left:80%}.escala b:nth-child(6){left:100%}
.aguja{position:absolute;top:4px;bottom:4px;width:3px;margin-left:-1px;border-radius:2px;background:#d10d14;box-shadow:0 0 6px #ff3030;
  left:calc(9% + 82% * .355);transform:translateX(calc(var(--nivel,0) * 3px))}
.frec{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:400 .9rem var(--titulos);color:#3a1a06;letter-spacing:.06em}
.frente{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:10px}
.tela{position:relative;aspect-ratio:1.1;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    linear-gradient(transparent 0 12%,var(--verde) 12% 16%,transparent 16% 84%,var(--verde) 84% 88%,transparent 88%),
    var(--tejido);
  box-shadow:inset 0 0 0 4px #3a1a06,inset 0 0 18px rgba(0,0,0,.6)}
.parlante{width:66%;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle,#fff 0 30%,#f3eedd 31% 60%,#e7dfc6);
  box-shadow:0 0 0 5px var(--verde),0 0 0 8px #fff,0 0 0 10px #3a1a06,0 6px 16px rgba(0,0,0,.5);
  transform:scale(calc(1 + var(--bajo,0) * .05));transition:transform .08s}
.parlante img{width:100%;height:100%;object-fit:contain;padding:10%}
.parlante img[src^="http"]{object-fit:cover;padding:0}
.botonera{display:flex;flex-direction:column;justify-content:space-around;align-items:center;gap:8px;padding:4px 0}
.perilla-madera{width:44px;height:44px;border-radius:50%;
  background:repeating-conic-gradient(#6b3614 0 10deg,#4a230c 10deg 20deg);box-shadow:0 0 0 3px #d9b56a,0 4px 8px rgba(0,0,0,.6),inset 0 0 0 12px rgba(0,0,0,.15)}
.ojo{width:38px;height:38px;border-radius:50%;background:#0a1a0c;box-shadow:0 0 0 3px #222,0 0 0 5px #d9b56a;display:grid;place-items:center;overflow:hidden}
.ojo i{width:100%;height:100%;border-radius:50%;
  background:conic-gradient(from 180deg,#1d3a1d 0 calc(40deg - var(--nivel,0) * 35deg),#5dff6a calc(40deg - var(--nivel,0) * 35deg) calc(320deg + var(--nivel,0) * 35deg),#1d3a1d 0);
  -webkit-mask:radial-gradient(circle,transparent 22%,#000 24%);mask:radial-gradient(circle,transparent 22%,#000 24%);opacity:.35}
.oxi-sonando .ojo i{opacity:1;filter:drop-shadow(0 0 4px #5dff6a)}
.pata{position:absolute;bottom:-12px;width:30px;height:14px;border-radius:0 0 6px 6px;background:#3a1a06}
.pi{left:14%}.pd{right:14%}

/* ---------- Mando ---------- */
.mando{color:var(--texto-esc)}
.sello{background:#fff;color:var(--rojo);border:0;font-family:var(--titulos);font-weight:400;letter-spacing:.06em;box-shadow:0 4px 0 var(--verde)}
.cancion{font-weight:400;color:#fff;text-shadow:0 3px 0 var(--rojo),0 6px 14px rgba(0,0,0,.5)}
.artista{color:#fff;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.play{color:#fff;box-shadow:0 0 0 5px #fff,0 0 0 9px var(--verde),0 12px 30px rgba(0,0,0,.45)}
.oxi-sonando .escenario .play{box-shadow:0 0 0 5px #fff,0 0 0 9px var(--verde),0 0 calc(8px + var(--bajo,0) * 30px) var(--amarillo)}
.girando{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.volumen .boton-redondo{background:rgba(0,0,0,.35)}
.barra-vol span{background:linear-gradient(90deg,var(--verde),var(--amarillo),var(--rojo))}
.aviso,.datos{color:#fff}

/* Faja tejida */
.faja{position:absolute;left:0;right:0;bottom:0;z-index:3;height:30px;background:var(--tejido);
  border-top:6px solid var(--verde);border-bottom:6px solid var(--verde);box-shadow:0 -2px 0 #fff}
.pie{border-top:0;position:relative;padding-top:46px}
.pie::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--tejido);background-size:12px 12px;opacity:.9}

/* Barra chica */
.mini{background:var(--verde);box-shadow:0 0 0 3px var(--amarillo),0 10px 30px rgba(0,0,0,.4)}
.mini img{border-radius:50%;background:#fff;object-fit:contain}
.mini img[src^="http"]{object-fit:cover}

.boton-wa{font-family:var(--titulos);font-weight:400;font-size:1.25rem}
@media (min-width:900px){
  .contenido .bloque{box-shadow:inset 0 0 0 1px var(--linea),inset 0 5px 0 var(--verde)}
  .contenido>.wa{box-shadow:none}
}

@media (min-width:760px){
  .escenario{padding:96px 32px 120px}
  .radio-mesa{width:380px;margin:20px}
  .astro{width:90px;height:90px;right:8%;top:12%}
}