/* Radio Inka Power Mix 105.5 FM (Espinar, Cusco) — identidad propia.
   Música variada andina (huayno, cumbia sureña, folklore del Colca) y programas en quechua: un MINICOMPONENTE
   azul noche con el logo arcoíris arriba (la antena emite señal), CD tornasol que gira con la carátula,
   pantalla LCD con la hora y una torre de ecualizador LED con los siete colores de la bandera del Cusco,
   que también ondea de fondo. Letras: Russo One (títulos) y VT323 (pantalla). */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=VT323&display=swap');

:root{--titulos:'Russo One',system-ui,sans-serif;--r1:#e52421;--r2:#f39200;--r3:#ffde00;--r4:#3aaa35;--r5:#00a0e3;--r6:#1d3c94;--r7:#8f2a8c;
  --arcoiris:linear-gradient(90deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7))}

.escenario{background:radial-gradient(100% 70% at 50% 0%,color-mix(in srgb,var(--principal) 90%,#3a7bd5),#050a1a 80%)}
.escenario-fondo{opacity:.18}
.viz-bandera{top:auto;bottom:40px;height:46%;opacity:.28;filter:blur(1px)}
.oxi-sonando .viz-bandera{opacity:.42}

/* ---------- Minicomponente ---------- */
.equipo{position:relative;width:min(88vw,380px);margin:26px 0 8px;display:grid;gap:10px}
.logo-grande{position:relative;padding:0 6%}
.logo-grande img{width:100%;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));transition:transform .12s}
.oxi-sonando .logo-grande img{transform:scale(calc(1 + var(--bajo,0) * .04))}
/* Señal que sale de la antena del logo (arriba a la izquierda) */
.senal{position:absolute;left:19%;top:4%;width:0;height:0}
.barra .marca{visibility:hidden}
.senal i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:3px solid transparent;border-top-color:var(--dorado);border-right-color:var(--dorado);opacity:0;transform:rotate(-45deg) scale(.5)}
.oxi-sonando .senal i{animation:senal 1.8s ease-out infinite}
.senal i:nth-child(2){animation-delay:.6s!important}.senal i:nth-child(3){animation-delay:1.2s!important}
@keyframes senal{0%{opacity:.9;transform:rotate(-45deg) scale(.4)}100%{opacity:0;transform:rotate(-45deg) scale(1.6)}}

