<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg">
  <rect width="1000" height="460" fill="#050b10"/>
  <text x="30" y="45" font-family="IBM Plex Mono, monospace" font-size="13" letter-spacing="2" fill="#1de9b6" font-weight="600">DOCKER-COMPOSE · STACK DE PRODUÇÃO</text>

  <!-- host box -->
  <rect x="30" y="70" width="940" height="360" rx="16" fill="none" stroke="rgba(180,169,214,0.25)" stroke-dasharray="6 5"/>
  <text x="55" y="100" font-family="IBM Plex Mono, monospace" font-size="12" fill="#8fa8a5">VPS Hetzner CX23 · 2 vCPU · 4GB RAM · 40GB SSD · US$6,49/mês</text>

  <!-- Nginx -->
  <g transform="translate(55,130)">
    <rect width="890" height="55" rx="10" fill="#0c1720" stroke="#2b8ce0" stroke-width="2"/>
    <text x="20" y="34" font-family="Inter, sans-serif" font-size="15" font-weight="700" fill="#f0f7f6">Nginx (fora do Docker)</text>
    <text x="330" y="34" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5">proxy reverso + SSL via Certbot, renovação a cada 90 dias</text>
  </g>
  <line x1="500" y1="185" x2="500" y2="210" stroke="#1de9b6" stroke-width="2"/>

  <!-- 3 containers -->
  <g transform="translate(55,215)">
    <rect width="280" height="180" rx="12" fill="#0c1720" stroke="#1de9b6" stroke-width="2"/>
    <text x="140" y="38" font-family="Inter, sans-serif" font-size="16" font-weight="700" fill="#f0f7f6" text-anchor="middle">n8n</text>
    <text x="140" y="60" font-family="IBM Plex Mono, monospace" font-size="12" fill="#2b8ce0" text-anchor="middle">porta 5678</text>
    <text x="140" y="90" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">image: n8nio/n8n:latest</text>
    <text x="140" y="110" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">basic auth ativado</text>
    <text x="140" y="140" font-family="Inter, sans-serif" font-size="11" fill="#8fa8a5" text-anchor="middle">volume: ~/.n8n</text>
    <text x="140" y="160" font-family="Inter, sans-serif" font-size="11" fill="#8fa8a5" text-anchor="middle">restart: always</text>
  </g>

  <g transform="translate(360,215)">
    <rect width="280" height="180" rx="12" fill="#0c1720" stroke="#1de9b6" stroke-width="2"/>
    <text x="140" y="38" font-family="Inter, sans-serif" font-size="16" font-weight="700" fill="#f0f7f6" text-anchor="middle">Evolution API</text>
    <text x="140" y="60" font-family="IBM Plex Mono, monospace" font-size="12" fill="#2b8ce0" text-anchor="middle">porta 8080</text>
    <text x="140" y="90" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">image: atendai/evolution-api</text>
    <text x="140" y="110" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">sessão WhatsApp Web</text>
    <text x="140" y="140" font-family="Inter, sans-serif" font-size="11" fill="#8fa8a5" text-anchor="middle">volume: evolution_data</text>
    <text x="140" y="160" font-family="Inter, sans-serif" font-size="11" fill="#8fa8a5" text-anchor="middle">restart: always</text>
  </g>

  <g transform="translate(665,215)">
    <rect width="280" height="180" rx="12" fill="#0c1720" stroke="#2b8ce0" stroke-width="2" stroke-dasharray="4 3"/>
    <text x="140" y="38" font-family="Inter, sans-serif" font-size="16" font-weight="700" fill="#f0f7f6" text-anchor="middle">Redis</text>
    <text x="140" y="60" font-family="IBM Plex Mono, monospace" font-size="12" fill="#2b8ce0" text-anchor="middle">porta 6379</text>
    <text x="140" y="90" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">image: redis:7-alpine</text>
    <text x="140" y="110" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">maxmemory 256mb</text>
    <text x="140" y="130" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">policy: allkeys-lru</text>
    <text x="140" y="160" font-family="Inter, sans-serif" font-size="11" fill="#8fa8a5" text-anchor="middle">volume: redis_data</text>
  </g>

  <line x1="195" y1="215" x2="195" y2="195" stroke="#8fa8a5" stroke-width="1.5"/>
  <line x1="500" y1="215" x2="500" y2="195" stroke="#8fa8a5" stroke-width="1.5"/>
  <line x1="805" y1="215" x2="805" y2="195" stroke="#8fa8a5" stroke-width="1.5"/>
  <line x1="195" y1="195" x2="805" y2="195" stroke="#8fa8a5" stroke-width="1.5"/>
</svg>
