From 82d92054dc0c0c017b523952ecec3850fb9b4d2c Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Tue, 24 Mar 2026 21:35:41 -0700
Subject: [PATCH] =?UTF-8?q?Actualizar=20paleta=20de=20colores=20real=20de?=
 =?UTF-8?q?=20horux360.com=20-=20azul+p=C3=BArpura+verde=20correcto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 visual-proposal/index.html | 107 ++++++++++++++++++++++---------------
 1 file changed, 63 insertions(+), 44 deletions(-)

diff --git a/visual-proposal/index.html b/visual-proposal/index.html
index f920db3..c30fc13 100644
--- a/visual-proposal/index.html
+++ b/visual-proposal/index.html
@@ -45,13 +45,13 @@
   .desktop-bar { height: 36px; background: #334155; display: flex; align-items: center; padding: 0 14px; gap: 8px; }
   .desktop-dot { width: 12px; height: 12px; border-radius: 50%; }
   .desktop-dot.r { background: #EF4444; }
-  .desktop-dot.y { background: #F59E0B; }
-  .desktop-dot.g { background: #10B981; }
+  .desktop-dot.y { background: #7C3AED; }
+  .desktop-dot.g { background: #22C55E; }
   .desktop-content { background: #fff; }
 
   /* IG Post mockup */
   .ig-header { display: flex; align-items: center; padding: 12px 16px; background: #fff; }
-  .ig-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #1E3A5F); display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; }
+  .ig-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #1E40AF); display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; }
   .ig-user { margin-left: 10px; }
   .ig-user strong { font-size: 13px; color: #262626; display: block; }
   .ig-user span { font-size: 11px; color: #8e8e8e; }
@@ -94,7 +94,7 @@
 <!-- 1. PALETA DE COLORES -->
 <div class="section">
   <div class="section-title">1. Paleta de Colores</div>
-  <div class="section-subtitle">Cuatro colores que transmiten confianza fintech + urgencia de accion</div>
+  <div class="section-subtitle">Paleta real extraída del CSS de horux360.com — Azul + Púrpura como eje, verde para éxito, rojo para alertas</div>
 
   <div class="palette-grid">
     <div class="palette-card">
@@ -102,16 +102,35 @@
       <div class="palette-info"><strong>Azul Horux</strong><small>Principal. Titulares, CTAs, fondos hero.</small></div>
     </div>
     <div class="palette-card">
-      <div class="palette-swatch" style="background: #1E3A5F;"><span>#1E3A5F</span></div>
+      <div class="palette-swatch" style="background: #1E40AF;"><span>#1E40AF</span></div>
       <div class="palette-info"><strong>Azul Profundo</strong><small>Fondos oscuros, testimonios, contraste.</small></div>
     </div>
     <div class="palette-card">
-      <div class="palette-swatch" style="background: #10B981;"><span>#10B981</span></div>
+      <div class="palette-swatch" style="background: #22C55E;"><span>#22C55E</span></div>
       <div class="palette-info"><strong>Verde Exito</strong><small>Ahorro, resultados positivos, checks.</small></div>
     </div>
     <div class="palette-card">
-      <div class="palette-swatch" style="background: #F59E0B;"><span>#F59E0B</span></div>
-      <div class="palette-info"><strong>Naranja Alerta</strong><small>Urgencia, datos impactantes, warnings.</small></div>
+      <div class="palette-swatch" style="background: #7C3AED;"><span>#7C3AED</span></div>
+      <div class="palette-info"><strong>Púrpura Acento</strong><small>Secundario. Destacados, acentos, CTAs alternos.</small></div>
+    </div>
+  </div>
+
+  <div class="palette-grid">
+    <div class="palette-card">
+      <div class="palette-swatch" style="background: #6D28D9;"><span>#6D28D9</span></div>
+      <div class="palette-info"><strong>Púrpura Oscuro</strong><small>Variante profunda del acento, gradientes.</small></div>
+    </div>
+    <div class="palette-card">
+      <div class="palette-swatch" style="background: #DC2626;"><span>#DC2626</span></div>
+      <div class="palette-info"><strong>Rojo Alerta</strong><small>Alertas, errores, datos negativos.</small></div>
+    </div>
+    <div class="palette-card">
+      <div class="palette-swatch" style="background: #166534;"><span>#166534</span></div>
+      <div class="palette-info"><strong>Verde Oscuro</strong><small>Variante del verde éxito, fondos.</small></div>
+    </div>
+    <div class="palette-card">
+      <div class="palette-swatch" style="background: #94A3B8;"><span>#94A3B8</span></div>
+      <div class="palette-info"><strong>Gris Medio</strong><small>Textos secundarios, subtítulos.</small></div>
     </div>
   </div>
 
@@ -129,8 +148,8 @@
       <div class="palette-info"><strong>Negro Azulado</strong><small>Textos oscuros, fondos premium.</small></div>
     </div>
     <div class="palette-card">
-      <div class="palette-swatch" style="background: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%);"><span>Gradiente</span></div>
-      <div class="palette-info"><strong>Gradiente Horux</strong><small>Portadas, CTAs premium, headers.</small></div>
+      <div class="palette-swatch" style="background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);"><span>Gradiente Horux</span></div>
+      <div class="palette-info"><strong>Gradiente Azul→Púrpura</strong><small>Portadas, CTAs premium, headers. Refleja la identidad real del sitio.</small></div>
     </div>
   </div>
 
@@ -165,7 +184,7 @@
           <div class="carousel-container">
             <div class="carousel-slides" id="igCarousel">
               <!-- Slide 1: Cover -->
-              <div class="carousel-slide" style="background: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center;">
+              <div class="carousel-slide" style="background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center;">
                 <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
                   <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
                 </div>
@@ -204,37 +223,37 @@
                     <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Cumple requisitos del SAT</span>
                   </div>
                 </div>
-                <div style="margin-top: 28px; padding: 16px; background: #FFF7ED; border-radius: 12px; border-left: 4px solid #F59E0B;">
-                  <span style="font-family: Inter, sans-serif; font-size: 13px; color: #92400E;">Pero cumplir ≠ optimizar. Tu contador hace su trabajo. La pregunta es: ¿quien ve el panorama completo?</span>
+                <div style="margin-top: 28px; padding: 16px; background: #F5F3FF; border-radius: 12px; border-left: 4px solid #7C3AED;">
+                  <span style="font-family: Inter, sans-serif; font-size: 13px; color: #5B21B6;">Pero cumplir ≠ optimizar. Tu contador hace su trabajo. La pregunta es: ¿quien ve el panorama completo?</span>
                 </div>
               </div>
 
               <!-- Slide 3: Control Fiscal -->
               <div class="carousel-slide" style="background: #FFFFFF; display: flex; flex-direction: column; justify-content: center; padding: 40px;">
-                <div style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13px; color: #10B981; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;">Lo que hace el control fiscal</div>
+                <div style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13px; color: #22C55E; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;">Lo que hace el control fiscal</div>
                 <div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 22px; color: #0F172A; margin-bottom: 28px; line-height: 1.3;">Te ahorra dinero.</div>
                 <div style="display: flex; flex-direction: column; gap: 16px;">
                   <div style="display: flex; align-items: center; gap: 12px;">
                     <div style="width: 36px; height: 36px; border-radius: 10px; background: #ECFDF5; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
-                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><path d="M13 7l5 5-5 5M6 7l5 5-5 5"/></svg>
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"><path d="M13 7l5 5-5 5M6 7l5 5-5 5"/></svg>
                     </div>
                     <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Concilia facturas automaticamente</span>
                   </div>
                   <div style="display: flex; align-items: center; gap: 12px;">
                     <div style="width: 36px; height: 36px; border-radius: 10px; background: #ECFDF5; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
-                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
                     </div>
                     <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Alertas del SAT en tiempo real</span>
                   </div>
                   <div style="display: flex; align-items: center; gap: 12px;">
                     <div style="width: 36px; height: 36px; border-radius: 10px; background: #ECFDF5; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
-                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/><path d="M9 12l2 2 4-4"/></svg>
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/><path d="M9 12l2 2 4-4"/></svg>
                     </div>
                     <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Analiza tu regimen fiscal optimo</span>
                   </div>
                   <div style="display: flex; align-items: center; gap: 12px;">
                     <div style="width: 36px; height: 36px; border-radius: 10px; background: #ECFDF5; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
-                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>
                     </div>
                     <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Proyecciones de ahorro mensual</span>
                   </div>
@@ -251,10 +270,10 @@
                     <div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 22px; color: #EF4444; margin-top: 8px;">–$0</div>
                     <div style="font-family: Inter, sans-serif; font-size: 11px; color: #94A3B8; margin-top: 4px;">ahorro mensual</div>
                   </div>
-                  <div style="flex: 1; background: #fff; border-radius: 16px; padding: 20px; text-align: center; border: 2px solid #10B981; box-shadow: 0 4px 12px rgba(16,185,129,0.15);">
+                  <div style="flex: 1; background: #fff; border-radius: 16px; padding: 20px; text-align: center; border: 2px solid #22C55E; box-shadow: 0 4px 12px rgba(34,197,94,0.15);">
                     <div style="font-size: 32px; margin-bottom: 8px;">📊</div>
-                    <div style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px; color: #10B981;">Contador + Horux</div>
-                    <div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 22px; color: #10B981; margin-top: 8px;">–$8,400</div>
+                    <div style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px; color: #22C55E;">Contador + Horux</div>
+                    <div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 22px; color: #22C55E; margin-top: 8px;">–$8,400</div>
                     <div style="font-family: Inter, sans-serif; font-size: 11px; color: #94A3B8; margin-top: 4px;">ahorro mensual</div>
                   </div>
                 </div>
@@ -264,7 +283,7 @@
               </div>
 
               <!-- Slide 5: CTA -->
-              <div class="carousel-slide" style="background: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center;">
+              <div class="carousel-slide" style="background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center;">
                 <div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 28px; color: #fff; line-height: 1.2; margin-bottom: 12px;">
                   ¿Cuanto podrias ahorrar?
                 </div>
@@ -324,7 +343,7 @@
   <div class="mockup-row">
     <div class="mockup-wrapper">
       <div class="mockup-label">Instagram Reel Cover</div>
-      <div class="story-frame" style="background: linear-gradient(180deg, #0F172A 0%, #1E3A5F 50%, #2563EB 100%);">
+      <div class="story-frame" style="background: linear-gradient(180deg, #0F172A 0%, #1E40AF 50%, #2563EB 100%);">
         <!-- Story progress bars -->
         <div style="position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 4px; z-index: 10;">
           <div style="flex: 1; height: 2px; background: rgba(255,255,255,0.3); border-radius: 2px;"><div style="width: 100%; height: 100%; background: #fff; border-radius: 2px;"></div></div>
@@ -335,12 +354,12 @@
         <!-- Content -->
         <div style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center;">
           <!-- Animated element -->
-          <div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(245,158,11,0.2); border: 3px solid #F59E0B; display: flex; align-items: center; justify-content: center; margin-bottom: 32px;">
+          <div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(124,58,237,0.2); border: 3px solid #7C3AED; display: flex; align-items: center; justify-content: center; margin-bottom: 32px;">
             <span style="font-size: 36px;">🤫</span>
           </div>
 
           <div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 32px; color: #fff; line-height: 1.15; margin-bottom: 16px;">
-            3 cosas que<br>tu contador<br><span style="color: #F59E0B;">NO</span> te va<br>a decir
+            3 cosas que<br>tu contador<br><span style="color: #7C3AED;">NO</span> te va<br>a decir
           </div>
 
           <div style="font-family: Inter, sans-serif; font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 40px;">
@@ -349,15 +368,15 @@
 
           <div style="display: flex; flex-direction: column; gap: 12px; width: 100%;">
             <div style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 14px 18px; text-align: left; display: flex; align-items: center; gap: 12px;">
-              <span style="font-family: Montserrat; font-weight: 800; color: #F59E0B; font-size: 18px;">1</span>
+              <span style="font-family: Montserrat; font-weight: 800; color: #7C3AED; font-size: 18px;">1</span>
               <span style="font-family: Inter; font-size: 13px; color: #fff;">Tu regimen quiza no te conviene</span>
             </div>
             <div style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 14px 18px; text-align: left; display: flex; align-items: center; gap: 12px;">
-              <span style="font-family: Montserrat; font-weight: 800; color: #F59E0B; font-size: 18px;">2</span>
+              <span style="font-family: Montserrat; font-weight: 800; color: #7C3AED; font-size: 18px;">2</span>
               <span style="font-family: Inter; font-size: 13px; color: #fff;">Hay deducciones que no rastreas</span>
             </div>
             <div style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 14px 18px; text-align: left; display: flex; align-items: center; gap: 12px;">
-              <span style="font-family: Montserrat; font-weight: 800; color: #F59E0B; font-size: 18px;">3</span>
+              <span style="font-family: Montserrat; font-weight: 800; color: #7C3AED; font-size: 18px;">3</span>
               <span style="font-family: Inter; font-size: 13px; color: #fff;">Sin visibilidad, pierdes dinero</span>
             </div>
           </div>
@@ -384,7 +403,7 @@
             73%
           </div>
           <div style="font-family: Inter, sans-serif; font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 48px; max-width: 250px;">
-            de duenos de PyMEs pagan <strong style="color:#F59E0B">mas impuestos</strong> de los que deberian
+            de duenos de PyMEs pagan <strong style="color:#7C3AED">mas impuestos</strong> de los que deberian
           </div>
 
           <div style="width: 100%; height: 1px; background: rgba(255,255,255,0.2); margin-bottom: 32px;"></div>
@@ -430,7 +449,7 @@
         <div class="desktop-content">
           <!-- LinkedIn post header -->
           <div style="padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start;">
-            <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #1E3A5F); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
+            <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #1E40AF); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
               <span style="color: #fff; font-family: Montserrat; font-weight: 800; font-size: 18px;">H</span>
             </div>
             <div>
@@ -453,7 +472,7 @@
           </div>
 
           <!-- LinkedIn image -->
-          <div style="background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%); padding: 40px; display: flex; gap: 24px; align-items: center;">
+          <div style="background: linear-gradient(135deg, #0F172A 0%, #1E40AF 100%); padding: 40px; display: flex; gap: 24px; align-items: center;">
             <div style="flex: 1;">
               <div style="font-family: Montserrat; font-weight: 800; font-size: 24px; color: #fff; line-height: 1.2; margin-bottom: 16px;">
                 ¿Cuanto estas dejando en la mesa?
@@ -470,15 +489,15 @@
                   <div style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 6px;">Sin control</div>
                 </div>
                 <div style="text-align: center;">
-                  <div style="width: 60px; height: 72px; background: #10B981; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center;">
+                  <div style="width: 60px; height: 72px; background: #22C55E; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center;">
                     <span style="font-family: Montserrat; font-weight: 800; font-size: 14px; color: #fff;">$21K</span>
                   </div>
                   <div style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 6px;">Con Horux</div>
                 </div>
                 <div style="text-align: center; margin-left: 8px;">
-                  <div style="background: rgba(16,185,129,0.2); border: 2px solid #10B981; border-radius: 12px; padding: 12px 16px;">
-                    <div style="font-family: Montserrat; font-weight: 800; font-size: 20px; color: #10B981;">$17K</div>
-                    <div style="font-family: Inter; font-size: 10px; color: #10B981;">ahorro/mes</div>
+                  <div style="background: rgba(34,197,94,0.2); border: 2px solid #22C55E; border-radius: 12px; padding: 12px 16px;">
+                    <div style="font-family: Montserrat; font-weight: 800; font-size: 20px; color: #22C55E;">$17K</div>
+                    <div style="font-family: Inter; font-size: 10px; color: #22C55E;">ahorro/mes</div>
                   </div>
                 </div>
               </div>
@@ -534,16 +553,16 @@
           </div>
 
           <!-- Static post image -->
-          <div style="aspect-ratio: 1/1; background: linear-gradient(180deg, #2563EB 0%, #1E3A5F 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 36px;">
+          <div style="aspect-ratio: 1/1; background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 36px;">
             <div>
-              <div style="display: inline-block; background: rgba(245,158,11,0.2); border: 1px solid #F59E0B; border-radius: 20px; padding: 6px 14px; margin-bottom: 24px;">
-                <span style="font-family: Montserrat; font-weight: 700; font-size: 11px; color: #F59E0B; text-transform: uppercase; letter-spacing: 1px;">Dato fiscal</span>
+              <div style="display: inline-block; background: rgba(124,58,237,0.2); border: 1px solid #7C3AED; border-radius: 20px; padding: 6px 14px; margin-bottom: 24px;">
+                <span style="font-family: Montserrat; font-weight: 700; font-size: 11px; color: #7C3AED; text-transform: uppercase; letter-spacing: 1px;">Dato fiscal</span>
               </div>
               <div style="font-family: Montserrat, sans-serif; font-weight: 900; font-size: 72px; color: #fff; line-height: 1;">
                 73%
               </div>
               <div style="font-family: Inter, sans-serif; font-size: 16px; color: rgba(255,255,255,0.8); margin-top: 8px; max-width: 260px; line-height: 1.5;">
-                de duenos de PyMEs en Mexico pagan <strong style="color: #F59E0B;">mas impuestos</strong> de los necesarios
+                de duenos de PyMEs en Mexico pagan <strong style="color: #7C3AED;">mas impuestos</strong> de los necesarios
               </div>
             </div>
 
@@ -605,7 +624,7 @@
             <div style="font-family: Montserrat; font-weight: 900; font-size: 120px; color: rgba(37,99,235,0.15); position: absolute; top: 20px; left: 24px; line-height: 1;">"</div>
 
             <div style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 20px; color: #fff; line-height: 1.4; margin-bottom: 20px; position: relative; z-index: 1;">
-              Descubri que estaba en un regimen que me costaba <span style="color: #10B981;">$8,400</span> pesos mas al mes.
+              Descubri que estaba en un regimen que me costaba <span style="color: #22C55E;">$8,400</span> pesos mas al mes.
             </div>
 
             <div style="width: 48px; height: 2px; background: #2563EB; margin-bottom: 20px;"></div>
@@ -695,19 +714,19 @@
               <div style="font-family: Montserrat; font-weight: 800; font-size: 16px; color: #065F46; margin-bottom: 16px;">Con Horux 360</div>
               <div style="display: flex; flex-direction: column; gap: 10px;">
                 <div style="display: flex; align-items: center; gap: 8px;">
-                  <span style="color: #10B981; font-size: 14px;">✓</span>
+                  <span style="color: #22C55E; font-size: 14px;">✓</span>
                   <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Claridad todo el ano</span>
                 </div>
                 <div style="display: flex; align-items: center; gap: 8px;">
-                  <span style="color: #10B981; font-size: 14px;">✓</span>
+                  <span style="color: #22C55E; font-size: 14px;">✓</span>
                   <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Ahorro real cada mes</span>
                 </div>
                 <div style="display: flex; align-items: center; gap: 8px;">
-                  <span style="color: #10B981; font-size: 14px;">✓</span>
+                  <span style="color: #22C55E; font-size: 14px;">✓</span>
                   <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Alertas SAT en tiempo real</span>
                 </div>
                 <div style="display: flex; align-items: center; gap: 8px;">
-                  <span style="color: #10B981; font-size: 14px;">✓</span>
+                  <span style="color: #22C55E; font-size: 14px;">✓</span>
                   <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Desde $480/mes</span>
                 </div>
               </div>