body {
            font-family: 'Inter', sans-serif;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .animate-on-scroll {
            opacity: 0;
            animation: slideUp 0.8s ease-out forwards;
        }
        
        .progress-bar {
            position: fixed;
            top: 64px;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, #5182f7 0%, #be213a 100%);
            width: 0%;
            z-index: 40;
            transition: width 0.2s;
        }
        
        .toc-item {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            padding-left: 1rem;
        }
        
        .toc-item.active {
            border-left-color: #5182f7;
            color: #5182f7;
            font-weight: 600;
            background: linear-gradient(to right, rgba(81, 130, 247, 0.05), transparent);
        }
        
        .hero-mesh {
            background-color: #5182f7;
            background-image: 
                radial-gradient(at 40% 20%, #be213a 0px, transparent 50%),
                radial-gradient(at 80% 0%, #f093fb 0px, transparent 50%),
                radial-gradient(at 0% 50%, #764ba2 0px, transparent 50%),
                radial-gradient(at 80% 50%, #5182f7 0px, transparent 50%),
                radial-gradient(at 0% 100%, #be213a 0px, transparent 50%);
        }
        
        .stat-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .stat-card:hover {
            transform: translateY(-8px) scale(1.02);
        }
        
        .insight-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .insight-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #5182f7, #be213a);
            transition: left 0.5s ease;
        }
        
        .insight-card:hover::before {
            left: 0;
        }
        
        .insight-card:hover {
            transform: translateX(8px);
            box-shadow: -8px 8px 32px rgba(0,0,0,0.1);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #5182f7, #be213a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .gradient-border {
            position: relative;
            background: white;
        }
        
        .gradient-border::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(135deg, #5182f7, #be213a);
            border-radius: inherit;
            z-index: -1;
        }
        
        .number-huge {
            font-size: clamp(3rem, 6vw, 5rem);
            line-height: 1;
        }
        
        .hover-float:hover {
            animation: float 2s ease-in-out infinite;
        }
        
        .mesh-card {
            background: linear-gradient(135deg, rgba(81, 130, 247, 0.05) 0%, rgba(190, 33, 58, 0.05) 100%);
            backdrop-filter: blur(10px);
        }
        
        @media (max-width: 768px) {
            .number-huge {
                font-size: 2.5rem;
            }
        }

        /* ===== Add-ons (no overrides) ===== */

/* Animaciones adicionales */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(81,130,247,.5); }
  50%      { box-shadow: 0 0 40px rgba(81,130,247,.8); }
}
@keyframes typing {
  from { width: 0 }
  to   { width: 100% }
}

/* Aparece al hacer scroll (usa slideUp ya existente) */
.animate-on-scroll {
  opacity: 0;
  animation: slideUp .8s ease-out forwards;
}

/* Hero alternativo (gradiente morado) */
.hero-tech {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}
.hero-tech::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: float 20s linear infinite;
}

/* Tarjetas con barra superior en hover (alias de insight-card) */
.tool-card,
.insight-card {
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.tool-card::before,
.insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #5182f7, #764ba2);
  transition: left .5s ease;
}
.tool-card:hover::before,
.insight-card:hover::before { left: 0; }
.tool-card:hover,
.insight-card:hover {
  transform: translateX(8px);
  box-shadow: -8px 8px 32px rgba(0,0,0,.1);
}

/* Texto con gradiente alternativo (no pisa .gradient-text existente) */
.gradient-text-alt {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Borde con gradiente alternativo */
.gradient-border-alt { position: relative; background: #fff; }
.gradient-border-alt::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: inherit;
  z-index: -1;
}

/* Card tenue estilo AI (equivalente a tu ai-card) */
.ai-card {
  background: linear-gradient(135deg, rgba(102,126,234,.05) 0%, rgba(118,75,162,.05) 100%);
  backdrop-filter: blur(10px);
}

/* Bloques de código */
.code-block {
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 8px;
  padding: 1rem;
  font-family: 'Consolas','Monaco',monospace;
  overflow-x: auto;
}

/* Variante de elevación extra para stat-card sin tocar el hover actual */
.stat-card--elevated:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}