775 lines
50 KiB
HTML
775 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Horux 360 — Propuesta Visual de Contenido para Redes Sociales</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: 'Inter', sans-serif; background: #0F172A; color: #E2E8F0; line-height: 1.6; }
|
||
|
||
.header { text-align: center; padding: 60px 20px 40px; }
|
||
.header h1 { font-family: 'Montserrat', sans-serif; font-size: 2.4rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
|
||
.header p { font-size: 1.1rem; color: #94A3B8; max-width: 600px; margin: 0 auto; }
|
||
|
||
.section { max-width: 1200px; margin: 0 auto 80px; padding: 0 20px; }
|
||
.section-title { font-family: 'Montserrat', sans-serif; font-size: 1.6rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
|
||
.section-subtitle { color: #94A3B8; margin-bottom: 32px; font-size: 0.95rem; }
|
||
|
||
/* Palette Section */
|
||
.palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
|
||
.palette-card { border-radius: 16px; overflow: hidden; background: #1E293B; }
|
||
.palette-swatch { height: 100px; display: flex; align-items: flex-end; padding: 12px 16px; }
|
||
.palette-swatch span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 6px; color: #fff; }
|
||
.palette-info { padding: 14px 16px; }
|
||
.palette-info strong { display: block; color: #fff; font-size: 0.95rem; }
|
||
.palette-info small { color: #94A3B8; font-size: 0.8rem; }
|
||
|
||
.type-sample { background: #1E293B; border-radius: 16px; padding: 32px; margin-bottom: 32px; }
|
||
.type-sample h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.8rem; color: #2563EB; margin-bottom: 4px; }
|
||
.type-sample .sub { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.1rem; color: #fff; margin-bottom: 16px; }
|
||
.type-sample p { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: #CBD5E1; }
|
||
|
||
/* Mockup containers */
|
||
.mockup-row { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
|
||
.mockup-wrapper { flex: 0 0 auto; }
|
||
.mockup-label { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.85rem; color: #64748B; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
|
||
|
||
/* Phone frame */
|
||
.phone-frame { width: 375px; background: #000; border-radius: 40px; padding: 12px; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
|
||
.phone-screen { border-radius: 30px; overflow: hidden; background: #fff; }
|
||
|
||
/* Desktop frame */
|
||
.desktop-frame { width: 680px; background: #1E293B; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
|
||
.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: #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, #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; }
|
||
.ig-actions { display: flex; gap: 16px; padding: 10px 16px; background: #fff; }
|
||
.ig-actions svg { width: 24px; height: 24px; fill: none; stroke: #262626; stroke-width: 2; }
|
||
.ig-caption { padding: 4px 16px 16px; background: #fff; font-size: 13px; color: #262626; line-height: 1.5; }
|
||
.ig-caption strong { font-weight: 600; }
|
||
.ig-caption .hashtags { color: #00376B; }
|
||
.ig-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0; background: #fff; }
|
||
.ig-dots span { width: 6px; height: 6px; border-radius: 50%; background: #DBDBDB; }
|
||
.ig-dots span.active { background: #2563EB; }
|
||
|
||
/* Story frame */
|
||
.story-frame { width: 375px; height: 667px; border-radius: 40px; overflow: hidden; position: relative; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
|
||
|
||
/* Carousel slides */
|
||
.carousel-container { position: relative; }
|
||
.carousel-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
|
||
.carousel-slides::-webkit-scrollbar { display: none; }
|
||
.carousel-slide { min-width: 100%; scroll-snap-align: start; aspect-ratio: 1/1; }
|
||
|
||
.nav-hint { text-align: center; padding: 8px; color: #94A3B8; font-size: 0.8rem; margin-top: 8px; }
|
||
|
||
@media (max-width: 768px) {
|
||
.mockup-row { flex-direction: column; align-items: center; }
|
||
.phone-frame, .story-frame { width: 340px; }
|
||
.desktop-frame { width: 100%; max-width: 680px; }
|
||
.header h1 { font-size: 1.8rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<div class="header">
|
||
<h1>Horux 360 — Propuesta Visual</h1>
|
||
<p>Look & feel para contenido de redes sociales. Paleta, tipografias y mockups de posts reales.</p>
|
||
</div>
|
||
|
||
<!-- 1. PALETA DE COLORES -->
|
||
<div class="section">
|
||
<div class="section-title">1. Paleta de Colores</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">
|
||
<div class="palette-swatch" style="background: #2563EB;"><span>#2563EB</span></div>
|
||
<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: #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: #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: #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>
|
||
|
||
<div class="palette-grid">
|
||
<div class="palette-card">
|
||
<div class="palette-swatch" style="background: #FFFFFF; border: 1px solid #E2E8F0;"><span style="color:#1E293B">#FFFFFF</span></div>
|
||
<div class="palette-info"><strong>Blanco</strong><small>Fondos limpios, slides interiores.</small></div>
|
||
</div>
|
||
<div class="palette-card">
|
||
<div class="palette-swatch" style="background: #F8FAFC; border: 1px solid #E2E8F0;"><span style="color:#1E293B">#F8FAFC</span></div>
|
||
<div class="palette-info"><strong>Gris Claro</strong><small>Fondos alternos, separadores.</small></div>
|
||
</div>
|
||
<div class="palette-card">
|
||
<div class="palette-swatch" style="background: #0F172A;"><span>#0F172A</span></div>
|
||
<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%, #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>
|
||
|
||
<!-- Typography -->
|
||
<div class="type-sample">
|
||
<h3>Montserrat 800 — Titulares</h3>
|
||
<div class="sub">Montserrat 600 — Subtitulares</div>
|
||
<p>Inter 400/500 — Cuerpo de texto. Para captions, descripciones y parrafos largos donde la legibilidad es prioridad. "El 73% de los duenos de PyMEs pagan mas impuestos de los que deberian."</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. POST FACEBOOK/INSTAGRAM — CARRUSEL EDUCATIVO -->
|
||
<div class="section">
|
||
<div class="section-title">2. Post Instagram/Facebook — Carrusel Educativo</div>
|
||
<div class="section-subtitle">Desliza horizontalmente para ver las 5 slides del carrusel "Contador vs. Control Fiscal"</div>
|
||
|
||
<div class="mockup-row">
|
||
<div class="mockup-wrapper">
|
||
<div class="mockup-label">Instagram Feed</div>
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<!-- IG Header -->
|
||
<div class="ig-header">
|
||
<div class="ig-avatar">H</div>
|
||
<div class="ig-user">
|
||
<strong>horux360</strong>
|
||
<span>Patrocinado</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Carousel -->
|
||
<div class="carousel-container">
|
||
<div class="carousel-slides" id="igCarousel">
|
||
<!-- Slide 1: Cover -->
|
||
<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>
|
||
<div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 26px; color: #fff; line-height: 1.2; margin-bottom: 16px;">
|
||
¿Tu contador te ahorra dinero<br>o solo cumple?
|
||
</div>
|
||
<div style="font-family: Inter, sans-serif; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 24px;">
|
||
La diferencia puede costarte miles al mes
|
||
</div>
|
||
<div style="font-family: Montserrat, sans-serif; font-weight: 600; font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 2px; text-transform: uppercase;">
|
||
DESLIZA →
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 2: Contador -->
|
||
<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: #2563EB; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;">Lo que hace un contador</div>
|
||
<div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 22px; color: #0F172A; margin-bottom: 28px; line-height: 1.3;">Cumple con el SAT.</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: #EFF6FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2"><path d="M9 12l2 2 4-4"/></svg>
|
||
</div>
|
||
<span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Presenta tus declaraciones</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<div style="width: 36px; height: 36px; border-radius: 10px; background: #EFF6FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2"><path d="M9 12l2 2 4-4"/></svg>
|
||
</div>
|
||
<span style="font-family: Inter, sans-serif; font-size: 15px; color: #334155;">Emite y recibe facturas</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<div style="width: 36px; height: 36px; border-radius: 10px; background: #EFF6FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2"><path d="M9 12l2 2 4-4"/></svg>
|
||
</div>
|
||
<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: #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: #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="#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="#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="#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="#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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 4: Comparativa -->
|
||
<div class="carousel-slide" style="background: #F8FAFC; display: flex; flex-direction: column; justify-content: center; padding: 36px;">
|
||
<div style="font-family: Montserrat, sans-serif; font-weight: 800; font-size: 20px; color: #0F172A; text-align: center; margin-bottom: 28px; line-height: 1.3;">Necesitas AMBAS cosas.</div>
|
||
<div style="display: flex; gap: 12px; margin-bottom: 20px;">
|
||
<div style="flex: 1; background: #fff; border-radius: 16px; padding: 20px; text-align: center; border: 2px solid #E2E8F0;">
|
||
<div style="font-size: 32px; margin-bottom: 8px;">📋</div>
|
||
<div style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px; color: #64748B;">Solo contador</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>
|
||
<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: #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>
|
||
<div style="text-align: center; padding: 16px; background: #EFF6FF; border-radius: 12px;">
|
||
<span style="font-family: Inter, sans-serif; font-size: 13px; color: #1E40AF;">No es reemplazar a tu contador. Es darle una herramienta para que los dos vean el panorama completo.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 5: CTA -->
|
||
<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>
|
||
<div style="font-family: Inter, sans-serif; font-size: 15px; color: rgba(255,255,255,0.8); margin-bottom: 32px;">
|
||
Descubrelo en 5 minutos con nuestro diagnostico gratuito
|
||
</div>
|
||
<div style="background: #fff; color: #2563EB; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 15px; padding: 16px 32px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);">
|
||
Diagnostico Gratis →
|
||
</div>
|
||
<div style="font-family: Inter, sans-serif; font-size: 13px; color: rgba(255,255,255,0.5);">
|
||
horux360.com/diagnostico
|
||
</div>
|
||
<div style="margin-top: 32px; display: flex; align-items: center; gap: 8px;">
|
||
<div style="width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;">
|
||
<span style="color: #fff; font-family: Montserrat; font-weight: 800; font-size: 12px;">H</span>
|
||
</div>
|
||
<span style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.8);">Horux 360</span>
|
||
</div>
|
||
<div style="font-family: Inter, sans-serif; font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 6px;">
|
||
Control fiscal en tiempo real · Desde $480/mes
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ig-dots">
|
||
<span class="active"></span><span></span><span></span><span></span><span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IG Actions -->
|
||
<div class="ig-actions">
|
||
<svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
||
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||
<svg viewBox="0 0 24 24" style="margin-left: auto;"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
||
</div>
|
||
|
||
<!-- Caption -->
|
||
<div class="ig-caption">
|
||
<strong>horux360</strong> ¿Ya le pago a un contador, para que necesito mas?<br><br>
|
||
Buena pregunta. Tu contador cumple con el SAT. Pero, ¿quien concilia tus facturas? ¿Quien te alerta cuando algo no cuadra?<br><br>
|
||
Desliza para entender la diferencia entre cumplir fiscalmente y tener CONTROL fiscal. 👆<br><br>
|
||
🔗 Diagnostico gratis en el link de bio.<br>
|
||
<span class="hashtags"><br>#Horux360 #PyMEsMexico #ControlFiscal #AhorroFiscal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-hint">← Desliza el carrusel horizontalmente →</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. STORY / REEL COVER -->
|
||
<div class="section">
|
||
<div class="section-title">3. Story / Reel Cover</div>
|
||
<div class="section-subtitle">Formato vertical 9:16 — Cover para reel "3 cosas que tu contador NO te va a decir"</div>
|
||
|
||
<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%, #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>
|
||
<div style="flex: 1; height: 2px; background: rgba(255,255,255,0.3); border-radius: 2px;"></div>
|
||
<div style="flex: 1; height: 2px; background: rgba(255,255,255,0.3); border-radius: 2px;"></div>
|
||
</div>
|
||
|
||
<!-- 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(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: #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;">
|
||
No porque sea malo.<br>Porque no es su trabajo.
|
||
</div>
|
||
|
||
<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: #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: #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: #7C3AED; font-size: 18px;">3</span>
|
||
<span style="font-family: Inter; font-size: 13px; color: #fff;">Sin visibilidad, pierdes dinero</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom branding -->
|
||
<div style="position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;">
|
||
<div style="display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 20px;">
|
||
<span style="font-family: Montserrat; font-weight: 800; font-size: 12px; color: #fff;">HORUX 360</span>
|
||
<span style="color: rgba(255,255,255,0.4);">|</span>
|
||
<span style="font-family: Inter; font-size: 11px; color: rgba(255,255,255,0.6);">Control fiscal en tiempo real</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Second story: dato duro -->
|
||
<div class="mockup-wrapper">
|
||
<div class="mockup-label">Instagram Story — Dato Duro</div>
|
||
<div class="story-frame" style="background: #2563EB;">
|
||
<div style="position: absolute; inset: 0; 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: 900; font-size: 96px; color: #fff; line-height: 1; margin-bottom: 8px;">
|
||
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:#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>
|
||
|
||
<div style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 16px;">
|
||
¿Eres uno de ellos?
|
||
</div>
|
||
|
||
<div style="background: #fff; color: #2563EB; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px; padding: 14px 28px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);">
|
||
Diagnostico Gratis ↑
|
||
</div>
|
||
|
||
<div style="font-family: Inter; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 12px;">horux360.com/diagnostico</div>
|
||
</div>
|
||
|
||
<div style="position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;">
|
||
<div style="display: inline-flex; align-items: center; gap: 8px;">
|
||
<div style="width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
|
||
<span style="color: #fff; font-family: Montserrat; font-weight: 800; font-size: 10px;">H</span>
|
||
</div>
|
||
<span style="font-family: Montserrat; font-weight: 700; font-size: 12px; color: rgba(255,255,255,0.7);">Horux 360</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. POST LINKEDIN -->
|
||
<div class="section">
|
||
<div class="section-title">4. Post LinkedIn</div>
|
||
<div class="section-subtitle">Formato desktop — Post con imagen para empresarios</div>
|
||
|
||
<div class="mockup-row">
|
||
<div class="mockup-wrapper">
|
||
<div class="mockup-label">LinkedIn Feed</div>
|
||
<div class="desktop-frame">
|
||
<div class="desktop-bar">
|
||
<div class="desktop-dot r"></div>
|
||
<div class="desktop-dot y"></div>
|
||
<div class="desktop-dot g"></div>
|
||
</div>
|
||
<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, #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>
|
||
<div style="font-family: Inter; font-weight: 600; font-size: 14px; color: #191919;">Horux 360</div>
|
||
<div style="font-family: Inter; font-size: 12px; color: #666; margin-top: 2px;">2,340 seguidores · Control fiscal en tiempo real para PyMEs</div>
|
||
<div style="font-family: Inter; font-size: 12px; color: #666; margin-top: 2px;">2h · 🌐</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LinkedIn post text -->
|
||
<div style="padding: 0 20px 16px; font-family: Inter; font-size: 14px; color: #191919; line-height: 1.6;">
|
||
La mayoria de los duenos de empresa con los que hablo tienen algo en comun:<br><br>
|
||
Facturan bien. Venden bien. Crecen.<br><br>
|
||
Pero cuando les pregunto "¿cuanto podrias ahorrar con una estrategia fiscal diferente?", la respuesta es casi siempre: <strong>"No se."</strong><br><br>
|
||
Y ese "no se" tiene un costo. Uno que se acumula mes tras mes.<br><br>
|
||
No hablo de evadir. Hablo de tener <strong>visibilidad</strong>: ver tus facturas conciliadas, recibir alertas del SAT, saber si tu regimen es el optimo.<br><br>
|
||
El dueno de PyME promedio con ingresos arriba de $100K mensuales esta dejando entre <strong>$5,000 y $15,000 pesos al mes</strong> en la mesa.<br><br>
|
||
No por negligencia. Por falta de un tablero de control.<br><br>
|
||
<span style="color: #0A66C2;">→ Diagnostico gratuito: horux360.com/diagnostico</span>
|
||
</div>
|
||
|
||
<!-- LinkedIn image -->
|
||
<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?
|
||
</div>
|
||
<div style="font-family: Inter; font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 24px;">
|
||
PyMEs con ingresos >$100K/mes pierden en promedio:
|
||
</div>
|
||
<!-- Mini chart -->
|
||
<div style="display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px;">
|
||
<div style="text-align: center;">
|
||
<div style="width: 60px; height: 120px; background: #EF4444; 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;">$38K</span>
|
||
</div>
|
||
<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: #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(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>
|
||
<div style="display: inline-block; background: #2563EB; color: #fff; font-family: Montserrat; font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: 8px;">
|
||
Diagnostico Gratis →
|
||
</div>
|
||
</div>
|
||
<div style="flex: 0 0 auto; text-align: right;">
|
||
<div style="display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-bottom: 8px;">
|
||
<div style="width: 20px; height: 20px; border-radius: 5px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;">
|
||
<span style="color: #fff; font-family: Montserrat; font-weight: 800; font-size: 8px;">H</span>
|
||
</div>
|
||
<span style="font-family: Montserrat; font-weight: 700; font-size: 11px; color: rgba(255,255,255,0.6);">HORUX 360</span>
|
||
</div>
|
||
<div style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.4);">Control fiscal<br>en tiempo real</div>
|
||
<div style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 4px;">Desde $480/mes</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LinkedIn engagement -->
|
||
<div style="padding: 10px 20px; border-top: 1px solid #E0E0E0; display: flex; justify-content: space-between; font-family: Inter; font-size: 12px; color: #666;">
|
||
<span>👍 💡 42</span>
|
||
<span>8 comentarios · 3 compartidos</span>
|
||
</div>
|
||
<div style="padding: 8px 20px 16px; display: flex; justify-content: space-around; border-top: 1px solid #E0E0E0;">
|
||
<span style="font-family: Inter; font-size: 13px; color: #666; padding: 8px 12px;">👍 Recomendar</span>
|
||
<span style="font-family: Inter; font-size: 13px; color: #666; padding: 8px 12px;">💬 Comentar</span>
|
||
<span style="font-family: Inter; font-size: 13px; color: #666; padding: 8px 12px;">🔁 Compartir</span>
|
||
<span style="font-family: Inter; font-size: 13px; color: #666; padding: 8px 12px;">📨 Enviar</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. POST ESTÁTICO — DATO DURO -->
|
||
<div class="section">
|
||
<div class="section-title">5. Post Estatico — Dato Duro</div>
|
||
<div class="section-subtitle">Post de imagen unica para Facebook/Instagram con estadistica impactante</div>
|
||
|
||
<div class="mockup-row">
|
||
<div class="mockup-wrapper">
|
||
<div class="mockup-label">Facebook / Instagram Feed</div>
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="ig-header">
|
||
<div class="ig-avatar">H</div>
|
||
<div class="ig-user">
|
||
<strong>horux360</strong>
|
||
<span>Patrocinado</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Static post image -->
|
||
<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(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: #7C3AED;">mas impuestos</strong> de los necesarios
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height: 1px; background: rgba(255,255,255,0.15); margin-bottom: 20px;"></div>
|
||
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
||
<div>
|
||
<div style="font-family: Inter; font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 6px;">¿Eres uno de ellos?</div>
|
||
<div style="background: #fff; color: #2563EB; font-family: Montserrat; font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: 8px; display: inline-block;">
|
||
Diagnostico Gratis →
|
||
</div>
|
||
</div>
|
||
<div style="text-align: right;">
|
||
<div style="display: flex; align-items: center; gap: 6px; justify-content: flex-end;">
|
||
<div style="width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;">
|
||
<span style="color: #fff; font-family: Montserrat; font-weight: 800; font-size: 9px;">H</span>
|
||
</div>
|
||
<span style="font-family: Montserrat; font-weight: 700; font-size: 11px; color: rgba(255,255,255,0.7);">Horux 360</span>
|
||
</div>
|
||
<div style="font-family: Inter; font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 4px;">Desde $480/mes</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ig-actions">
|
||
<svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
||
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||
<svg viewBox="0 0 24 24" style="margin-left: auto;"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
||
</div>
|
||
|
||
<div class="ig-caption">
|
||
<strong>horux360</strong> El 73% de los duenos de PyMEs en Mexico pagan mas impuestos de los que deberian.<br><br>
|
||
No porque hagan algo mal. Sino porque nadie les muestra el panorama completo.<br><br>
|
||
Desde $480/mes tienes visibilidad total.<br><br>
|
||
👉 Diagnostico gratis: horux360.com/diagnostico<br>
|
||
<span class="hashtags"><br>#Horux360 #PyMEs #AhorroFiscal #ControlFiscal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Social Proof post -->
|
||
<div class="mockup-wrapper">
|
||
<div class="mockup-label">Post Testimonio</div>
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="ig-header">
|
||
<div class="ig-avatar">H</div>
|
||
<div class="ig-user">
|
||
<strong>horux360</strong>
|
||
<span>Patrocinado</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="aspect-ratio: 1/1; background: #0F172A; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36px; text-align: center; position: relative;">
|
||
<!-- Decorative quotes -->
|
||
<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: #22C55E;">$8,400</span> pesos mas al mes.
|
||
</div>
|
||
|
||
<div style="width: 48px; height: 2px; background: #2563EB; margin-bottom: 20px;"></div>
|
||
|
||
<div style="font-family: Inter; font-size: 13px; color: rgba(255,255,255,0.5);">
|
||
Cliente Horux 360 — Sector comercio
|
||
</div>
|
||
|
||
<div style="position: absolute; bottom: 36px; left: 36px; right: 36px; display: flex; justify-content: space-between; align-items: center;">
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<div style="width: 28px; height: 28px; border-radius: 7px; background: rgba(37,99,235,0.3); display: flex; align-items: center; justify-content: center;">
|
||
<span style="color: #fff; font-family: Montserrat; font-weight: 800; font-size: 11px;">H</span>
|
||
</div>
|
||
<span style="font-family: Montserrat; font-weight: 700; font-size: 12px; color: rgba(255,255,255,0.6);">Horux 360</span>
|
||
</div>
|
||
<div style="background: #2563EB; color: #fff; font-family: Montserrat; font-weight: 700; font-size: 11px; padding: 8px 16px; border-radius: 8px;">
|
||
Diagnostico Gratis →
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ig-actions">
|
||
<svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
||
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||
<svg viewBox="0 0 24 24" style="margin-left: auto;"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
||
</div>
|
||
|
||
<div class="ig-caption">
|
||
<strong>horux360</strong> Eso nos dijo un cliente despues de su primer mes con Horux 360.<br><br>
|
||
No es magia. Es visibilidad: facturas conciliadas, alertas del SAT, todo en tiempo real.<br><br>
|
||
¿Cuanto estas dejando en la mesa?<br>
|
||
👉 horux360.com/diagnostico<br>
|
||
<span class="hashtags"><br>#ResultadosReales #Horux360 #AhorroFiscal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. BEFORE/AFTER COMPARISON -->
|
||
<div class="section">
|
||
<div class="section-title">6. Post Comparativo — Antes / Despues</div>
|
||
<div class="section-subtitle">Formato carrusel de 2 slides o imagen dividida</div>
|
||
|
||
<div class="mockup-row">
|
||
<div class="mockup-wrapper">
|
||
<div class="mockup-label">Imagen Dividida</div>
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="ig-header">
|
||
<div class="ig-avatar">H</div>
|
||
<div class="ig-user">
|
||
<strong>horux360</strong>
|
||
<span>Patrocinado</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="aspect-ratio: 1/1; display: flex;">
|
||
<!-- Left: Sin control -->
|
||
<div style="flex: 1; background: #FEE2E2; display: flex; flex-direction: column; justify-content: center; padding: 24px;">
|
||
<div style="font-size: 36px; margin-bottom: 12px;">😰</div>
|
||
<div style="font-family: Montserrat; font-weight: 800; font-size: 16px; color: #991B1B; margin-bottom: 16px;">Sin control fiscal</div>
|
||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<span style="color: #EF4444; font-size: 14px;">✗</span>
|
||
<span style="font-family: Inter; font-size: 12px; color: #7F1D1D;">Sorpresas en abril</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<span style="color: #EF4444; font-size: 14px;">✗</span>
|
||
<span style="font-family: Inter; font-size: 12px; color: #7F1D1D;">Pagos de mas al SAT</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<span style="color: #EF4444; font-size: 14px;">✗</span>
|
||
<span style="font-family: Inter; font-size: 12px; color: #7F1D1D;">Sin saber si tu regimen es el correcto</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<span style="color: #EF4444; font-size: 14px;">✗</span>
|
||
<span style="font-family: Inter; font-size: 12px; color: #7F1D1D;">Estres cada trimestre</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Right: Con Horux -->
|
||
<div style="flex: 1; background: #ECFDF5; display: flex; flex-direction: column; justify-content: center; padding: 24px;">
|
||
<div style="font-size: 36px; margin-bottom: 12px;">😎</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; align-items: center; gap: 8px;">
|
||
<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: #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: #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: #22C55E; font-size: 14px;">✓</span>
|
||
<span style="font-family: Inter; font-size: 12px; color: #064E3B;">Desde $480/mes</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ig-actions">
|
||
<svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
||
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
||
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||
<svg viewBox="0 0 24 24" style="margin-left: auto;"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
||
</div>
|
||
|
||
<div class="ig-caption">
|
||
<strong>horux360</strong> Abril esta a la vuelta de la esquina. ¿De que lado quieres estar?<br><br>
|
||
👉 Diagnostico gratis: horux360.com/diagnostico<br>
|
||
<span class="hashtags"><br>#Horux360 #ControlFiscal #PyMEs #DeclaracionAnual</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<div style="text-align: center; padding: 40px 20px 60px; border-top: 1px solid #1E293B;">
|
||
<div style="font-family: Montserrat; font-weight: 700; font-size: 14px; color: #64748B; margin-bottom: 8px;">Propuesta creada por Dante — Equipo de Marketing</div>
|
||
<div style="font-family: Inter; font-size: 13px; color: #475569;">Horux 360 · Marzo 2026 · Todos los disenos son mockups para aprobacion</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Simple carousel dot indicator
|
||
document.querySelectorAll('.carousel-slides').forEach(carousel => {
|
||
const dots = carousel.parentElement.querySelector('.ig-dots');
|
||
if (!dots) return;
|
||
const dotEls = dots.querySelectorAll('span');
|
||
carousel.addEventListener('scroll', () => {
|
||
const idx = Math.round(carousel.scrollLeft / carousel.offsetWidth);
|
||
dotEls.forEach((d, i) => d.className = i === idx ? 'active' : '');
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|