.frente{display:grid;grid-template-columns:38% 1fr;gap:12px;align-items:center;padding:12px;border-radius:18px;
  background:linear-gradient(180deg,#2b3550,#121a2e 55%,#0a0f1d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 2px #3c4868,0 14px 34px rgba(0,0,0,.55)}
/* CD tornasol */
.cd{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(circle closest-side,transparent 0 13%,rgba(255,255,255,.65) 13% 15%,transparent 15% 100%),
    conic-gradient(from 20deg,#d9e4f2,#f6c6e8,#bfe9ff,#fff3b0,#c7f5d0,#d9e4f2,#f6c6e8,#bfe9ff,#fff3b0,#d9e4f2);
  box-shadow:0 0 0 3px #0a0f1d,0 0 0 4px #4a5675;animation:gira 3s linear infinite;animation-play-state:paused}
.oxi-sonando .cd{animation-play-state:running}
.cd img{width:56%;height:56%;border-radius:50%;object-fit:contain;padding:6%;background:#0b1a3a;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.cd img[src^="http"]{object-fit:cover;padding:0}
/* Pantalla LCD */
.pantalla{height:100%;min-height:110px;display:grid;grid-template-rows:auto 1fr;gap:4px;padding:8px 10px;border-radius:10px;
  background:linear-gradient(#02060f,#071226);box-shadow:inset 0 0 0 1px #233154,inset 0 6px 16px rgba(0,0,0,.6)}
.lcd{display:flex;justify-content:space-between;margin:0;font:1.6rem/1 'VT323',monospace;color:var(--dorado);text-shadow:0 0 8px color-mix(in srgb,var(--dorado) 70%,transparent)}
.lcd .fm{color:#ff5fb4;text-shadow:0 0 8px #ae2d79}
.viz-torre{width:100%;height:100%;min-height:70px}
/* Siete luces de la bandera que se prenden con el volumen del sonido */
.leds{display:flex;justify-content:center;gap:10px}
.leds i{width:12px;height:12px;border-radius:50%;opacity:.18;box-shadow:0 0 10px currentColor;background:currentColor}
.leds i:nth-child(1){color:var(--r1)}.leds i:nth-child(2){color:var(--r2)}.leds i:nth-child(3){color:var(--r3)}.leds i:nth-child(4){color:var(--r4)}
.leds i:nth-child(5){color:var(--r5)}.leds i:nth-child(6){color:var(--r6)}.leds i:nth-child(7){color:var(--r7)}
.oxi-sonando .leds i:nth-child(1){opacity:clamp(.18,calc(var(--nivel,0) * 9 - 0),1)}
.oxi-sonando .leds i:nth-child(2){opacity:clamp(.18,calc(var(--nivel,0) * 9 - 1),1)}
.oxi-sonando .leds i:nth-child(3){opacity:clamp(.18,calc(var(--nivel,0) * 9 - 2),1)}
.oxi-sonando .leds i:nth-child(4){opacity:clamp(.18,calc(var(--nivel,0) * 9 - 3),1)}
.oxi-sonando .leds i:nth-child(5){opacity:clamp(.18,calc(var(--nivel,0) * 9 - 4),1)}
.oxi-sonando .leds i:nth-child(6){opacity:clamp(.18,calc(var(--nivel,0) * 9 - 5),1)}
.oxi-sonando .leds i:nth-child(7){opacity:clamp(.18,calc(var(--nivel,0) * 9 - 6),1)}

/* Textos y mando */
.sello{background:#050a1a;border:2px solid transparent;background-clip:padding-box;font-family:var(--titulos);font-weight:400;position:relative}
.sello::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:var(--arcoiris)}
.cancion{font-weight:400;font-size:clamp(1.5rem,6.6vw,2.3rem);letter-spacing:.01em}
.artista{font-family:'VT323',monospace;font-size:1.45rem;letter-spacing:.04em;color:var(--dorado)}
.play{background:radial-gradient(circle at 35% 30%,#3d4a6e,#0b1226 70%);color:#fff;
  box-shadow:0 0 0 4px #050a1a,0 0 0 7px transparent,0 12px 30px rgba(0,0,0,.6);position:relative;isolation:isolate}
.play::before{content:"";position:absolute;inset:-7px;z-index:-1;border-radius:50%;background:conic-gradient(var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7),var(--r1))}
.play::after{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:50%;background:#050a1a}
.oxi-sonando .play::before{animation:gira 4s linear infinite;filter:drop-shadow(0 0 calc(4px + var(--nivel,0) * 18px) #ff5fb4)}
.play .ic{position:relative;z-index:1}
.girando{border-color:rgba(255,255,255,.25);border-top-color:#fff}
.barra-vol span{background:var(--arcoiris)}
.mini{background:#0b1226;border-top:3px solid;border-image:var(--arcoiris) 1}

/* Bloques: una raya arcoíris arriba de cada tarjeta */
.bloque h2{font-weight:400;font-size:1.35rem}
.bloque h2 .ic{color:#ae2d79}
.lista-temas li,.programas li{position:relative;overflow:hidden}
.lista-temas li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7))}
.lista-temas li::before{font-weight:400;color:#ae2d79}
.boton{background:linear-gradient(135deg,#00b3e0,#ae2d79);color:#fff}
.contacto,.app-web{position:relative}
footer::before,.pie::before{content:"";display:block;height:5px;background:var(--arcoiris);margin-bottom:18px}

@media (min-width:760px){
  .equipo{width:400px;margin:20px 30px}
  .viz-bandera{height:60%}
}