/* ═══════════════════════════════════════════════════════════════
   BASE.CSS — Variables, Reset, Tipografía, Animaciones
   Frecuencia VB Showcase
═══════════════════════════════════════════════════════════════ */

:root {
    --cyan: #00d4ff; --gold: #ffcc00; --bg-deep: #000000;
    --bg-card: #0a0f18; --bg-surface: #0e1520; --border: #1a2436;
    --text-dim: #5a6a80; --red-live: #ff3b3b; --radius: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

::-webkit-scrollbar { height: 4px; width: 4px; }
::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 10px; }

body {
    background: var(--bg-deep);
    color: #fff;
    font-family: 'Barlow', sans-serif;
    overflow-x: hidden;
}

/* ─── KEYFRAMES ───────────────────────────────────────────── */
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes sound-wave { from { transform: scaleY(0.5); } to { transform: scaleY(1.2); } }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counterPulse { 0%{transform:scale(1)} 50%{transform:scale(1.25);background:rgba(255,204,0,0.25)} 100%{transform:scale(1)} }