/* Radio Los Andes (Villa El Salvador, Lima Sur) · identidad propia: estudio de noticias al pie de los cerros.
   Verde, granate y sol del logo; letra condensada de titular (Oswald); monitor rectangular, lámpara AL AIRE,
   cinta de último minuto y medidor de señal de aguja. Noticias y música peruana: «Conectando con la verdad». */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap');

:root{
  --titulos:'Oswald',system-ui,sans-serif;
  --verde:#1fa83a;
  --granate:#8e1f1f;
  --sol:#ffc21a;
  --brillo:linear-gradient(180deg,#ffd54a,#f5a400);
  --radio:10px;
}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--texto:#10240f;--tarjeta:#fff}}
:root[data-tema="dia"]{--texto:#10240f;--tarjeta:#fff}
:root{--tarjeta:color-mix(in srgb,var(--fondo) 84%,var(--verde))}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--tarjeta:#fff}}
:root[data-tema="dia"]{--tarjeta:#fff}

/* ---------- Cielo, sol y cerros ---------- */
.escenario{padding:66px 16px 96px;
  background:linear-gradient(180deg,#04200c 0%,#0b5e1a 55%,#3f8f1e 78%,#c98d12 100%)}
:root[data-tema="dia"] .escenario{background:linear-gradient(180deg,#1d7a2c 0%,#4fae3a 55%,#a6cf4a 80%,#ffd25a 100%)}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]) .escenario{background:linear-gradient(180deg,#1d7a2c 0%,#4fae3a 55%,#a6cf4a 80%,#ffd25a 100%)}}
.escenario::after{height:60px}
.sol{position:absolute;left:50%;bottom:40px;width:min(84vw,420px);aspect-ratio:1;margin-left:calc(min(84vw,420px) / -2);border-radius:50%;
  background:radial-gradient(circle closest-side,#fff2b0,var(--sol) 38%,#f59e00 50%,rgba(255,194,26,.35) 52%,rgba(255,194,26,0) 100%);opacity:.85;
  transform:translateY(calc(30px - var(--nivel,0) * 40px))}
.cerros{position:absolute;left:0;right:0;bottom:0;width:100%;height:190px;z-index:1}
.c1{fill:var(--granate)} .c2{fill:#0d4f17} .c3{fill:var(--fondo)}
.viz-neblina{top:auto;bottom:70px;height:150px;opacity:.5;mix-blend-mode:screen}
.escenario-fondo,.viz-rayos,.viz-humo,.viz-barras{display:none}
.escenario-dentro{gap:20px}

/* ---------- Estudio: lámpara, monitor y cinta ---------- */
.estudio{width:min(92vw,420px);position:relative}
.al-aire-lampara{display:flex;justify-content:center;margin:0 0 -2px}
.al-aire-lampara span{position:relative;z-index:2;padding:4px 16px;border-radius:6px 6px 0 0;font:700 .9rem var(--titulos);letter-spacing:.2em;
  color:#5a1515;background:#3a0d0d;box-shadow:inset 0 0 0 2px #5a1515}
.al-aire-lampara i{display:none}
.oxi-sonando .al-aire-lampara span{color:#fff;background:#e0201b;box-shadow:0 0 18px #ff2b25,0 0 50px rgba(255,43,37,.5),inset 0 0 0 2px #ff7a6b;animation:lampara 2.4s ease-in-out infinite}
@keyframes lampara{50%{box-shadow:0 0 8px #ff2b25,0 0 24px rgba(255,43,37,.35),inset 0 0 0 2px #ff7a6b}}
.monitor{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#0f7a24,#063a10 75%);
  box-shadow:0 0 0 8px #141a14,0 0 0 10px #2b352b,0 22px 50px rgba(0,0,0,.55)}
.monitor::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),radial-gradient(circle,transparent 60%,rgba(0,0,0,.45))}
.monitor img{position:absolute;inset:8% 12% 26%;width:76%;height:66%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.monitor img[src^="http"]{inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.monitor img[src^="http"]~.viz-osc{background:linear-gradient(transparent,rgba(0,0,0,.6))}
.viz-osc{position:absolute;left:0;right:0;bottom:0;width:100%;height:30%}
.monitor-dial,.monitor-reloj{position:absolute;top:8px;z-index:2;padding:2px 8px;border-radius:4px;font:700 .8rem var(--titulos);letter-spacing:.06em;background:rgba(0,0,0,.55);color:#fff}
.monitor-dial{left:8px;color:var(--sol)} .monitor-reloj{right:8px}
.cinta-noticias{display:flex;align-items:stretch;margin-top:16px;border-radius:6px;overflow:hidden;background:#fff;color:#10240f;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cinta-noticias b{flex:none;display:flex;align-items:center;padding:6px 12px;font:700 .9rem var(--titulos);letter-spacing:.08em;background:var(--granate);color:#fff;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);padding-right:22px}
.cinta-corre{flex:1;overflow:hidden;white-space:nowrap;display:flex;align-items:center;font:500 1rem var(--titulos);text-transform:uppercase}
.cinta-corre span{display:inline-block;padding-left:100%;animation:cinta 16s linear infinite}
@keyframes cinta{to{transform:translateX(-100%)}}

/* ---------- Mando ---------- */
.mando{position:relative;z-index:2}
.sello{font-family:var(--titulos);font-weight:700;letter-spacing:.12em;border-radius:4px;background:rgba(0,0,0,.4);border-color:color-mix(in srgb,var(--sol) 60%,transparent)}
.cancion{font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.6rem,7vw,2.5rem)}
.artista{color:#ffe08a;font-weight:600}
.cancion,.artista,.sello{text-shadow:0 2px 8px rgba(0,0,0,.6)}
.controles{gap:22px}
.play{color:var(--granate);box-shadow:0 0 0 6px rgba(255,194,26,.25),0 0 0 12px rgba(255,194,26,.12),0 12px 30px rgba(0,0,0,.4)}
.oxi-sonando .play{box-shadow:0 0 0 calc(6px + var(--nivel,0) * 10px) rgba(255,194,26,.25),0 0 0 calc(12px + var(--nivel,0) * 22px) rgba(255,194,26,.1),0 12px 30px rgba(0,0,0,.4)}
.girando{border-color:rgba(142,31,31,.25);border-top-color:var(--granate)}
.senal{display:grid;justify-items:center;width:112px;padding:8px 8px 4px;border-radius:10px;background:#f4ecd2;color:#2a1a0a;box-shadow:inset 0 0 0 3px #c9b98a,0 8px 20px rgba(0,0,0,.35)}
.senal svg{width:100%;display:block}
.senal-arco{stroke:#2a1a0a;stroke-width:2}
.senal-rojo{stroke:#d11;stroke-width:5}
.senal-marcas line{stroke:#2a1a0a;stroke-width:2}
.senal-aguja{transform-box:view-box;transform-origin:60px 64px;transform:rotate(calc(-62deg + var(--nivel,0) * 140deg));transition:transform .1s linear}
.senal-aguja line{stroke:var(--granate);stroke-width:2.4;stroke-linecap:round}
.senal circle{fill:#2a1a0a}
.senal small{font:700 .7rem var(--titulos);letter-spacing:.2em}
.mando>.volumen{justify-content:center;margin-top:18px}
.barra-vol{width:160px}
.barra-vol span{background:var(--brillo)}
.al-aire{background:var(--brillo);color:var(--granate)}

@media (min-width:760px){
  .escenario{padding:96px 32px 150px}
  .estudio{width:440px}
  .mando>.volumen{justify-content:flex-start}
  .sol{left:auto;right:4%;margin-left:0;bottom:120px;width:480px}
  .cerros{height:240px}
  .viz-neblina{height:200px;bottom:90px}
}

/* ---------- Bloques ---------- */
.bloque h2{text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.bloque h2::after{content:"";flex:1;height:3px;margin-left:6px;background:linear-gradient(90deg,var(--granate),transparent)}
.bloque h2 .ic{color:var(--verde)}
.lista-temas li{border-left:5px solid var(--granate);border-radius:6px}
.lista-temas li::before{color:var(--verde);font-weight:700}
.boton{background:var(--verde);color:#fff}
.datos-contacto .ic{color:var(--verde)}
.dias button[aria-selected="true"]{background:var(--verde);color:#fff}
.mini{background:#0b3a14;border-top:3px solid var(--granate)}
.mini .play-chico{color:var(--granate)}
.mini img{background:#0b5e1a;object-fit:contain}
.mini img[src^="http"]{object-fit:cover}
@media (min-width:900px){
  .contenido .bloque{border-radius:10px;border-top:4px solid var(--verde)}
}