Imporve the UI 5

frontend/src/components/subscription/SubscriptionPricingCards.tsx

@@ -94,7 +94,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
 
   // Format limit display with emoji and user-friendly text
   const formatLimit = (value: number | string | null | undefined, unlimitedKey: string): string => {
-    if (!value || value === -1 || value === 'unlimited') {
+    if (!value || value === -1 || (typeof value === 'string' && value.toLowerCase() === 'unlimited')) {
       return t(unlimitedKey);
     }
     return value.toString();
@@ -174,16 +174,6 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
         </div>
       </div>
 
-      {/* Selection Mode Helper Text */}
-      {mode === 'selection' && (
-        <div className="text-center mb-6">
-          <p className="text-sm text-[var(--text-secondary)] flex items-center justify-center gap-2">
-            <span className="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
-            {t('ui.click_to_select', 'Haz clic en cualquier plan para seleccionarlo')}
-          </p>
-        </div>
-      )}
-
       {/* Simplified Plans Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start lg:items-stretch">
         {Object.entries(plans).map(([tier, plan]) => {
@@ -240,7 +230,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
               {/* Plan Header */}
               <div className="mb-6">
                 <h3 className={`text-2xl font-bold mb-2 ${(isPopular || isSelected) ? 'text-white' : 'text-[var(--text-primary)]'}`}>
-                  {plan.name}
+                  {t(`plans.${tier}.name`, plan.name)}
                 </h3>
                 <p className={`text-sm ${(isPopular || isSelected) ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
                   {plan.tagline_key ? t(plan.tagline_key) : plan.tagline || ''}