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 - CSS variables con púrpura secundario

Browse Source
This commit is contained in:
consultoria-as
2026-03-24 21:35:47 -07:00
parent 82d92054dc
commit 46f589b737
1 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
social-content/index.html
View File

@@ -8,15 +8,18 @@
<style> <style>
:root { :root {
--azul: #2563EB; --azul: #2563EB;
--azul-profundo: #1E3A5F; --azul-profundo: #1E40AF;
--verde: #10B981; --purpura: #7C3AED;
--naranja: #F59E0B; --purpura-oscuro: #6D28D9;
--verde: #22C55E;
--verde-oscuro: #166534;
--rojo: #DC2626;
--blanco: #FFFFFF; --blanco: #FFFFFF;
--gris-claro: #F3F4F6; --gris-claro: #F8FAFC;
--gris: #6B7280; --gris: #94A3B8;
--negro: #111827; --negro: #111827;
--gradient: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%); --gradient: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
--gradient-light: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); --gradient-light: linear-gradient(135deg, #EFF6FF 0%, #EDE9FE 100%);
} }
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -648,7 +651,7 @@ h1, h2, h3, h4, h5 {
.slide-diagram .d-equals { .slide-diagram .d-equals {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--naranja); color: var(--purpura);
} }
.slide-diagram .d-result { .slide-diagram .d-result {
background: var(--verde); background: var(--verde);
@@ -728,7 +731,7 @@ h1, h2, h3, h4, h5 {
font-weight: 700; font-weight: 700;
letter-spacing: 3px; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
color: var(--naranja); color: var(--purpura);
margin-bottom: 24px; margin-bottom: 24px;
} }
.story-1 .story-number { .story-1 .story-number {
@@ -780,7 +783,7 @@ h1, h2, h3, h4, h5 {
margin-bottom: 30px; margin-bottom: 30px;
} }
.story-2 .story-header span { .story-2 .story-header span {
color: var(--naranja); color: var(--purpura);
} }
.story-2 .point-item { .story-2 .point-item {
display: flex; display: flex;
@@ -848,7 +851,7 @@ h1, h2, h3, h4, h5 {
font-weight: 700; font-weight: 700;
letter-spacing: 3px; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
color: var(--naranja); color: var(--purpura);
margin-bottom: 20px; margin-bottom: 20px;
} }
.story-3 .myth-text { .story-3 .myth-text {
@@ -1027,7 +1030,7 @@ h1, h2, h3, h4, h5 {
font-weight: 700; font-weight: 700;
letter-spacing: 3px; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
color: var(--naranja); color: var(--purpura);
margin-bottom: 12px; margin-bottom: 12px;
} }
.slide-deduccion h3 { .slide-deduccion h3 {
@@ -1089,7 +1092,7 @@ h1, h2, h3, h4, h5 {
color: #93C5FD; color: #93C5FD;
} }
.resico-cell.general { .resico-cell.general {
background: rgba(16,185,129,0.15); background: rgba(34,197,94,0.15);
color: #6EE7B7; color: #6EE7B7;
} }
.resico-cell.highlight { .resico-cell.highlight {
@@ -1297,7 +1300,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
</div> </div>
<!-- Slide 2: Contador --> <!-- Slide 2: Contador -->
<div class="carousel-slide slide-content slide-bg-light"> <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> <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> Declaraciones mensuales y anuales</li>
<li style="color:#374151"><span class="icon" style="background:#EFF6FF;color:#2563EB">🧾</span> Emision de facturas</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"> <div class="carousel-slide slide-content slide-bg-dark">
<h3>Lo que hace un sistema de control fiscal:</h3> <h3>Lo que hace un sistema de control fiscal:</h3>
<ul> <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(34,197,94,0.2);color:#22C55E">🔄</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(34,197,94,0.2);color:#22C55E">🔔</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(34,197,94,0.2);color:#22C55E">📊</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> Proyecciones de ahorro</li>
</ul> </ul>
</div> </div>
<!-- Slide 4: Diagrama --> <!-- 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> <button class="carousel-nav next" onclick="moveCarousel('carousel2', 1)">&#8250;</button>
<div class="carousel-track"> <div class="carousel-track">
<!-- Portada --> <!-- 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> <div style="font-size:3.5rem;margin-bottom:16px">💸</div>
<h2 style="font-size:1.6rem">5 deducciones que probablemente estas perdiendo</h2> <h2 style="font-size:1.6rem">5 deducciones que probablemente estas perdiendo</h2>
<div class="slide-badge">Desliza →</div> <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> <p>Con el CFDI correcto, tus gastos de gasolina y transporte son 100% deducibles. Necesitas factura de cada carga.</p>
</div> </div>
<!-- CTA --> <!-- 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> <h3 style="color:#000">Estas aprovechando TODAS tus deducciones?</h3>
<div class="cta-button" style="color:#D97706">Diagnostico Gratuito</div> <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> <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> <button class="carousel-nav next" onclick="moveCarousel('carousel3', 1)">&#8250;</button>
<div class="carousel-track"> <div class="carousel-track">
<!-- Portada --> <!-- 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> <div style="font-size:3rem;margin-bottom:12px">⚖️</div>
<h2 style="font-size:1.6rem">RESICO: Estas en el regimen correcto?</h2> <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> <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> <h3>Que es RESICO?</h3>
<div style="font-size:3rem;margin-bottom:16px">📋</div> <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"> <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> </p>
</div> </div>
<!-- Pero... --> <!-- Pero... -->
@@ -1461,7 +1464,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
<div class="resico-row"> <div class="resico-row">
<div class="resico-cell resico-header" style="background:transparent"></div> <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 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>
<div class="resico-row"> <div class="resico-row">
<div class="resico-cell label">Ingresos</div> <div class="resico-cell label">Ingresos</div>
@@ -1495,7 +1498,7 @@ Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
</p> </p>
</div> </div>
<!-- CTA --> <!-- 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> <h3 style="color:white">Descubre cual regimen te conviene mas</h3>
<div class="cta-button" style="color:#059669">Diagnostico Gratuito</div> <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> <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 class="li-bar-label">Sin estrategia fiscal</div>
</div> </div>
<div class="li-bar-group"> <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 class="li-bar-label">Con Horux 360</div>
</div> </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 style="font-size:0.7rem;color:#666">/mes autoservicio</div>
</div> </div>
<div style="text-align:center;padding:12px 20px;background:#ECFDF5;border-radius:12px"> <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 style="font-size:0.7rem;color:#666">/mes con asesoria</div>
</div> </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.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 style="font-size:0.75rem;opacity:0.6;margin-top:2px">CTAs, acentos, elementos principales</div>
</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-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 style="font-size:0.75rem;opacity:0.6;margin-top:2px">Fondos, textos sobre claro</div>
</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-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 style="font-size:0.75rem;opacity:0.6;margin-top:2px">Ahorro, positivo, resultados</div>
</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-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 style="font-size:0.75rem;opacity:0.6;margin-top:2px">Urgencia, destacados, warnings</div>
</div> </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 style="font-size:0.8rem;color:var(--gris);margin-top:12px">Uso: titulos, numeros, precios, CTAs, badges</div>
</div> </div>
<div style="background:#1E293B;padding:30px;border-radius:16px"> <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: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-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> <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>
<div style="background:#1E293B;padding:30px;border-radius:16px;margin-top:30px"> <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 style="display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:0.85rem;color:rgba(255,255,255,0.8)">
<div> <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>
<div> <div>
<strong style="color:white">Bordes:</strong> border-radius minimo 12px en cards, 30px en botones/pills. <strong style="color:white">Bordes:</strong> border-radius minimo 12px en cards, 30px en botones/pills.