consultoria-as/horux360-marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar paleta de colores real de horux360.com - azul+púrpura+verde correcto

Browse Source
This commit is contained in:
consultoria-as
2026-03-24 21:35:41 -07:00
parent 9857b0b1b6
commit 82d92054dc
1 changed files with 63 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
visual-proposal/index.html
View File

@@ -45,13 +45,13 @@
.desktop-bar { height: 36px; background: #334155; display: flex; align-items: center; padding: 0 14px; gap: 8px; } .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 { width: 12px; height: 12px; border-radius: 50%; }
.desktop-dot.r { background: #EF4444; } .desktop-dot.r { background: #EF4444; }
.desktop-dot.y { background: #F59E0B; } .desktop-dot.y { background: #7C3AED; }
.desktop-dot.g { background: #10B981; } .desktop-dot.g { background: #22C55E; }
.desktop-content { background: #fff; } .desktop-content { background: #fff; }
/* IG Post mockup */ /* IG Post mockup */
.ig-header { display: flex; align-items: center; padding: 12px 16px; background: #fff; } .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 { margin-left: 10px; }
.ig-user strong { font-size: 13px; color: #262626; display: block; } .ig-user strong { font-size: 13px; color: #262626; display: block; }
.ig-user span { font-size: 11px; color: #8e8e8e; } .ig-user span { font-size: 11px; color: #8e8e8e; }
@@ -94,7 +94,7 @@
<!-- 1. PALETA DE COLORES --> <!-- 1. PALETA DE COLORES -->
<div class="section"> <div class="section">
<div class="section-title">1. Paleta de Colores</div> <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-grid">
<div class="palette-card"> <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 class="palette-info"><strong>Azul Horux</strong><small>Principal. Titulares, CTAs, fondos hero.</small></div>
</div> </div>
<div class="palette-card"> <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 class="palette-info"><strong>Azul Profundo</strong><small>Fondos oscuros, testimonios, contraste.</small></div>
</div> </div>
<div class="palette-card"> <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 class="palette-info"><strong>Verde Exito</strong><small>Ahorro, resultados positivos, checks.</small></div>
</div> </div>
<div class="palette-card"> <div class="palette-card">
<div class="palette-swatch" style="background: #F59E0B;"><span>#F59E0B</span></div> <div class="palette-swatch" style="background: #7C3AED;"><span>#7C3AED</span></div>
<div class="palette-info"><strong>Naranja Alerta</strong><small>Urgencia, datos impactantes, warnings.</small></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>
</div> </div>
@@ -129,8 +148,8 @@
<div class="palette-info"><strong>Negro Azulado</strong><small>Textos oscuros, fondos premium.</small></div> <div class="palette-info"><strong>Negro Azulado</strong><small>Textos oscuros, fondos premium.</small></div>
</div> </div>
<div class="palette-card"> <div class="palette-card">
<div class="palette-swatch" style="background: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%);"><span>Gradiente</span></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 Horux</strong><small>Portadas, CTAs premium, headers.</small></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>
</div> </div>
@@ -165,7 +184,7 @@
<div class="carousel-container"> <div class="carousel-container">
<div class="carousel-slides" id="igCarousel"> <div class="carousel-slides" id="igCarousel">
<!-- Slide 1: Cover --> <!-- 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;"> <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> <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> </div>
@@ -204,37 +223,37 @@
<span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Cumple requisitos del SAT</span> <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Cumple requisitos del SAT</span>
</div> </div>
</div> </div>
<div style="margin-top: 28px; padding: 16px; background: #FFF7ED; border-radius: 12px; border-left: 4px solid #F59E0B;"> <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: #92400E;">Pero cumplir ≠ optimizar. Tu contador hace su trabajo. La pregunta es: ¿quien ve el panorama completo?</span> <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>
</div> </div>
<!-- Slide 3: Control Fiscal --> <!-- Slide 3: Control Fiscal -->
<div class="carousel-slide" style="background: #FFFFFF; display: flex; flex-direction: column; justify-content: center; padding: 40px;"> <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="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; flex-direction: column; gap: 16px;">
<div style="display: flex; align-items: center; gap: 12px;"> <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;"> <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> </div>
<span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Concilia facturas automaticamente</span> <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Concilia facturas automaticamente</span>
</div> </div>
<div style="display: flex; align-items: center; gap: 12px;"> <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;"> <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> </div>
<span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Alertas del SAT en tiempo real</span> <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Alertas del SAT en tiempo real</span>
</div> </div>
<div style="display: flex; align-items: center; gap: 12px;"> <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;"> <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> </div>
<span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Analiza tu regimen fiscal optimo</span> <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Analiza tu regimen fiscal optimo</span>
</div> </div>
<div style="display: flex; align-items: center; gap: 12px;"> <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;"> <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> </div>
<span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Proyecciones de ahorro mensual</span> <span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Proyecciones de ahorro mensual</span>
</div> </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: 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 style="font-family: Inter, sans-serif; font-size: 11px; color: #94A3B8; margin-top: 4px;">ahorro mensual</div>
</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-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: 700; font-size: 14px; color: #22C55E;">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: 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 style="font-family: Inter, sans-serif; font-size: 11px; color: #94A3B8; margin-top: 4px;">ahorro mensual</div>
</div> </div>
</div> </div>
@@ -264,7 +283,7 @@
</div> </div>
<!-- Slide 5: CTA --> <!-- 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;"> <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? ¿Cuanto podrias ahorrar?
</div> </div>
@@ -324,7 +343,7 @@
<div class="mockup-row"> <div class="mockup-row">
<div class="mockup-wrapper"> <div class="mockup-wrapper">
<div class="mockup-label">Instagram Reel Cover</div> <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 --> <!-- Story progress bars -->
<div style="position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 4px; z-index: 10;"> <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> <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 --> <!-- Content -->
<div style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center;"> <div style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center;">
<!-- Animated element --> <!-- 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> <span style="font-size: 36px;">🤫</span>
</div> </div>
<div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 32px; color: #fff; line-height: 1.15; margin-bottom: 16px;"> <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>
<div style="font-family: Inter, sans-serif; font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 40px;"> <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="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;"> <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> <span style="font-family: Inter; font-size: 13px; color: #fff;">Tu regimen quiza no te conviene</span>
</div> </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;"> <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> <span style="font-family: Inter; font-size: 13px; color: #fff;">Hay deducciones que no rastreas</span>
</div> </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;"> <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> <span style="font-family: Inter; font-size: 13px; color: #fff;">Sin visibilidad, pierdes dinero</span>
</div> </div>
</div> </div>
@@ -384,7 +403,7 @@
73% 73%
</div> </div>
<div style="font-family: Inter, sans-serif; font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 48px; max-width: 250px;"> <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>
<div style="width: 100%; height: 1px; background: rgba(255,255,255,0.2); margin-bottom: 32px;"></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"> <div class="desktop-content">
<!-- LinkedIn post header --> <!-- LinkedIn post header -->
<div style="padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start;"> <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> <span style="color: #fff; font-family: Montserrat; font-weight: 800; font-size: 18px;">H</span>
</div> </div>
<div> <div>
@@ -453,7 +472,7 @@
</div> </div>
<!-- LinkedIn image --> <!-- 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="flex: 1;">
<div style="font-family: Montserrat; font-weight: 800; font-size: 24px; color: #fff; line-height: 1.2; margin-bottom: 16px;"> <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? ¿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 style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 6px;">Sin control</div>
</div> </div>
<div style="text-align: center;"> <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> <span style="font-family: Montserrat; font-weight: 800; font-size: 14px; color: #fff;">$21K</span>
</div> </div>
<div style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 6px;">Con Horux</div> <div style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 6px;">Con Horux</div>
</div> </div>
<div style="text-align: center; margin-left: 8px;"> <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="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: #10B981;">$17K</div> <div style="font-family: Montserrat; font-weight: 800; font-size: 20px; color: #22C55E;">$17K</div>
<div style="font-family: Inter; font-size: 10px; color: #10B981;">ahorro/mes</div> <div style="font-family: Inter; font-size: 10px; color: #22C55E;">ahorro/mes</div>
</div> </div>
</div> </div>
</div> </div>
@@ -534,16 +553,16 @@
</div> </div>
<!-- Static post image --> <!-- 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>
<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;"> <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: #F59E0B; text-transform: uppercase; letter-spacing: 1px;">Dato fiscal</span> <span style="font-family: Montserrat; font-weight: 700; font-size: 11px; color: #7C3AED; text-transform: uppercase; letter-spacing: 1px;">Dato fiscal</span>
</div> </div>
<div style="font-family: Montserrat, sans-serif; font-weight: 900; font-size: 72px; color: #fff; line-height: 1;"> <div style="font-family: Montserrat, sans-serif; font-weight: 900; font-size: 72px; color: #fff; line-height: 1;">
73% 73%
</div> </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;"> <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>
</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; 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;"> <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>
<div style="width: 48px; height: 2px; background: #2563EB; margin-bottom: 20px;"></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="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; flex-direction: column; gap: 10px;">
<div style="display: flex; align-items: center; gap: 8px;"> <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> <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Claridad todo el ano</span>
</div> </div>
<div style="display: flex; align-items: center; gap: 8px;"> <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> <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Ahorro real cada mes</span>
</div> </div>
<div style="display: flex; align-items: center; gap: 8px;"> <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> <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Alertas SAT en tiempo real</span>
</div> </div>
<div style="display: flex; align-items: center; gap: 8px;"> <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> <span style="font-family: Inter; font-size: 12px; color: #064E3B;">Desde $480/mes</span>
</div> </div>
</div> </div>