<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 280" fill="none">
  <defs>
    <linearGradient id="bg-c" x1="0" y1="0" x2="640" y2="280" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#00244D"/>
      <stop offset="100%" stop-color="#064A44"/>
    </linearGradient>
    <linearGradient id="glow-c" x1="320" y1="80" x2="320" y2="240" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#F2A900" stop-opacity="0.18"/>
      <stop offset="100%" stop-color="#F2A900" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="env-face" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1A3A5C"/>
      <stop offset="100%" stop-color="#0D1B2A"/>
    </linearGradient>
    <linearGradient id="env-gold" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#F2A900"/>
      <stop offset="100%" stop-color="#D99700"/>
    </linearGradient>
    <linearGradient id="growth-line" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#2DD4A8" stop-opacity="0"/>
      <stop offset="15%" stop-color="#2DD4A8"/>
      <stop offset="85%" stop-color="#2DD4A8"/>
      <stop offset="100%" stop-color="#2DD4A8" stop-opacity="0"/>
    </linearGradient>
    <filter id="glow-c-f">
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

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

  <!-- Subtle grid -->
  <g stroke="rgba(255,255,255,0.04)" stroke-width="0.5">
    <line x1="0" y1="70" x2="640" y2="70"/>
    <line x1="0" y1="140" x2="640" y2="140"/>
    <line x1="0" y1="210" x2="640" y2="210"/>
    <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 -->
  <ellipse cx="320" cy="150" rx="220" ry="120" fill="url(#glow-c)"/>

  <!-- ===== LEFT: Email sequence (3 stacked envelopes) ===== -->
  <g transform="translate(100, 55)">
    <!-- Envelope 3 (back) -->
    <g transform="translate(16, 0)" opacity="0.35">
      <rect x="0" y="8" width="120" height="80" rx="8" fill="url(#env-face)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
      <path d="M4,12 L60,56 L116,12" stroke="rgba(255,255,255,0.15)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </g>

    <!-- Envelope 2 (middle) -->
    <g transform="translate(8, 18)" opacity="0.6">
      <rect x="0" y="8" width="120" height="80" rx="8" fill="url(#env-face)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
      <path d="M4,12 L60,56 L116,12" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </g>

    <!-- Envelope 1 (front, open) -->
    <g transform="translate(0, 36)">
      <rect x="0" y="8" width="120" height="80" rx="8" fill="url(#env-face)" stroke="rgba(255,255,255,0.15)" stroke-width="1.5"/>
      <!-- Open flap -->
      <path d="M2,12 L60,-20 L118,12" stroke="#F2A900" stroke-width="1.5" fill="rgba(0,36,77,0.8)" stroke-linejoin="round"/>
      <!-- Envelope V -->
      <path d="M4,12 L60,56 L116,12" stroke="#F2A900" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <!-- Letter peeking out -->
      <rect x="18" y="-12" width="84" height="28" rx="4" fill="rgba(255,255,255,0.9)"/>
      <line x1="30" y1="-4" x2="90" y2="-4" stroke="#00244D" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <line x1="30" y1="4" x2="76" y2="4" stroke="#00244D" stroke-width="2" stroke-linecap="round" opacity="0.2"/>
      <line x1="30" y1="10" x2="66" y2="10" stroke="#00244D" stroke-width="2" stroke-linecap="round" opacity="0.15"/>
    </g>

    <!-- "7 días" label -->
    <g transform="translate(130, 80)">
      <rect x="0" y="0" width="52" height="22" rx="6" fill="#F2A900"/>
      <text x="26" y="15" text-anchor="middle" fill="#00244D" font-size="10" font-family="sans-serif" font-weight="800">7 DÍAS</text>
    </g>
  </g>

  <!-- ===== RIGHT: Progress/growth visualization ===== -->
  <g transform="translate(340, 40)">
    <!-- Card frame -->
    <rect x="0" y="0" width="240" height="190" rx="12" fill="rgba(0,0,0,0.18)" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>

    <!-- Title -->
    <text x="20" y="28" fill="white" font-size="11" font-family="sans-serif" font-weight="700">Tu progreso como inversor</text>
    <text x="20" y="42" fill="rgba(255,255,255,0.4)" font-size="8" font-family="sans-serif">De cero a inversor en 7 días</text>

    <!-- Day progress bars -->
    <g transform="translate(20, 58)">
      <!-- Day labels & bars -->
      <text x="0" y="10" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">Día 1</text>
      <rect x="40" y="2" width="170" height="10" rx="5" fill="rgba(255,255,255,0.06)"/>
      <rect x="40" y="2" width="170" height="10" rx="5" fill="#2DD4A8" opacity="0.9"/>

      <text x="0" y="28" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">Día 2</text>
      <rect x="40" y="20" width="170" height="10" rx="5" fill="rgba(255,255,255,0.06)"/>
      <rect x="40" y="20" width="145" height="10" rx="5" fill="#2DD4A8" opacity="0.75"/>

      <text x="0" y="46" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">Día 3</text>
      <rect x="40" y="38" width="170" height="10" rx="5" fill="rgba(255,255,255,0.06)"/>
      <rect x="40" y="38" width="120" height="10" rx="5" fill="#2DD4A8" opacity="0.6"/>

      <text x="0" y="64" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">Día 4</text>
      <rect x="40" y="56" width="170" height="10" rx="5" fill="rgba(255,255,255,0.06)"/>
      <rect x="40" y="56" width="95" height="10" rx="5" fill="#2DD4A8" opacity="0.45"/>

      <text x="0" y="82" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">Día 5</text>
      <rect x="40" y="74" width="170" height="10" rx="5" fill="rgba(255,255,255,0.06)"/>
      <rect x="40" y="74" width="70" height="10" rx="5" fill="#F2A900" opacity="0.5"/>

      <text x="0" y="100" fill="rgba(255,255,255,0.4)" font-size="8" font-family="sans-serif">Día 6</text>
      <rect x="40" y="92" width="170" height="10" rx="5" fill="rgba(255,255,255,0.06)"/>

      <text x="0" y="118" fill="rgba(255,255,255,0.4)" font-size="8" font-family="sans-serif">Día 7</text>
      <rect x="40" y="110" width="170" height="10" rx="5" fill="rgba(255,255,255,0.06)"/>
    </g>
  </g>

  <!-- ===== BOTTOM: Growth trend line ===== -->
  <g transform="translate(100, 225)">
    <polyline points="0,30 60,24 120,18 180,14 240,8 340,2 440,0"
      stroke="url(#growth-line)" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow-c-f)"/>
    <!-- Dot at end -->
    <circle cx="440" cy="0" r="4" fill="#2DD4A8"/>
    <circle cx="440" cy="0" r="7" fill="none" stroke="#2DD4A8" stroke-width="1" opacity="0.3"/>
  </g>

  <!-- Floating decorative elements -->
  <!-- Compass icon top-left (finding your way) -->
  <g transform="translate(45, 40)" opacity="0.12">
    <circle cx="15" cy="15" r="13" stroke="white" stroke-width="1.5" fill="none"/>
    <path d="M15,5 L17,13 L15,15 L13,13 Z" fill="white" opacity="0.7"/>
    <path d="M15,25 L13,17 L15,15 L17,17 Z" fill="white" opacity="0.4"/>
  </g>

  <!-- Checkmark icon bottom-left -->
  <g transform="translate(55, 210)" opacity="0.12">
    <circle cx="12" cy="12" r="11" stroke="white" stroke-width="1.5" fill="none"/>
    <polyline points="6,12 10,16 18,8" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- Trending arrow top-right -->
  <g transform="translate(560, 40)" opacity="0.1">
    <polyline points="0,24 10,16 20,18 32,4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <polyline points="22,4 32,4 32,14" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- Dollar sign bottom-right -->
  <g transform="translate(580, 200)" opacity="0.1">
    <text x="0" y="28" fill="white" font-size="32" font-family="sans-serif" font-weight="800">$</text>
  </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>
