:root {
    --cq-red: #e11d48;
    --cq-red-soft: #fb7185;
    --cq-red-glow: rgba(225, 29, 72, 0.3);
    --cq-dark: #0a0a0f;
    --cq-darker: #050508;
    --cq-silver: #cbd5e1;
    --cq-zinc-800: #27272a;
    --cq-zinc-900: #18181b;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--cq-dark);
    color: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-font {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.05em;
}

/* Gradientes de texto */
.text-gradient     { background: linear-gradient(to right, #fff, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-gradient-red { background: linear-gradient(to right, var(--cq-red-soft), var(--cq-red)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cq-zinc-900); }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cq-red); }

/* Animación de pulso "En vivo" */
@keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(225, 29, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}
.live-pulse { animation: pulse-red 2s infinite; }

/* Efecto scanlines CRT */
.scanlines {
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
    background-size: 100% 4px;
    position: absolute; inset: 0;
    pointer-events: none; z-index: 10;
}

/* Subrayado nav */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0;
    background-color: var(--cq-red); transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* Utilidades */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn .4s ease-out forwards; }

/* Icono social */
.social-icon {
    width: 2.5rem; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cq-zinc-900); border-radius: 9999px;
    color: #a1a1aa; transition: all .25s ease;
}
.social-icon:hover { background: var(--cq-red); color: #fff; }