.elementor-5 .elementor-element.elementor-element-6dc9ba5{--display:flex;--min-height:100vh;}@media(min-width:768px){.elementor-5 .elementor-element.elementor-element-6dc9ba5{--content-width:100vw;}}/* Start custom CSS for container, class: .elementor-element-6dc9ba5 */<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Humo Plasma‑Style</title>
  <style>
    html, body {
      margin: 0; padding: 0;
      height: 100vh;
      overflow: hidden;
      background: #030005;
      color: white;
      font-family: sans-serif;
    }
    canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      z-index: -1;
      pointer-events: none;
    }
    .content { position: relative; z-index: 1; padding: 20vh 10vw; text-align: center; }
    h1 { font-size: 3rem; margin-bottom: .5rem; }
    p { max-width: 600px; margin: auto; }
  </style>
</head>
<body>

<canvas id="smoke"></canvas>
<div class="content">
  <h1>Fondo de Humo Animate</h1>
  <p>Inspirado en efectos VFX, completamente en HTML/JS. Reacciona al mouse y listo para automatizar.</p>
</div>

<script>
  const canvas = document.getElementById('smoke'),
        ctx = canvas.getContext('2d');
  let W = canvas.width = innerWidth, H = canvas.height = innerHeight;
  const particles = [];
  const img = new Image();
  img.src = 'https://i.imgur.com/eiYJkZC.png'; // humo semi‑transparente

  window.addEventListener('resize', () => {
    W = canvas.width = innerWidth;
    H = canvas.height = innerHeight;
  });

  const M = { x: W/2, y: H/2 };
  window.addEventListener('mousemove', e => {
    M.x = e.clientX; M.y = e.clientY;
  });

  class P {
    constructor() {
      this.reset();
    }

    reset() {
      this.x = M.x; this.y = M.y;
      this.vx = (Math.random() - .5) * 1;
      this.vy = (Math.random() - .5) * 1;
      this.scale = Math.random() * 0.3 + 0.4;
      this.life = 0;
      this.maxLife = Math.random() * 100 + 100;
      this.rot = Math.random() * Math.PI * 2;
      this.dr = (Math.random() - .5) * 0.01;
    }

    update() {
      this.x += this.vx + (M.x - W/2)*0.0003;
      this.y += this.vy + (M.y - H/2)*0.0003;
      this.rot += this.dr;
      this.life++;
      if (this.life > this.maxLife) this.reset();
    }

    draw() {
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.rot);
      const s = this.scale;
      ctx.globalAlpha = 0.3 * (1 - this.life / this.maxLife);
      ctx.drawImage(img, -s*100, -s*100, 200 * s, 200 * s);
      ctx.restore();
    }
  }

  function init() {
    for (let i = 0; i < 50; i++) particles.push(new P());
  }

  function animate() {
    ctx.fillStyle = 'rgba(0,0,0,0.05)';
    ctx.fillRect(0, 0, W, H);
    particles.forEach(p => (p.update(), p.draw()));
    requestAnimationFrame(animate);
  }

  img.onload = () => {
    init();
    animate();
  };
</script>

</body>
</html>/* End custom CSS */