feat: adicionar ilustracao de vento paralelo ao galpao

app/src/components/WindFlowGrid2D.tsx

@@ -450,10 +450,10 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
 
       case 'warehouse':
         return (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
             {/* Caso 1 */}
             <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
-              <span className="text-xs font-bold text-sky-400">Caso A: Pressões de Vento Externas</span>
+              <span className="text-xs font-bold text-sky-400">Caso A: Vento Perpendicular (90°)</span>
               <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
@@ -466,12 +466,36 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
                   <path d="M 110,130 L 110,85 L 150,55 L 190,85 L 190,130 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                 </svg>
               </div>
-              <p className="text-[10px] text-muted-foreground leading-snug">O vento bate na parede esquerda (barlavento - pressão positiva) e decola no telhado de sotavento (sucção).</p>
+              <p className="text-[10px] text-muted-foreground leading-snug">Vento incide a 90° (perpendicular à cumeeira). Pressão positiva na fachada de barlavento e sucção no telhado e sotavento.</p>
             </div>
 
-            {/* Caso 2 */}
+            {/* Caso 2: Vento Paralelo */}
             <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
-              <span className="text-xs font-bold text-orange-400">Caso B: Efeito de Pressão Interna (+Cpi)</span>
+              <span className="text-xs font-bold text-emerald-400">Caso B: Vento Paralelo (0°)</span>
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+                <svg viewBox="0 0 300 150" className="w-full h-full">
+                  {styleBlock}
+                  <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
+                  
+                  {/* Galpão visto de lado (retângulo) */}
+                  <rect x="80" y="70" width="140" height="60" fill="#475569" stroke="#64748b" strokeWidth="2" />
+                  
+                  {/* Linhas de vento (escoamento sobre o teto reto) */}
+                  <path d="M -20,15 L 320,15" className="wind-line-slow" />
+                  <path d="M -20,40 Q 80,35 150,40 T 320,45" className="wind-line-fast" />
+                  <path d="M -20,85 L 80,85" className="wind-line" />
+                  
+                  {/* Esteira turbulenta no telhado e atrás */}
+                  <path d="M 80,70 Q 110,50 150,70" fill="none" stroke="#ef4444" strokeWidth="1.5" strokeDasharray="3 6" />
+                  <path d="M 220,70 Q 250,90 280,110" fill="none" stroke="#ef4444" strokeWidth="1.5" strokeDasharray="3 6" />
+                </svg>
+              </div>
+              <p className="text-[10px] text-muted-foreground leading-snug">Vento incide a 0° (paralelo à cumeeira). O fluxo contorna o oitão frontal, gerando forte sucção nas bordas longitudinais.</p>
+            </div>
+
+            {/* Caso 3 */}
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
+              <span className="text-xs font-bold text-orange-400">Caso C: Pressão Interna (+Cpi)</span>
               <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
@@ -488,9 +512,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
               <p className="text-[10px] text-muted-foreground leading-snug">Com abertura na parede de ataque, a pressão interna "infla" a estrutura, empurrando paredes e teto para fora.</p>
             </div>
 
-            {/* Caso 3 */}
+            {/* Caso 4 */}
             <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
-              <span className="text-xs font-bold text-blue-400">Caso C: Efeito de Sucção Interna (-Cpi)</span>
+              <span className="text-xs font-bold text-blue-400">Caso D: Sucção Interna (-Cpi)</span>
               <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}