/* ============================================================
   Luz — pulso.css
   SOLO los estilos del "pulso": las barras de audio (la voz de Luz),
   con sus estados reposo / "hablando". Movido verbatim desde
   crear.html (sin renombrar selectores ni cambiar valores).
   ============================================================ */

/* ---------- "El pulso" (barras, la voz de Luz) — compacto ---------- */
.visualizador {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2.6vw, 13px);
  height: clamp(96px, 17vh, 150px);
}
.barra {
  width: clamp(9px, 2.6vw, 14px);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--violeta) 0%, var(--amarillo) 100%);
  box-shadow: 0 0 16px rgba(179, 108, 255, 0.55), 0 0 28px rgba(255, 214, 0, 0.25);
  transform: scaleY(0.3); transform-origin: center;
  animation: barra-reposo 2.6s ease-in-out infinite;
}
.barra:nth-child(1) { animation-delay: -0.2s; }
.barra:nth-child(2) { animation-delay: -1.1s; }
.barra:nth-child(3) { animation-delay: -0.6s; }
.barra:nth-child(4) { animation-delay: -1.6s; }
.barra:nth-child(5) { animation-delay: -0.4s; }
.barra:nth-child(6) { animation-delay: -1.3s; }
.barra:nth-child(7) { animation-delay: -0.8s; }
.visualizador.hablando .barra { animation-name: barra-hablando; animation-duration: 0.5s; }
.visualizador.hablando .barra:nth-child(2n) { animation-duration: 0.42s; }
.visualizador.hablando .barra:nth-child(3n) { animation-duration: 0.6s; }
@keyframes barra-reposo  { 0%,100% { transform: scaleY(0.26); } 50% { transform: scaleY(0.52); } }
@keyframes barra-hablando{ 0%,100% { transform: scaleY(0.18); } 50% { transform: scaleY(1); } }

/* En la pantalla de hora compactamos el pulso para que TODO entre sin scroll */
body.compacto-hora .visualizador { height: clamp(80px, 13vh, 120px); }

/* Cuando suena una voz, el pulso lo maneja el AnalyserNode por JS (transform
   inline): apagamos la animación CSS para que el JS tome el control.
   Lo usan index.html, pago_listo.html y el flujo (crear.html). */
.visualizador.reproduciendo .barra { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .barra, .visualizador.hablando .barra { animation: none; transform: scaleY(0.45); }
}