<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" fill="none" role="img" aria-label="Mascota de BotForge">
  <defs>
    <radialGradient id="bfGlow" cx="50%" cy="45%" r="60%">
      <stop offset="0%" stop-color="#6D28D9" stop-opacity="0.55"/>
      <stop offset="60%" stop-color="#4F46E5" stop-opacity="0.18"/>
      <stop offset="100%" stop-color="#4F46E5" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="bfBody" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#7C3AED"/>
      <stop offset="55%" stop-color="#4F46E5"/>
      <stop offset="100%" stop-color="#312E81"/>
    </linearGradient>
    <linearGradient id="bfFace" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0B0B14"/>
      <stop offset="100%" stop-color="#151528"/>
    </linearGradient>
    <linearGradient id="bfCyan" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#22D3EE"/>
      <stop offset="100%" stop-color="#67E8F9"/>
    </linearGradient>
    <style>
      @keyframes bf-float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
      @keyframes bf-blink { 0%, 92%, 100% { transform: scaleY(1); } 95%, 97% { transform: scaleY(0.08); } }
      @keyframes bf-pulse { 0%,100% { opacity: 0.9; } 50% { opacity: 0.25; } }
      @keyframes bf-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      @keyframes bf-wave { 0%,100% { opacity: 0.15; } 50% { opacity: 0.6; } }
      @keyframes bf-antenna { 0%,100% { opacity: 1; r: 7; } 50% { opacity: 0.4; } }
      .bf-float { animation: bf-float 5s ease-in-out infinite; }
      .bf-eye { animation: bf-blink 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
      .bf-p1 { animation: bf-pulse 2.4s ease-in-out infinite; }
      .bf-p2 { animation: bf-pulse 3.1s ease-in-out 0.6s infinite; }
      .bf-p3 { animation: bf-pulse 2.8s ease-in-out 1.2s infinite; }
      .bf-orbit { animation: bf-orbit 16s linear infinite; transform-origin: 200px 200px; }
      .bf-orbit-rev { animation: bf-orbit 24s linear infinite reverse; transform-origin: 200px 200px; }
      .bf-wave1 { animation: bf-wave 3s ease-in-out infinite; }
      .bf-wave2 { animation: bf-wave 3s ease-in-out 1s infinite; }
      .bf-core { animation: bf-antenna 2s ease-in-out infinite; }
    </style>
  </defs>

  <!-- Halo de energia -->
  <circle cx="200" cy="195" r="165" fill="url(#bfGlow)"/>

  <!-- Anillos orbitales con particulas de datos -->
  <g class="bf-orbit">
    <circle cx="200" cy="200" r="150" stroke="#6D28D9" stroke-opacity="0.25" stroke-width="1" stroke-dasharray="3 9"/>
    <circle cx="350" cy="200" r="5" fill="#22D3EE" class="bf-p1"/>
    <circle cx="95" cy="95" r="4" fill="#A78BFA" class="bf-p2"/>
    <rect x="192" y="46" width="7" height="7" rx="2" fill="#818CF8" class="bf-p3"/>
  </g>
  <g class="bf-orbit-rev">
    <circle cx="200" cy="200" r="120" stroke="#4F46E5" stroke-opacity="0.2" stroke-width="1" stroke-dasharray="2 12"/>
    <circle cx="320" cy="200" r="3.5" fill="#67E8F9" class="bf-p2"/>
    <circle cx="110" cy="280" r="4.5" fill="#7C3AED" class="bf-p1"/>
  </g>

  <!-- Criatura -->
  <g class="bf-float">
    <!-- Antena -->
    <line x1="200" y1="98" x2="200" y2="70" stroke="#818CF8" stroke-width="3" stroke-linecap="round"/>
    <circle cx="200" cy="62" r="7" fill="url(#bfCyan)" class="bf-core"/>

    <!-- Cuerpo principal -->
    <path d="M200 96 C262 96 296 138 296 196 C296 258 258 300 200 300 C142 300 104 258 104 196 C104 138 138 96 200 96 Z" fill="url(#bfBody)"/>
    <path d="M200 96 C262 96 296 138 296 196 C296 258 258 300 200 300 C142 300 104 258 104 196 C104 138 138 96 200 96 Z" stroke="#A78BFA" stroke-opacity="0.5" stroke-width="1.5"/>

    <!-- Textura de particulas del cuerpo -->
    <circle cx="140" cy="150" r="2.5" fill="#C4B5FD" class="bf-p1"/>
    <circle cx="268" cy="164" r="2" fill="#C4B5FD" class="bf-p2"/>
    <circle cx="256" cy="256" r="2.5" fill="#A5B4FC" class="bf-p3"/>
    <circle cx="132" cy="240" r="2" fill="#A5B4FC" class="bf-p2"/>
    <circle cx="160" cy="284" r="2" fill="#C4B5FD" class="bf-p1"/>

    <!-- Pantalla facial -->
    <rect x="132" y="140" width="136" height="96" rx="34" fill="url(#bfFace)"/>
    <rect x="132" y="140" width="136" height="96" rx="34" stroke="#22D3EE" stroke-opacity="0.35" stroke-width="1"/>

    <!-- Ojos circuito -->
    <g class="bf-eye">
      <rect x="158" y="168" width="22" height="32" rx="11" fill="url(#bfCyan)"/>
      <rect x="220" y="168" width="22" height="32" rx="11" fill="url(#bfCyan)"/>
    </g>

    <!-- Sonrisa de señal -->
    <path d="M172 214 Q186 224 200 214 Q214 204 228 214" stroke="#67E8F9" stroke-width="3" stroke-linecap="round" fill="none"/>

    <!-- Lineas de circuito en el cuerpo -->
    <path d="M120 200 L104 200" stroke="#22D3EE" stroke-width="2" stroke-linecap="round" class="bf-wave1"/>
    <path d="M296 200 L280 200" stroke="#22D3EE" stroke-width="2" stroke-linecap="round" class="bf-wave2"/>

    <!-- Brazos flotantes de energia -->
    <ellipse cx="86" cy="212" rx="12" ry="20" fill="#6D28D9" opacity="0.85"/>
    <ellipse cx="314" cy="212" rx="12" ry="20" fill="#6D28D9" opacity="0.85"/>
  </g>

  <!-- Ondas de señal alrededor -->
  <g class="bf-wave1">
    <path d="M318 120 Q330 130 318 140" stroke="#22D3EE" stroke-width="2.5" stroke-linecap="round" fill="none"/>
    <path d="M328 112 Q346 130 328 148" stroke="#22D3EE" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6"/>
  </g>
  <g class="bf-wave2">
    <path d="M82 120 Q70 130 82 140" stroke="#A78BFA" stroke-width="2.5" stroke-linecap="round" fill="none"/>
    <path d="M72 112 Q54 130 72 148" stroke="#A78BFA" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6"/>
  </g>

  <!-- Datos flotantes -->
  <g fill="#818CF8" font-family="monospace" font-size="11" opacity="0.7">
    <text x="300" y="290" class="bf-p1">01</text>
    <text x="80" y="86" class="bf-p3">10</text>
    <text x="322" y="72" class="bf-p2">{ }</text>
  </g>

  <!-- Sombra flotante -->
  <ellipse cx="200" cy="342" rx="80" ry="12" fill="#4F46E5" opacity="0.18"/>
</svg>
