/* Radio Imperial 2 (1440 AM, Lima) · identidad propia: radio de tubo de antes, lacada en rojo y vestida de manta
   andina (como el logo). Dial AM con aguja al 1440, ojo mágico verde, parlante de tela tejida y barras de aguayo.
   Huaynos y programas de los pueblos (Aymaraes, Chalhuanca, Chuquibambilla…): calidez de AM, de casa. */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

:root{
  --titulos:'Alfa Slab One',Georgia,serif;
  --rojo:#c8102e;
  --laca:#8e1220;
  --ambar:#ffb000;
  --brillo:linear-gradient(180deg,#ffd36a,#ff9c00);
  --radio:12px;
  --aguayo:repeating-linear-gradient(180deg,#c8102e 0 6px,#ff4f8b 6px 9px,#ff8a00 9px 14px,#ffd23f 14px 17px,#c8102e 17px 22px,#2fb34a 22px 26px,#1f6fd1 26px 29px,#ffd23f 29px 31px,#c8102e 31px 38px);
}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--texto:#3a0a10;--tarjeta:#fff}}
:root[data-tema="dia"]{--texto:#3a0a10;--tarjeta:#fff}
:root{--tarjeta:color-mix(in srgb,var(--fondo) 84%,var(--rojo))}
@media (prefers-color-scheme:light){:root:not([data-tema="noche"]){--tarjeta:#fff}}
:root[data-tema="dia"]{--tarjeta:#fff}

/* ---------- Escenario: rojo tejido entre dos franjas de manta ---------- */
.escenario{padding:84px 16px 110px;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px),
    radial-gradient(120% 70% at 50% 30%,#a8142a,#5a0a14 70%,#2a0509)}
.escenario::after{display:none}
.manta{position:absolute;left:0;right:0;height:38px;background:var(--aguayo);z-index:1;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.manta::after{content:"";position:absolute;inset:12px 0;background:
  linear-gradient(135deg,transparent 33%,#fff3d6 33% 40%,transparent 40%) 0 0/14px 14px,
  linear-gradient(45deg,transparent 33%,#fff3d6 33% 40%,transparent 40%) 0 0/14px 14px;opacity:.85}
.manta-arriba{top:0;height:30px}
.manta-arriba::after{inset:9px 0}
.manta-abajo{bottom:0}
.barra{top:30px}
.marca img{height:40px}
.viz-aguayo{top:auto;bottom:38px;height:120px;opacity:.55}
.escenario-fondo,.viz-rayos,.viz-humo,.viz-barras{display:none}

/* ---------- La radio de tubo ---------- */
.radio-am{position:relative;width:min(90vw,380px);padding:14px 14px 18px;border-radius:38px 38px 16px 16px;
  background:linear-gradient(180deg,#b3172b,var(--laca) 60%,#5e0a15);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.25),inset 0 -6px 0 rgba(0,0,0,.3),0 0 0 4px #3a060c,0 26px 50px rgba(0,0,0,.55)}
.am-tapa{height:84px;display:grid;place-items:center;margin:-2px 10px 10px}
.am-tapa img{height:84px;width:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.am-dial{position:relative;height:66px;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#2a1505,#130902);box-shadow:inset 0 0 0 3px #c9a24a,inset 0 0 0 5px #3a060c,inset 0 4px 14px rgba(0,0,0,.8)}
.oxi-sonando .am-dial{background:radial-gradient(130% 120% at 50% 100%,#6b3a06,#2a1505 60%,#130902)}
.viz-dial{position:absolute;inset:0;width:100%;height:100%}
.am-escala{position:absolute;left:8%;right:8%;top:8px;margin:0;padding:0;list-style:none;height:20px}
.am-escala li{position:absolute;left:var(--x);transform:translateX(-50%);font:700 .78rem/1 system-ui,sans-serif;color:#f6d58c;text-shadow:0 0 6px rgba(255,176,0,.6)}
.am-rayas{position:absolute;left:8%;right:8%;top:28px;height:12px;
  background:repeating-linear-gradient(90deg,#f6d58c 0 1px,transparent 1px 4.72%) ,linear-gradient(#f6d58c,#f6d58c) 0 100%/100% 1px no-repeat;opacity:.8}
.am-aguja{position:absolute;top:5px;bottom:5px;left:calc(8% + 84% * .03);width:3px;border-radius:2px;background:#ff2a1a;box-shadow:0 0 8px #ff5a1a;
  transition:left 1.8s cubic-bezier(.3,1.4,.5,1)}
.oxi-sonando .am-aguja,.oxi-cargando .am-aguja{left:calc(8% + 84% * .849);transform:translateX(calc(var(--nivel,0) * 2px - 1px))}
.am-khz{position:absolute;right:10px;bottom:6px;font:700 .62rem system-ui;letter-spacing:.12em;color:#c9a24a}

.am-frente{display:grid;grid-template-columns:1fr auto;gap:14px;margin-top:14px;align-items:center}
.am-parlante{position:relative;aspect-ratio:1.25;border-radius:14px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(rgba(0,0,0,.55) 1.4px,transparent 1.8px) 0 0/7px 7px,var(--aguayo);
  box-shadow:inset 0 0 0 4px #c9a24a,inset 0 0 0 6px #3a060c,inset 0 0 30px rgba(0,0,0,.6)}
.am-parlante::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(0,0,0,.35),transparent);
  transform:scale(calc(1 + var(--bajo,0) * .12))}
.am-caratula{position:relative;width:52%;aspect-ratio:1;height:auto;border-radius:50%;object-fit:contain;padding:6%;
  background:#fff3d6;box-shadow:0 0 0 4px #c9a24a,0 6px 14px rgba(0,0,0,.5)}
.am-caratula[src^="http"]{object-fit:cover;padding:0}
.oxi-sonando .am-caratula[src^="http"]{animation:gira-lento 12s linear infinite}
@keyframes gira-lento{to{transform:rotate(1turn)}}
.am-lado{display:grid;gap:14px;justify-items:center}

/* Ojo mágico: el abanico verde se abre con el sonido */
.ojo{width:58px;height:58px;border-radius:50%;padding:5px;background:linear-gradient(180deg,#d9b25a,#7a5a1a);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.ojo i{display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle closest-side,#0b1a0b 0 22%,transparent 24%),
    conic-gradient(from calc(180deg - var(--nivel,0) * 150deg) at 50% 50%,#0f2d0f 0,#7dff6a 0 calc(var(--nivel,0) * 300deg),#0f2d0f 0);
  box-shadow:inset 0 0 10px rgba(0,0,0,.8)}
body:not(.oxi-sonando) .ojo i{background:radial-gradient(circle closest-side,#0b1a0b 0 22%,#183a18 24%)}

.radio-am .play{width:78px;height:78px;font-size:1.9rem;color:#5a0a14;background:radial-gradient(circle at 35% 30%,#fff1c4,#e7b44c 55%,#9a6a14);
  box-shadow:0 0 0 4px #3a060c,0 6px 0 #3a060c,0 10px 20px rgba(0,0,0,.5)}
.radio-am .play:active{transform:translateY(3px)}
.oxi-sonando .radio-am .play{box-shadow:0 0 0 4px #3a060c,0 6px 0 #3a060c,0 0 calc(10px + var(--nivel,0) * 30px) var(--ambar)}
.girando{border-color:rgba(90,10,20,.25);border-top-color:#5a0a14}
.am-patas{position:absolute;left:12%;right:12%;bottom:-14px;height:14px;
  background:linear-gradient(90deg,#3a060c 0 10%,transparent 10% 90%,#3a060c 90%);border-radius:0 0 6px 6px}

/* ---------- Mando ---------- */
.sello{font-family:var(--titulos);font-weight:400;letter-spacing:.06em;background:#fff3d6;color:var(--laca);border:0;border-radius:6px}
.cancion{font-weight:400;font-size:clamp(1.5rem,6.5vw,2.3rem);color:#fff3d6;text-shadow:0 3px 0 #3a060c}
.artista{color:#ffd36a;font-weight:700}
.controles{margin-top:16px}
.volumen .boton-redondo{background:rgba(0,0,0,.3)}
.barra-vol{width:170px}
.barra-vol span{background:var(--aguayo);background-size:100% 6px}
.barra-vol::before{background:rgba(0,0,0,.35)}
.al-aire{background:#fff3d6;color:var(--laca)}

@media (min-width:760px){
  .escenario{padding:110px 32px 150px}
  .radio-am{width:400px}
  .viz-aguayo{height:150px}
}

/* ---------- Bloques ---------- */
.bloque h2{font-weight:400;font-size:1.35rem}
.bloque h2 .ic{color:var(--rojo)}
.boton-wa{font-weight:400}
.lista-temas li::before{color:var(--rojo);font-weight:400}
.boton{background:var(--rojo);color:#fff}
.datos-contacto .ic{color:var(--rojo)}
.pie{border-top:0;position:relative}
.pie::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--aguayo);background-size:100% 76px}
.pie b{font-family:var(--titulos);font-weight:400}
.mini{background:linear-gradient(180deg,#a8142a,#6a0b17);box-shadow:inset 0 -5px 0 #ffd23f,0 10px 30px rgba(0,0,0,.4)}
.mini .play-chico{color:#5a0a14;background:radial-gradient(circle at 35% 30%,#fff1c4,#e7b44c 55%,#9a6a14)}
.mini img{background:#fff3d6;object-fit:contain;border-radius:50%}
.mini img[src^="http"]{object-fit:cover}
@media (min-width:900px){
  .contenido .bloque{position:relative;overflow:hidden}
  .contenido .bloque:not(.wa)::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--aguayo);background-size:100% 76px}
}