From 46f589b737aa96bd50643c90bb6eb9d5a24f5ec4 Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Tue, 24 Mar 2026 21:35:47 -0700
Subject: [PATCH] =?UTF-8?q?Actualizar=20paleta=20de=20colores=20real=20de?=
 =?UTF-8?q?=20horux360.com=20-=20CSS=20variables=20con=20p=C3=BArpura=20se?=
 =?UTF-8?q?cundario?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 social-content/index.html | 73 ++++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/social-content/index.html b/social-content/index.html
index a69a07e..382e8b3 100644
--- a/social-content/index.html
+++ b/social-content/index.html
@@ -8,15 +8,18 @@
 <style>
 :root {
   --azul: #2563EB;
-  --azul-profundo: #1E3A5F;
-  --verde: #10B981;
-  --naranja: #F59E0B;
+  --azul-profundo: #1E40AF;
+  --purpura: #7C3AED;
+  --purpura-oscuro: #6D28D9;
+  --verde: #22C55E;
+  --verde-oscuro: #166534;
+  --rojo: #DC2626;
   --blanco: #FFFFFF;
-  --gris-claro: #F3F4F6;
-  --gris: #6B7280;
+  --gris-claro: #F8FAFC;
+  --gris: #94A3B8;
   --negro: #111827;
-  --gradient: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%);
-  --gradient-light: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+  --gradient: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
+  --gradient-light: linear-gradient(135deg, #EFF6FF 0%, #EDE9FE 100%);
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -648,7 +651,7 @@ h1, h2, h3, h4, h5 {
 .slide-diagram .d-equals {
   font-size: 1.5rem;
   font-weight: 700;
-  color: var(--naranja);
+  color: var(--purpura);
 }
 .slide-diagram .d-result {
   background: var(--verde);
@@ -728,7 +731,7 @@ h1, h2, h3, h4, h5 {
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
-  color: var(--naranja);
+  color: var(--purpura);
   margin-bottom: 24px;
 }
 .story-1 .story-number {
@@ -780,7 +783,7 @@ h1, h2, h3, h4, h5 {
   margin-bottom: 30px;
 }
 .story-2 .story-header span {
-  color: var(--naranja);
+  color: var(--purpura);
 }
 .story-2 .point-item {
   display: flex;
@@ -848,7 +851,7 @@ h1, h2, h3, h4, h5 {
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
-  color: var(--naranja);
+  color: var(--purpura);
   margin-bottom: 20px;
 }
 .story-3 .myth-text {
@@ -1027,7 +1030,7 @@ h1, h2, h3, h4, h5 {
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
-  color: var(--naranja);
+  color: var(--purpura);
   margin-bottom: 12px;
 }
 .slide-deduccion h3 {
@@ -1089,7 +1092,7 @@ h1, h2, h3, h4, h5 {
   color: #93C5FD;
 }
 .resico-cell.general {
-  background: rgba(16,185,129,0.15);
+  background: rgba(34,197,94,0.15);
   color: #6EE7B7;
 }
 .resico-cell.highlight {
@@ -1297,7 +1300,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
         </div>
         <!-- Slide 2: Contador -->
         <div class="carousel-slide slide-content slide-bg-light">
-          <h3 style="color:#1E3A5F">Lo que hace un contador:</h3>
+          <h3 style="color:#1E40AF">Lo que hace un contador:</h3>
           <ul>
             <li style="color:#374151"><span class="icon" style="background:#EFF6FF;color:#2563EB">📋</span> Declaraciones mensuales y anuales</li>
             <li style="color:#374151"><span class="icon" style="background:#EFF6FF;color:#2563EB">🧾</span> Emision de facturas</li>
@@ -1309,10 +1312,10 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
         <div class="carousel-slide slide-content slide-bg-dark">
           <h3>Lo que hace un sistema de control fiscal:</h3>
           <ul>
-            <li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">🔄</span> Conciliacion automatica de facturas</li>
-            <li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">🔔</span> Alertas del SAT en tiempo real</li>
-            <li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">📊</span> Analisis de regimen optimo</li>
-            <li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">💰</span> Proyecciones de ahorro</li>
+            <li><span class="icon" style="background:rgba(34,197,94,0.2);color:#22C55E">🔄</span> Conciliacion automatica de facturas</li>
+            <li><span class="icon" style="background:rgba(34,197,94,0.2);color:#22C55E">🔔</span> Alertas del SAT en tiempo real</li>
+            <li><span class="icon" style="background:rgba(34,197,94,0.2);color:#22C55E">📊</span> Analisis de regimen optimo</li>
+            <li><span class="icon" style="background:rgba(34,197,94,0.2);color:#22C55E">💰</span> Proyecciones de ahorro</li>
           </ul>
         </div>
         <!-- Slide 4: Diagrama -->
@@ -1359,7 +1362,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
       <button class="carousel-nav next" onclick="moveCarousel('carousel2', 1)">&#8250;</button>
       <div class="carousel-track">
         <!-- Portada -->
-        <div class="carousel-slide slide-portada" style="background:linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #92400E 100%)">
+        <div class="carousel-slide slide-portada" style="background:linear-gradient(135deg, #7C3AED 0%, #D97706 50%, #5B21B6 100%)">
           <div style="font-size:3.5rem;margin-bottom:16px">💸</div>
           <h2 style="font-size:1.6rem">5 deducciones que probablemente estas perdiendo</h2>
           <div class="slide-badge">Desliza →</div>
@@ -1400,7 +1403,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
           <p>Con el CFDI correcto, tus gastos de gasolina y transporte son 100% deducibles. Necesitas factura de cada carga.</p>
         </div>
         <!-- CTA -->
-        <div class="carousel-slide slide-cta" style="background:linear-gradient(135deg, #F59E0B 0%, #D97706 100%)">
+        <div class="carousel-slide slide-cta" style="background:linear-gradient(135deg, #7C3AED 0%, #D97706 100%)">
           <h3 style="color:#000">Estas aprovechando TODAS tus deducciones?</h3>
           <div class="cta-button" style="color:#D97706">Diagnostico Gratuito</div>
           <div class="url" style="color:rgba(0,0,0,0.5)">horux360.com/diagnostico</div>
@@ -1433,7 +1436,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
       <button class="carousel-nav next" onclick="moveCarousel('carousel3', 1)">&#8250;</button>
       <div class="carousel-track">
         <!-- Portada -->
-        <div class="carousel-slide slide-portada" style="background:linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%)">
+        <div class="carousel-slide slide-portada" style="background:linear-gradient(135deg, #22C55E 0%, #059669 50%, #047857 100%)">
           <div style="font-size:3rem;margin-bottom:12px">⚖️</div>
           <h2 style="font-size:1.6rem">RESICO: Estas en el regimen correcto?</h2>
           <div class="slide-badge" style="background:rgba(0,0,0,0.2)">Desliza para comparar →</div>
@@ -1443,7 +1446,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
           <h3>Que es RESICO?</h3>
           <div style="font-size:3rem;margin-bottom:16px">📋</div>
           <p style="font-size:0.95rem;max-width:340px;text-align:center;color:rgba(255,255,255,0.85);line-height:1.7">
-            Regimen Simplificado de Confianza. Tasas del <strong style="color:#10B981;font-size:1.1rem">1% al 2.5%</strong> sobre ingresos. Suena increible, verdad?
+            Regimen Simplificado de Confianza. Tasas del <strong style="color:#22C55E;font-size:1.1rem">1% al 2.5%</strong> sobre ingresos. Suena increible, verdad?
           </p>
         </div>
         <!-- Pero... -->
@@ -1461,7 +1464,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
             <div class="resico-row">
               <div class="resico-cell resico-header" style="background:transparent"></div>
               <div class="resico-cell resico-header resico" style="background:rgba(37,99,235,0.25)">RESICO</div>
-              <div class="resico-cell resico-header general" style="background:rgba(16,185,129,0.25)">General</div>
+              <div class="resico-cell resico-header general" style="background:rgba(34,197,94,0.25)">General</div>
             </div>
             <div class="resico-row">
               <div class="resico-cell label">Ingresos</div>
@@ -1495,7 +1498,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
           </p>
         </div>
         <!-- CTA -->
-        <div class="carousel-slide slide-cta" style="background:linear-gradient(135deg, #10B981 0%, #059669 100%)">
+        <div class="carousel-slide slide-cta" style="background:linear-gradient(135deg, #22C55E 0%, #059669 100%)">
           <h3 style="color:white">Descubre cual regimen te conviene mas</h3>
           <div class="cta-button" style="color:#059669">Diagnostico Gratuito</div>
           <div class="url" style="color:rgba(255,255,255,0.5)">horux360.com/diagnostico</div>
@@ -1620,7 +1623,7 @@ Diagnostico gratuito → horux360.com/diagnostico</div>
                 <div class="li-bar-label">Sin estrategia fiscal</div>
               </div>
               <div class="li-bar-group">
-                <div class="li-bar" style="height:65px;background:#10B981;color:white">$21K</div>
+                <div class="li-bar" style="height:65px;background:#22C55E;color:white">$21K</div>
                 <div class="li-bar-label">Con Horux 360</div>
               </div>
             </div>
@@ -1674,7 +1677,7 @@ Diagnostico gratuito → horux360.com/diagnostico</div>
                 <div style="font-size:0.7rem;color:#666">/mes autoservicio</div>
               </div>
               <div style="text-align:center;padding:12px 20px;background:#ECFDF5;border-radius:12px">
-                <div style="font-family:Montserrat;font-weight:800;color:#10B981;font-size:1.1rem">$1,500</div>
+                <div style="font-family:Montserrat;font-weight:800;color:#22C55E;font-size:1.1rem">$1,500</div>
                 <div style="font-size:0.7rem;color:#666">/mes con asesoria</div>
               </div>
             </div>
@@ -1707,19 +1710,19 @@ Diagnostico gratuito → horux360.com/diagnostico</div>
       <div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#2563EB</div>
       <div style="font-size:0.75rem;opacity:0.6;margin-top:2px">CTAs, acentos, elementos principales</div>
     </div>
-    <div style="background:#1E3A5F;padding:24px;border-radius:12px;text-align:center">
+    <div style="background:#1E40AF;padding:24px;border-radius:12px;text-align:center">
       <div style="font-family:Montserrat;font-weight:800;font-size:1.1rem">Azul Profundo</div>
-      <div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#1E3A5F</div>
+      <div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#1E40AF</div>
       <div style="font-size:0.75rem;opacity:0.6;margin-top:2px">Fondos, textos sobre claro</div>
     </div>
-    <div style="background:#10B981;padding:24px;border-radius:12px;text-align:center;color:#000">
+    <div style="background:#22C55E;padding:24px;border-radius:12px;text-align:center;color:#000">
       <div style="font-family:Montserrat;font-weight:800;font-size:1.1rem">Verde Acento</div>
-      <div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#10B981</div>
+      <div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#22C55E</div>
       <div style="font-size:0.75rem;opacity:0.6;margin-top:2px">Ahorro, positivo, resultados</div>
     </div>
-    <div style="background:#F59E0B;padding:24px;border-radius:12px;text-align:center;color:#000">
+    <div style="background:#7C3AED;padding:24px;border-radius:12px;text-align:center;color:#000">
       <div style="font-family:Montserrat;font-weight:800;font-size:1.1rem">Naranja Alerta</div>
-      <div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#F59E0B</div>
+      <div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#7C3AED</div>
       <div style="font-size:0.75rem;opacity:0.6;margin-top:2px">Urgencia, destacados, warnings</div>
     </div>
   </div>
@@ -1733,7 +1736,7 @@ Diagnostico gratuito → horux360.com/diagnostico</div>
       <div style="font-size:0.8rem;color:var(--gris);margin-top:12px">Uso: titulos, numeros, precios, CTAs, badges</div>
     </div>
     <div style="background:#1E293B;padding:30px;border-radius:16px">
-      <div style="font-family:Inter;font-weight:700;font-size:1.5rem;margin-bottom:16px;color:#10B981">Inter</div>
+      <div style="font-family:Inter;font-weight:700;font-size:1.5rem;margin-bottom:16px;color:#22C55E">Inter</div>
       <div style="font-family:Inter;font-weight:400;font-size:1rem;line-height:1.8;margin-bottom:8px">Texto de cuerpo para captions, descripciones y contenido largo. Inter es altamente legible en pantallas pequeñas.</div>
       <div style="font-family:Inter;font-weight:600;font-size:0.9rem;color:rgba(255,255,255,0.7)">Texto secundario en peso medium</div>
       <div style="font-size:0.8rem;color:var(--gris);margin-top:12px">Uso: captions, body text, listas, descripciones</div>
@@ -1741,10 +1744,10 @@ Diagnostico gratuito → horux360.com/diagnostico</div>
   </div>
 
   <div style="background:#1E293B;padding:30px;border-radius:16px;margin-top:30px">
-    <h4 style="font-family:Montserrat;font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--naranja)">Reglas Visuales</h4>
+    <h4 style="font-family:Montserrat;font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--purpura)">Reglas Visuales</h4>
     <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:0.85rem;color:rgba(255,255,255,0.8)">
       <div>
-        <strong style="color:white">Gradientes:</strong> Siempre de #2563EB a #1E3A5F en 135 grados. Nunca plano.
+        <strong style="color:white">Gradientes:</strong> Siempre de #2563EB a #1E40AF en 135 grados. Nunca plano.
       </div>
       <div>
         <strong style="color:white">Bordes:</strong> border-radius minimo 12px en cards, 30px en botones/pills.