:root {
        --background: #0a0f1a;
        --foreground: #e2e8f0;
        --primary: 139, 92, 246;
        --accent: 236, 72, 153;
      }
      body {
        background: var(--background);
        color: var(--foreground);
        font-family: 'Inter', sans-serif;
        overflow-x: hidden;
      }
      #dot-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }

    
      .gradient-text {
        background: linear-gradient(90deg, #8b5cf6, #ec4899);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    /* --- Estilos de Animación del Footer --- */
    
    /* Contenedor de la cápsula: aplica la animación de flotación */
    .capsule-container {
        display: inline-block;
        margin-bottom: 0.5rem;
        /* La animación 'float' dura 4s, es suave (ease-in-out) y se repite infinitamente */
        animation: float 4s ease-in-out infinite;
    }

    /* Icono de la cápsula (SVG): aplica la animación de rotación y un efecto de sombra */
    .capsule-icon {
        width: 28px;
        height: 28px;
        filter: drop-shadow(0 0 6px hsla(var(--primary) / 0.3));
        /* La animación 'roll' dura 8s, tiene una curva de aceleración personalizada y se repite */
        animation: roll 8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    }
    
    /* Contenedor del texto: define la fuente y color del texto animado */
    .text-container {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        color: #94A3B8; /* slate-400 */
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    }

    /* Placeholder para el texto que se va a animar. Asegura que tenga altura antes de que se cargue el JS. */
    .text-scramble {
        min-height: 1.5em; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Keyframe para la animación de flotación (movimiento vertical) */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }

    /* Keyframe para la animación de rotación de la cápsula */
    @keyframes roll {
        /* Permanece sin rotar durante el 85% del tiempo */
        0%, 85% { transform: rotate(0deg); }
        /* Rota 360 grados en el último 15% del tiempo */
        100% { transform: rotate(360deg); }
    }