<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 280" fill="none">
  <defs>
    <linearGradient id="bg-i" x1="0" y1="0" x2="640" y2="280" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#085D55"/>
      <stop offset="100%" stop-color="#064A44"/>
    </linearGradient>
    <linearGradient id="glow-i" x1="200" y1="100" x2="200" y2="250" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#F2A900" stop-opacity="0.15"/>
      <stop offset="100%" stop-color="#F2A900" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="pie-1" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#F2A900"/>
      <stop offset="100%" stop-color="#D99700"/>
    </linearGradient>
    <linearGradient id="pie-2" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#2DD4A8"/>
      <stop offset="100%" stop-color="#1AAE8B"/>
    </linearGradient>
    <linearGradient id="bar-grad" x1="0" y1="1" x2="0" y2="0">
      <stop offset="0%" stop-color="#2DD4A8" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#2DD4A8"/>
    </linearGradient>
    <filter id="glow-i-f">
      <feGaussianBlur stdDeviation="4" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <clipPath id="pie-clip">
      <circle cx="0" cy="0" r="70"/>
    </clipPath>
  </defs>

  <!-- Background -->
  <rect width="640" height="280" fill="url(#bg-i)"/>

  <!-- Subtle pattern -->
  <g stroke="rgba(255,255,255,0.03)" stroke-width="0.5">
    <line x1="0" y1="56" x2="640" y2="56"/>
    <line x1="0" y1="112" x2="640" y2="112"/>
    <line x1="0" y1="168" x2="640" y2="168"/>
    <line x1="0" y1="224" x2="640" y2="224"/>
    <line x1="128" y1="0" x2="128" y2="280"/>
    <line x1="256" y1="0" x2="256" y2="280"/>
    <line x1="384" y1="0" x2="384" y2="280"/>
    <line x1="512" y1="0" x2="512" y2="280"/>
  </g>

  <!-- Glow accent -->
  <ellipse cx="200" cy="150" rx="180" ry="130" fill="url(#glow-i)"/>

  <!-- ===== LEFT: Portfolio pie chart ===== -->
  <g transform="translate(185, 140)">
    <!-- Outer ring shadow -->
    <circle cx="0" cy="0" r="78" fill="none" stroke="rgba(0,0,0,0.15)" stroke-width="6"/>

    <!-- Pie chart segments using stroke-dasharray technique -->
    <!-- Total circumference = 2*PI*70 ≈ 440 -->

    <!-- Segment 1: Gold/Accent - 40% = 176 -->
    <circle cx="0" cy="0" r="70" fill="none" stroke="url(#pie-1)" stroke-width="28"
      stroke-dasharray="176 264" stroke-dashoffset="0" transform="rotate(-90)"/>

    <!-- Segment 2: Teal/Green - 30% = 132 -->
    <circle cx="0" cy="0" r="70" fill="none" stroke="url(#pie-2)" stroke-width="28"
      stroke-dasharray="132 308" stroke-dashoffset="-176" transform="rotate(-90)"/>

    <!-- Segment 3: Navy - 20% = 88 -->
    <circle cx="0" cy="0" r="70" fill="none" stroke="#00244D" stroke-width="28"
      stroke-dasharray="88 352" stroke-dashoffset="-308" transform="rotate(-90)"/>

    <!-- Segment 4: Light - 10% = 44 -->
    <circle cx="0" cy="0" r="70" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="28"
      stroke-dasharray="44 396" stroke-dashoffset="-396" transform="rotate(-90)"/>

    <!-- Inner circle (donut hole) -->
    <circle cx="0" cy="0" r="46" fill="#074E48"/>
    <circle cx="0" cy="0" r="46" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>

    <!-- Center text -->
    <text x="0" y="-6" text-anchor="middle" fill="white" font-size="18" font-family="sans-serif" font-weight="800">100%</text>
    <text x="0" y="10" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">diversificado</text>

    <!-- Legend labels floating around pie -->
    <!-- Acciones -->
    <g transform="translate(95, -50)">
      <line x1="-10" y1="6" x2="0" y2="6" stroke="#F2A900" stroke-width="1.5" opacity="0.5"/>
      <circle cx="5" cy="6" r="3.5" fill="#F2A900"/>
      <text x="14" y="4" fill="rgba(255,255,255,0.7)" font-size="8" font-family="sans-serif">Acciones</text>
      <text x="14" y="14" fill="#F2A900" font-size="9" font-family="sans-serif" font-weight="700">40%</text>
    </g>
    <!-- Bonos -->
    <g transform="translate(95, 10)">
      <line x1="-10" y1="6" x2="0" y2="6" stroke="#2DD4A8" stroke-width="1.5" opacity="0.5"/>
      <circle cx="5" cy="6" r="3.5" fill="#2DD4A8"/>
      <text x="14" y="4" fill="rgba(255,255,255,0.7)" font-size="8" font-family="sans-serif">Bonos</text>
      <text x="14" y="14" fill="#2DD4A8" font-size="9" font-family="sans-serif" font-weight="700">30%</text>
    </g>
    <!-- CEDEARs -->
    <g transform="translate(95, 65)">
      <line x1="-10" y1="6" x2="0" y2="6" stroke="#00244D" stroke-width="1.5" opacity="0.5"/>
      <circle cx="5" cy="6" r="3.5" fill="#00244D" stroke="rgba(255,255,255,0.3)" stroke-width="0.5"/>
      <text x="14" y="4" fill="rgba(255,255,255,0.7)" font-size="8" font-family="sans-serif">CEDEARs</text>
      <text x="14" y="14" fill="rgba(255,255,255,0.6)" font-size="9" font-family="sans-serif" font-weight="700">20%</text>
    </g>
  </g>

  <!-- ===== RIGHT: Growth bar chart ===== -->
  <g transform="translate(400, 50)">
    <!-- Chart frame -->
    <rect x="0" y="0" width="200" height="160" rx="10" fill="rgba(0,0,0,0.15)" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>

    <!-- Title inside chart -->
    <text x="16" y="24" fill="white" font-size="10" font-family="sans-serif" font-weight="700">Rendimiento anual</text>
    <text x="16" y="36" fill="rgba(255,255,255,0.4)" font-size="7" font-family="sans-serif">Cartera modelo</text>

    <!-- Bars -->
    <g transform="translate(20, 50)">
      <!-- Y axis guide lines -->
      <line x1="0" y1="0" x2="165" y2="0" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
      <line x1="0" y1="25" x2="165" y2="25" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
      <line x1="0" y1="50" x2="165" y2="50" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
      <line x1="0" y1="75" x2="165" y2="75" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
      <line x1="0" y1="95" x2="165" y2="95" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>

      <!-- Bar: 2021 -->
      <rect x="8" y="55" width="20" height="40" rx="3" fill="url(#bar-grad)" opacity="0.5"/>
      <text x="18" y="105" text-anchor="middle" fill="rgba(255,255,255,0.35)" font-size="7" font-family="sans-serif">2021</text>

      <!-- Bar: 2022 -->
      <rect x="40" y="65" width="20" height="30" rx="3" fill="url(#bar-grad)" opacity="0.6"/>
      <text x="50" y="105" text-anchor="middle" fill="rgba(255,255,255,0.35)" font-size="7" font-family="sans-serif">2022</text>

      <!-- Bar: 2023 -->
      <rect x="72" y="35" width="20" height="60" rx="3" fill="url(#bar-grad)" opacity="0.75"/>
      <text x="82" y="105" text-anchor="middle" fill="rgba(255,255,255,0.35)" font-size="7" font-family="sans-serif">2023</text>

      <!-- Bar: 2024 -->
      <rect x="104" y="18" width="20" height="77" rx="3" fill="url(#bar-grad)" opacity="0.9"/>
      <text x="114" y="105" text-anchor="middle" fill="rgba(255,255,255,0.35)" font-size="7" font-family="sans-serif">2024</text>

      <!-- Bar: 2025 (highlighted) -->
      <rect x="136" y="5" width="20" height="90" rx="3" fill="#F2A900"/>
      <text x="146" y="105" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="7" font-family="sans-serif" font-weight="600">2025</text>
      <!-- Value label on top -->
      <g transform="translate(146, -2)">
        <rect x="-16" y="-12" width="32" height="14" rx="3" fill="#F2A900"/>
        <text x="0" y="-2" text-anchor="middle" fill="#00244D" font-size="7" font-family="sans-serif" font-weight="800">+42%</text>
      </g>

      <!-- Trend line -->
      <polyline points="18,55 50,63 82,33 114,16 146,3"
        stroke="rgba(255,255,255,0.2)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3,2"/>
    </g>
  </g>

  <!-- ===== BOTTOM-RIGHT: Risk meter ===== -->
  <g transform="translate(420, 225)">
    <rect x="0" y="0" width="160" height="42" rx="8" fill="rgba(0,0,0,0.15)" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
    <text x="12" y="16" fill="rgba(255,255,255,0.5)" font-size="7" font-family="sans-serif">Nivel de riesgo</text>

    <!-- Risk bar -->
    <rect x="12" y="24" width="100" height="6" rx="3" fill="rgba(255,255,255,0.08)"/>
    <!-- Filled portion (moderate) -->
    <rect x="12" y="24" width="45" height="6" rx="3" fill="#2DD4A8"/>
    <!-- Indicator dot -->
    <circle cx="57" cy="27" r="5" fill="#2DD4A8" stroke="#074E48" stroke-width="2"/>

    <!-- Label -->
    <text x="120" y="30" fill="#2DD4A8" font-size="8" font-family="sans-serif" font-weight="700">Moderado</text>
  </g>

  <!-- Floating decorative elements -->
  <!-- Coin icon top-right -->
  <g transform="translate(570, 40)" opacity="0.15">
    <circle cx="15" cy="15" r="14" stroke="white" stroke-width="1.5" fill="none"/>
    <text x="15" y="20" text-anchor="middle" fill="white" font-size="14" font-family="serif" font-weight="700">$</text>
  </g>

  <!-- Shield icon bottom-left (protection/risk management) -->
  <g transform="translate(45, 200)" opacity="0.12">
    <path d="M15,2 L28,8 L28,18 C28,28 15,34 15,34 C15,34 2,28 2,18 L2,8 Z" stroke="white" stroke-width="1.5" fill="none"/>
    <polyline points="9,18 13,22 21,14" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- Target/bullseye icon top-left -->
  <g transform="translate(55, 45)" opacity="0.12">
    <circle cx="14" cy="14" r="12" stroke="white" stroke-width="1" fill="none"/>
    <circle cx="14" cy="14" r="7" stroke="white" stroke-width="1" fill="none"/>
    <circle cx="14" cy="14" r="2.5" fill="white"/>
  </g>

  <!-- Trending up arrow -->
  <g transform="translate(560, 240)" opacity="0.1">
    <polyline points="0,20 12,8 20,14 32,0" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <polyline points="22,0 32,0 32,10" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- Corner accent dots -->
  <circle cx="24" cy="24" r="3" fill="#F2A900" opacity="0.2"/>
  <circle cx="616" cy="24" r="3" fill="#2DD4A8" opacity="0.2"/>
  <circle cx="24" cy="256" r="3" fill="#2DD4A8" opacity="0.2"/>
  <circle cx="616" cy="256" r="3" fill="#F2A900" opacity="0.2"/>
</svg>
