/* ============================================================
   BASE — Reset global, variables CSS, body, animaciones compartidas
   ============================================================ */

:root {
    --bg-color:     #0a0a0a;
    --bg-secondary: #111111;
    --text-main:    #ffffff;
    --text-muted:   #888888;
    --card-bg:      #1a1a1a;
    --card-border:  #2a2a2a;
    --accent:       #2563eb;
    --accent-glow:  rgba(37, 99, 235, 0.3);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}