<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     id="mcx-root"
     width="120" height="44"
     viewBox="0 0 120 44"
     role="img">
  <title>MoveCX</title>

  <defs>
    <style><![CDATA[
      @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@800&display=swap');
    ]]></style>
  </defs>

  <!-- Linha 1: logotipo — tudo branco, fundo transparente -->
  <text id="mcx-text"
        x="0" y="25"
        font-family="'Outfit', 'Arial Black', sans-serif"
        font-weight="800"
        font-size="27"
        letter-spacing="0"
        fill="#ffffff">
    MoveCX
  </text>

  <!-- Linha 2: indicador — tudo branco -->
  <rect   id="mcx-line" x="0"    y="33" width="84" height="3" rx="2" fill="rgba(255,255,255,0.5)"/>
  <circle id="mcx-d1"   cx="92.5"  cy="34.5" r="3.5" fill="#ffffff"/>
  <circle id="mcx-d2"   cx="104.5" cy="34.5" r="3.5" fill="#ffffff"/>
  <circle id="mcx-d3"   cx="116.5" cy="34.5" r="3.5" fill="#ffffff"/>

  <script type="text/javascript"><![CDATA[
    (function () {
      function ajustar() {
        var txt = document.getElementById('mcx-text');
        var W   = txt.getBBox().width;
        var r = 3.5, gap = 5;
        var d3 = W - r;
        var d2 = d3 - (2 * r + gap);
        var d1 = d2 - (2 * r + gap);
        var lw = Math.max(0, d1 - r - gap);

        document.getElementById('mcx-line').setAttribute('width', lw);
        document.getElementById('mcx-d1').setAttribute('cx', d1);
        document.getElementById('mcx-d2').setAttribute('cx', d2);
        document.getElementById('mcx-d3').setAttribute('cx', d3);

        var svg = document.getElementById('mcx-root');
        svg.setAttribute('width',   W);
        svg.setAttribute('viewBox', '0 0 ' + W + ' 44');
      }

      if (document.fonts && document.fonts.ready) {
        document.fonts.ready.then(ajustar);
      } else {
        window.addEventListener('load', ajustar);
      }
    })();
  ]]></script>
</svg>
