From 9ef05f8eeaa6436a50df37f0285e6da568b7edc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauricio=20L=C3=B3pez=20Coria?=
 <mlopez@mini.hostingdelsur.net>
Date: Wed, 1 Jul 2026 23:52:37 -0300
Subject: [PATCH] fix: DifferenceCards grid uniforme 3 columnas iguales
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sacar bento grid asimétrico (hero card col-span-2)
- Todas las cards mismo tamaño, padding y tipografía
- Eliminar 'Equipo de 3 ingenieros SRE' y avatares
- Renombrar clases bento-* → diff-*
---
 src/components/DifferenceCards.astro | 83 +++++-----------------------
 1 file changed, 15 insertions(+), 68 deletions(-)

diff --git a/src/components/DifferenceCards.astro b/src/components/DifferenceCards.astro
index 7e12c8b..8a43ba7 100644
--- a/src/components/DifferenceCards.astro
+++ b/src/components/DifferenceCards.astro
@@ -1,6 +1,5 @@
 ---
-// "Por qué elegirnos" — Bento grid with glass cards + magnetic hover glow
-// Phase 3 — Organic Fluidity Premium
+// "Por qué elegirnos" — Uniform 3-column grid with glass cards
 import SectionEyebrow from './SectionEyebrow.astro';
 import type { TranslationKey } from '@/i18n/ui';
 import MateIcon from './icons/MateIcon.astro';
@@ -12,16 +11,8 @@ interface Props {
 }
 const { t } = Astro.props;
 
-interface DiffItem {
-  Icon?: typeof MateIcon;
-  titleKey: TranslationKey;
-  bodyKey: TranslationKey;
-  hero?: boolean;
-  area?: string;
-}
-
-const items: DiffItem[] = [
-  { Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey, hero: true },
+const items = [
+  { Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey },
   { Icon: SovereigntyIcon, titleKey: 'diff.sovereignty.title' as TranslationKey, bodyKey: 'diff.sovereignty.body' as TranslationKey },
   { Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey },
 ];
@@ -38,49 +29,18 @@ const items: DiffItem[] = [
       </p>
     </div>
 
-    <!-- Bento Grid: asymmetric 3-column layout -->
-    <div class="bento-grid">
+    <div class="diff-grid">
       {items.map((item, i) => (
-        <article
-          class:list={[
-            'glass-card bento-item p-8 md:p-10 flex flex-col',
-            { 'bento-hero md:col-span-2 md:row-span-2': item.hero },
-          ]}
-          data-bento-index={i}
-        >
+        <article class="glass-card diff-card p-8 flex flex-col" data-diff-index={i}>
           <div class="icon-circle mb-6">
-            {item.Icon && <item.Icon class="w-7 h-7" />}
+            <item.Icon class="w-7 h-7" />
           </div>
-          <h3
-            class:list={[
-              'mb-4',
-              { 'text-2xl md:text-3xl': item.hero, 'text-xl md:text-2xl': !item.hero },
-            ]}
-            style="color: var(--hds-fg); font-weight: 600;"
-          >
+          <h3 class="text-xl md:text-2xl font-semibold mb-4" style="color: var(--hds-fg);">
             {t(item.titleKey)}
           </h3>
-          <p
-            class:list={[
-              'leading-relaxed',
-              { 'text-base md:text-lg': item.hero, 'text-[15px]': !item.hero },
-            ]}
-            style="color: var(--hds-fg-soft);"
-          >
+          <p class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
             {t(item.bodyKey)}
           </p>
-
-          {item.hero && (
-            <div class="mt-6 pt-6 border-t flex items-center gap-4" style="border-color: var(--glass-border);">
-              <div class="flex -space-x-2">
-                <div class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-bold text-white" style="background: var(--color-hds-naranja);">M</div>
-                <div class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-bold" style="background: var(--color-hds-coral); color: var(--hds-tinta);">+2</div>
-              </div>
-              <span class="text-sm" style="color: var(--hds-fg-soft);">
-                {t('diff.eyebrow') === 'La diferencia' ? 'Equipo de 3 ingenieros SRE' : 'Team of 3 SRE engineers'}
-              </span>
-            </div>
-          )}
         </article>
       ))}
     </div>
@@ -93,8 +53,7 @@ const items: DiffItem[] = [
 
   gsap.registerPlugin(ScrollTrigger);
 
-  // Mouse-tracking glow on glass cards
-  document.querySelectorAll('.bento-item').forEach((card) => {
+  document.querySelectorAll('.diff-card').forEach((card) => {
     card.addEventListener('mousemove', (e) => {
       const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
       const x = ((e.clientX - rect.left) / rect.width) * 100;
@@ -104,12 +63,11 @@ const items: DiffItem[] = [
     });
   });
 
-  // ScrollTrigger stagger reveal
   const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   if (!prefersReduced) {
-    gsap.from('.bento-item', {
+    gsap.from('.diff-card', {
       scrollTrigger: {
-        trigger: '.bento-grid',
+        trigger: '.diff-grid',
         start: 'top 80%',
         toggleActions: 'play none none none',
       },
@@ -123,31 +81,20 @@ const items: DiffItem[] = [
 </script>
 
 <style>
-  .bento-grid {
+  .diff-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.5rem;
   }
 
   @media (min-width: 768px) {
-    .bento-grid {
+    .diff-grid {
       grid-template-columns: repeat(3, 1fr);
-      grid-auto-rows: auto;
       gap: 1.5rem;
     }
   }
 
-  .bento-item {
-    min-height: 200px;
-  }
-
-  .bento-hero {
-    min-height: 320px;
-  }
-
-  @media (min-width: 768px) {
-    .bento-hero {
-      min-height: 380px;
-    }
+  .diff-card {
+    min-height: 240px;
   }
 </style>