1817 lines
56 KiB
HTML
1817 lines
56 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 — Contenido para Redes Sociales</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--azul: #2563EB;
|
|
--azul-profundo: #1E3A5F;
|
|
--verde: #10B981;
|
|
--naranja: #F59E0B;
|
|
--blanco: #FFFFFF;
|
|
--gris-claro: #F3F4F6;
|
|
--gris: #6B7280;
|
|
--negro: #111827;
|
|
--gradient: linear-gradient(135deg, #2563EB 0%, #1E3A5F 100%);
|
|
--gradient-light: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #0F172A;
|
|
color: var(--blanco);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
text-align: center;
|
|
padding: 60px 20px 40px;
|
|
background: var(--gradient);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.05) 0%, transparent 50%);
|
|
}
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
}
|
|
.header p {
|
|
font-size: 1.1rem;
|
|
opacity: 0.85;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
background: rgba(255,255,255,0.15);
|
|
border: 1px solid rgba(255,255,255,0.25);
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 16px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 60px 20px;
|
|
}
|
|
.section-title {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: var(--blanco);
|
|
}
|
|
.section-subtitle {
|
|
font-size: 1rem;
|
|
color: var(--gris);
|
|
margin-bottom: 40px;
|
|
}
|
|
.section-divider {
|
|
width: 60px;
|
|
height: 4px;
|
|
background: var(--azul);
|
|
border-radius: 2px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Grid */
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.grid-2, .grid-3 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Post Container — simula feed */
|
|
.post-label {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
color: var(--azul);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* FEED POSTS (1080x1080) */
|
|
/* ==================== */
|
|
|
|
.feed-post {
|
|
width: 100%;
|
|
max-width: 540px;
|
|
margin: 0 auto;
|
|
background: #1E293B;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
.feed-post .post-image {
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.feed-post .post-caption {
|
|
padding: 20px;
|
|
font-size: 0.85rem;
|
|
color: #CBD5E1;
|
|
line-height: 1.7;
|
|
}
|
|
.feed-post .post-caption strong {
|
|
color: var(--blanco);
|
|
font-weight: 600;
|
|
}
|
|
.feed-post .post-caption .hashtags {
|
|
color: var(--azul);
|
|
font-size: 0.8rem;
|
|
margin-top: 10px;
|
|
}
|
|
.feed-post .post-caption .cta-link {
|
|
display: inline-block;
|
|
margin-top: 12px;
|
|
color: var(--verde);
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* POST 1: DATO DURO 73% */
|
|
/* ==================== */
|
|
.post-dato-duro {
|
|
background: var(--gradient);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 40px;
|
|
text-align: center;
|
|
}
|
|
.post-dato-duro .big-number {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 8rem;
|
|
font-weight: 900;
|
|
color: var(--blanco);
|
|
line-height: 1;
|
|
text-shadow: 0 4px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.post-dato-duro .big-number span {
|
|
font-size: 5rem;
|
|
}
|
|
.post-dato-duro .subtitle {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: rgba(255,255,255,0.9);
|
|
margin-top: 16px;
|
|
max-width: 320px;
|
|
line-height: 1.5;
|
|
}
|
|
.post-dato-duro .price-tag {
|
|
margin-top: 30px;
|
|
background: rgba(255,255,255,0.15);
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
padding: 10px 24px;
|
|
border-radius: 30px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
}
|
|
.post-dato-duro .logo-area {
|
|
margin-top: 24px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 1rem;
|
|
opacity: 0.7;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* POST 2: COMPARATIVO */
|
|
/* ==================== */
|
|
.post-comparativo {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
height: 100%;
|
|
}
|
|
.post-comparativo .side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
}
|
|
.post-comparativo .side-bad {
|
|
background: linear-gradient(180deg, #991B1B 0%, #7F1D1D 100%);
|
|
}
|
|
.post-comparativo .side-good {
|
|
background: linear-gradient(180deg, var(--azul) 0%, var(--azul-profundo) 100%);
|
|
}
|
|
.post-comparativo .side .emoji {
|
|
font-size: 3rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
.post-comparativo .side h3 {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
.post-comparativo .side ul {
|
|
list-style: none;
|
|
text-align: left;
|
|
font-size: 0.8rem;
|
|
line-height: 2;
|
|
}
|
|
.post-comparativo .side ul li::before {
|
|
margin-right: 8px;
|
|
}
|
|
.post-comparativo .side-bad ul li::before {
|
|
content: '✗';
|
|
color: #FCA5A5;
|
|
}
|
|
.post-comparativo .side-good ul li::before {
|
|
content: '✓';
|
|
color: #86EFAC;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* POST 3: TESTIMONIO */
|
|
/* ==================== */
|
|
.post-testimonio {
|
|
background: linear-gradient(135deg, #0F172A 0%, var(--azul-profundo) 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.post-testimonio .quote-mark {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 6rem;
|
|
color: var(--azul);
|
|
line-height: 1;
|
|
opacity: 0.6;
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 40px;
|
|
}
|
|
.post-testimonio .amount {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 3.5rem;
|
|
font-weight: 900;
|
|
color: var(--blanco);
|
|
margin-bottom: 8px;
|
|
}
|
|
.post-testimonio .amount-label {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--verde);
|
|
margin-bottom: 24px;
|
|
}
|
|
.post-testimonio .quote-text {
|
|
font-size: 0.95rem;
|
|
color: rgba(255,255,255,0.75);
|
|
max-width: 360px;
|
|
line-height: 1.6;
|
|
font-style: italic;
|
|
}
|
|
.post-testimonio .client-info {
|
|
margin-top: 24px;
|
|
font-size: 0.8rem;
|
|
color: rgba(255,255,255,0.45);
|
|
}
|
|
.post-testimonio .logo-bottom {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
right: 30px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 0.85rem;
|
|
color: rgba(255,255,255,0.3);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* POST 4: 3 SENALES */
|
|
/* ==================== */
|
|
.post-senales {
|
|
background: var(--blanco);
|
|
color: var(--negro);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50px 36px;
|
|
}
|
|
.post-senales .post-title {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.3rem;
|
|
font-weight: 800;
|
|
color: var(--azul-profundo);
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
line-height: 1.4;
|
|
}
|
|
.post-senales .signal-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
max-width: 380px;
|
|
}
|
|
.post-senales .signal-num {
|
|
flex-shrink: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--azul);
|
|
color: var(--blanco);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 0.9rem;
|
|
}
|
|
.post-senales .signal-text {
|
|
font-size: 0.85rem;
|
|
color: #374151;
|
|
line-height: 1.5;
|
|
}
|
|
.post-senales .bottom-bar {
|
|
margin-top: 28px;
|
|
background: var(--gradient);
|
|
color: var(--blanco);
|
|
padding: 14px 28px;
|
|
border-radius: 30px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* POST 5: PRECIO GANCHO */
|
|
/* ==================== */
|
|
.post-precio {
|
|
background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, var(--azul-profundo) 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.post-precio::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: radial-gradient(circle at 50% 30%, rgba(37,99,235,0.15) 0%, transparent 60%);
|
|
}
|
|
.post-precio .eyebrow {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--verde);
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
.post-precio .price-main {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 5rem;
|
|
font-weight: 900;
|
|
color: var(--blanco);
|
|
line-height: 1;
|
|
position: relative;
|
|
}
|
|
.post-precio .price-main .currency {
|
|
font-size: 2.5rem;
|
|
vertical-align: top;
|
|
margin-right: 4px;
|
|
}
|
|
.post-precio .price-main .period {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: rgba(255,255,255,0.5);
|
|
}
|
|
.post-precio .price-desc {
|
|
font-size: 1rem;
|
|
color: rgba(255,255,255,0.7);
|
|
margin-top: 16px;
|
|
max-width: 300px;
|
|
line-height: 1.5;
|
|
position: relative;
|
|
}
|
|
.post-precio .features-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 28px;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.post-precio .feature-chip {
|
|
background: rgba(255,255,255,0.1);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: rgba(255,255,255,0.8);
|
|
}
|
|
.post-precio .cta-btn {
|
|
margin-top: 30px;
|
|
background: var(--azul);
|
|
color: var(--blanco);
|
|
padding: 14px 32px;
|
|
border-radius: 30px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
position: relative;
|
|
box-shadow: 0 4px 20px rgba(37,99,235,0.4);
|
|
}
|
|
|
|
/* ==================== */
|
|
/* CARRUSEL */
|
|
/* ==================== */
|
|
.carousel-container {
|
|
max-width: 540px;
|
|
margin: 0 auto;
|
|
background: #1E293B;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
.carousel-viewport {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.carousel-track {
|
|
display: flex;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
.carousel-slide {
|
|
min-width: 100%;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
.carousel-dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 16px;
|
|
}
|
|
.carousel-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.carousel-dot.active {
|
|
background: var(--azul);
|
|
width: 24px;
|
|
border-radius: 4px;
|
|
}
|
|
.carousel-nav {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(0,0,0,0.5);
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.carousel-nav:hover { background: rgba(0,0,0,0.7); }
|
|
.carousel-nav.prev { left: 12px; }
|
|
.carousel-nav.next { right: 12px; }
|
|
|
|
/* Slide styles */
|
|
.slide-portada {
|
|
background: var(--gradient);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 40px;
|
|
text-align: center;
|
|
}
|
|
.slide-portada h2 {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
line-height: 1.3;
|
|
max-width: 400px;
|
|
}
|
|
.slide-portada .slide-badge {
|
|
margin-top: 20px;
|
|
background: rgba(255,255,255,0.15);
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.slide-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
}
|
|
.slide-content h3 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
}
|
|
.slide-content ul {
|
|
list-style: none;
|
|
text-align: left;
|
|
max-width: 360px;
|
|
}
|
|
.slide-content ul li {
|
|
padding: 10px 0;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.slide-content ul li:last-child { border-bottom: none; }
|
|
.slide-content ul li .icon {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.slide-bg-light {
|
|
background: var(--blanco);
|
|
color: var(--negro);
|
|
}
|
|
.slide-bg-dark {
|
|
background: var(--azul-profundo);
|
|
color: var(--blanco);
|
|
}
|
|
.slide-bg-gradient {
|
|
background: var(--gradient);
|
|
color: var(--blanco);
|
|
}
|
|
|
|
.slide-diagram {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50px 30px;
|
|
text-align: center;
|
|
}
|
|
.slide-diagram .diagram-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: 24px;
|
|
}
|
|
.slide-diagram .d-item {
|
|
background: rgba(255,255,255,0.1);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
padding: 16px 20px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
min-width: 120px;
|
|
}
|
|
.slide-diagram .d-plus {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--verde);
|
|
}
|
|
.slide-diagram .d-equals {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--naranja);
|
|
}
|
|
.slide-diagram .d-result {
|
|
background: var(--verde);
|
|
color: var(--negro);
|
|
border-color: var(--verde);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.slide-cta {
|
|
background: var(--gradient);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
}
|
|
.slide-cta h3 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
max-width: 340px;
|
|
line-height: 1.4;
|
|
margin-bottom: 24px;
|
|
}
|
|
.slide-cta .cta-button {
|
|
background: var(--blanco);
|
|
color: var(--azul);
|
|
padding: 14px 32px;
|
|
border-radius: 30px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
}
|
|
.slide-cta .url {
|
|
margin-top: 16px;
|
|
font-size: 0.8rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* STORIES / REELS (9:16) */
|
|
/* ==================== */
|
|
.stories-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.stories-grid { grid-template-columns: 1fr; max-width: 300px; }
|
|
}
|
|
|
|
.story-frame {
|
|
width: 100%;
|
|
aspect-ratio: 9/16;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.story-1 {
|
|
background: var(--gradient);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
}
|
|
.story-1 .story-eyebrow {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--naranja);
|
|
margin-bottom: 24px;
|
|
}
|
|
.story-1 .story-number {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 6rem;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
}
|
|
.story-1 .story-text {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-top: 16px;
|
|
max-width: 220px;
|
|
line-height: 1.4;
|
|
}
|
|
.story-1 .swipe-up {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
opacity: 0.7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.story-1 .swipe-up .arrow {
|
|
font-size: 1.2rem;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
.story-2 {
|
|
background: linear-gradient(180deg, #0F172A 0%, var(--azul-profundo) 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 50px 24px 40px;
|
|
text-align: left;
|
|
}
|
|
.story-2 .story-header {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.2rem;
|
|
font-weight: 800;
|
|
line-height: 1.3;
|
|
margin-bottom: 30px;
|
|
}
|
|
.story-2 .story-header span {
|
|
color: var(--naranja);
|
|
}
|
|
.story-2 .point-item {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
align-items: flex-start;
|
|
}
|
|
.story-2 .point-num {
|
|
flex-shrink: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: var(--azul);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 0.8rem;
|
|
}
|
|
.story-2 .point-text {
|
|
font-size: 0.8rem;
|
|
color: rgba(255,255,255,0.85);
|
|
line-height: 1.5;
|
|
}
|
|
.story-2 .story-footer {
|
|
margin-top: auto;
|
|
text-align: center;
|
|
}
|
|
.story-2 .story-footer .cta-pill {
|
|
display: inline-block;
|
|
background: var(--verde);
|
|
color: var(--negro);
|
|
padding: 10px 24px;
|
|
border-radius: 20px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.story-3 {
|
|
background: linear-gradient(180deg, var(--azul) 0%, #7C3AED 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.story-3 .reel-badge {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(0,0,0,0.3);
|
|
padding: 6px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.story-3 .myth-label {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--naranja);
|
|
margin-bottom: 20px;
|
|
}
|
|
.story-3 .myth-text {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
max-width: 240px;
|
|
margin-bottom: 20px;
|
|
text-decoration: line-through;
|
|
text-decoration-color: #EF4444;
|
|
text-decoration-thickness: 3px;
|
|
}
|
|
.story-3 .truth-text {
|
|
font-size: 0.85rem;
|
|
color: rgba(255,255,255,0.9);
|
|
max-width: 240px;
|
|
line-height: 1.5;
|
|
padding: 16px 20px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 12px;
|
|
border-left: 3px solid var(--verde);
|
|
}
|
|
.story-3 .truth-label {
|
|
color: var(--verde);
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* LINKEDIN */
|
|
/* ==================== */
|
|
.linkedin-post {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: #FFFFFF;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
color: var(--negro);
|
|
}
|
|
.linkedin-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
}
|
|
.linkedin-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--gradient);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 1rem;
|
|
color: white;
|
|
}
|
|
.linkedin-name {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
color: #000;
|
|
}
|
|
.linkedin-role {
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
}
|
|
.linkedin-body {
|
|
padding: 0 20px 16px;
|
|
font-size: 0.85rem;
|
|
line-height: 1.7;
|
|
color: #333;
|
|
white-space: pre-line;
|
|
}
|
|
.linkedin-image {
|
|
width: 100%;
|
|
aspect-ratio: 1200/627;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.linkedin-engagement {
|
|
padding: 12px 20px;
|
|
border-top: 1px solid #E5E7EB;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
/* LinkedIn image: chart */
|
|
.li-chart-bg {
|
|
background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
height: 100%;
|
|
}
|
|
.li-chart-bg .chart-title {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--azul-profundo);
|
|
margin-bottom: 24px;
|
|
}
|
|
.li-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 40px;
|
|
height: 140px;
|
|
}
|
|
.li-bar-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.li-bar {
|
|
width: 70px;
|
|
border-radius: 8px 8px 0 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 10px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 0.85rem;
|
|
}
|
|
.li-bar-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: #666;
|
|
text-align: center;
|
|
max-width: 80px;
|
|
}
|
|
.li-chart-footer {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.li-chart-footer .logo-text {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 0.85rem;
|
|
color: var(--azul);
|
|
}
|
|
.li-chart-footer .tagline {
|
|
font-size: 0.7rem;
|
|
color: #999;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* CARRUSEL 2: DEDUCCIONES */
|
|
/* ==================== */
|
|
.slide-deduccion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50px 36px;
|
|
text-align: center;
|
|
}
|
|
.slide-deduccion .ded-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
.slide-deduccion .ded-number {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--naranja);
|
|
margin-bottom: 12px;
|
|
}
|
|
.slide-deduccion h3 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
margin-bottom: 16px;
|
|
line-height: 1.3;
|
|
}
|
|
.slide-deduccion p {
|
|
font-size: 0.9rem;
|
|
color: rgba(255,255,255,0.75);
|
|
max-width: 320px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* RESICO COMPARISON */
|
|
/* ==================== */
|
|
.slide-resico-compare {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
}
|
|
.resico-table {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin-top: 20px;
|
|
}
|
|
.resico-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.resico-cell {
|
|
padding: 12px 8px;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
}
|
|
.resico-header {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.resico-cell.label {
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: rgba(255,255,255,0.7);
|
|
background: rgba(255,255,255,0.03);
|
|
}
|
|
.resico-cell.resico {
|
|
background: rgba(37,99,235,0.15);
|
|
color: #93C5FD;
|
|
}
|
|
.resico-cell.general {
|
|
background: rgba(16,185,129,0.15);
|
|
color: #6EE7B7;
|
|
}
|
|
.resico-cell.highlight {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* UTILITY */
|
|
/* ==================== */
|
|
.mt-60 { margin-top: 60px; }
|
|
.center { text-align: center; }
|
|
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- HEADER -->
|
|
<div class="header">
|
|
<div class="badge">Propuesta de Contenido</div>
|
|
<h1>Horux 360</h1>
|
|
<p>Contenido real para redes sociales. Control fiscal en tiempo real para PyMEs.</p>
|
|
</div>
|
|
|
|
<!-- ==================== -->
|
|
<!-- SECCION 1: POSTS FEED -->
|
|
<!-- ==================== -->
|
|
<div class="section">
|
|
<div class="section-divider"></div>
|
|
<h2 class="section-title">Posts para Feed</h2>
|
|
<p class="section-subtitle">Facebook e Instagram — formato 1080x1080</p>
|
|
|
|
<div class="grid-2">
|
|
<!-- POST 1: DATO DURO -->
|
|
<div>
|
|
<div class="post-label">Post 1 — Dato Duro</div>
|
|
<div class="feed-post">
|
|
<div class="post-image">
|
|
<div class="post-dato-duro" style="height:100%">
|
|
<div class="big-number">73<span>%</span></div>
|
|
<div class="subtitle">de los dueños de PyMEs pagan mas impuestos de lo necesario</div>
|
|
<div class="price-tag">Desde $480/mes</div>
|
|
<div class="logo-area">HORUX 360</div>
|
|
</div>
|
|
</div>
|
|
<div class="post-caption">
|
|
<strong>horux360</strong> El 73% de los dueños de PyMEs en Mexico pagan mas impuestos de los que deberian.
|
|
|
|
No porque hagan algo mal. Sino porque nadie les muestra el panorama completo.
|
|
|
|
Imagina tener un tablero donde ves en tiempo real: tus facturas, tus conciliaciones, tus alertas del SAT y cuanto podrias ahorrar este mes.
|
|
|
|
Eso hace Horux 360. Desde $480/mes.
|
|
<div class="cta-link">horux360.com/diagnostico</div>
|
|
<div class="hashtags">#Horux360 #PyMEsMexico #EstrategiaFiscal #AhorroFiscal #NegocioInteligente</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- POST 2: COMPARATIVO -->
|
|
<div>
|
|
<div class="post-label">Post 2 — Antes vs Despues</div>
|
|
<div class="feed-post">
|
|
<div class="post-image">
|
|
<div class="post-comparativo" style="height:100%">
|
|
<div class="side side-bad">
|
|
<div class="emoji">😰</div>
|
|
<h3>Sin control fiscal</h3>
|
|
<ul>
|
|
<li>Sorpresas en abril</li>
|
|
<li>Pagos de mas al SAT</li>
|
|
<li>Cero visibilidad</li>
|
|
<li>Estres constante</li>
|
|
</ul>
|
|
</div>
|
|
<div class="side side-good">
|
|
<div class="emoji">😎</div>
|
|
<h3>Con Horux 360</h3>
|
|
<ul>
|
|
<li>Claridad todo el anio</li>
|
|
<li>Ahorro real mensual</li>
|
|
<li>Alertas del SAT</li>
|
|
<li>Control total</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="post-caption">
|
|
<strong>horux360</strong> Abril esta a la vuelta de la esquina. Y con el, la declaracion anual.
|
|
|
|
Este es el momento donde muchos dueños de negocio se llevan la sorpresa: "Por que debo tanto?"
|
|
|
|
Con Horux 360 ves mes a mes como va tu situacion fiscal. Sin sorpresas.
|
|
<div class="cta-link">horux360.com/diagnostico</div>
|
|
<div class="hashtags">#DeclaracionAnual #SAT #PyMEs #Horux360 #Emprendedores</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- POST 3: TESTIMONIO -->
|
|
<div>
|
|
<div class="post-label">Post 3 — Testimonio / Social Proof</div>
|
|
<div class="feed-post">
|
|
<div class="post-image">
|
|
<div class="post-testimonio" style="height:100%">
|
|
<div class="quote-mark">"</div>
|
|
<div class="amount">$8,400</div>
|
|
<div class="amount-label">ahorro mensual</div>
|
|
<div class="quote-text">"Descubri que estaba en un regimen que me costaba $8,400 pesos mas al mes."</div>
|
|
<div class="client-info">Cliente Horux 360 — Sector comercio</div>
|
|
<div class="logo-bottom">HORUX 360</div>
|
|
</div>
|
|
</div>
|
|
<div class="post-caption">
|
|
<strong>horux360</strong> Eso nos dijo un cliente despues de su primer mes con Horux 360.
|
|
|
|
No es magia. Es visibilidad: facturas conciliadas, alertas del SAT, y un tablero que te muestra todo en tiempo real.
|
|
<div class="cta-link">horux360.com/diagnostico</div>
|
|
<div class="hashtags">#ResultadosReales #AhorroFiscal #Horux360 #PyMEsMexico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- POST 4: 3 SENALES -->
|
|
<div>
|
|
<div class="post-label">Post 4 — Educativo / Lista</div>
|
|
<div class="feed-post">
|
|
<div class="post-image">
|
|
<div class="post-senales" style="height:100%">
|
|
<div class="post-title">3 señales de que estas<br>pagando impuestos de mas</div>
|
|
<div class="signal-item">
|
|
<div class="signal-num">1</div>
|
|
<div class="signal-text">No sabes exactamente cuanto pagas cada mes de ISR e IVA</div>
|
|
</div>
|
|
<div class="signal-item">
|
|
<div class="signal-num">2</div>
|
|
<div class="signal-text">Tu contador te dice "asi es" cuando preguntas por que subio tu pago</div>
|
|
</div>
|
|
<div class="signal-item">
|
|
<div class="signal-num">3</div>
|
|
<div class="signal-text">Nunca has comparado lo que pagarias en otro regimen fiscal</div>
|
|
</div>
|
|
<div class="bottom-bar">Diagnostico fiscal GRATIS → horux360.com</div>
|
|
</div>
|
|
</div>
|
|
<div class="post-caption">
|
|
<strong>horux360</strong> Si te identificaste con al menos una… no estas solo. Le pasa al 7 de cada 10 dueños de PyME.
|
|
|
|
La solucion: un tablero que te muestra todo en tiempo real. Desde $480/mes.
|
|
<div class="cta-link">horux360.com/diagnostico</div>
|
|
<div class="hashtags">#TipsFiscales #DueñoDeNegocio #Horux360 #ImpuestosMexico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- POST 5: PRECIO -->
|
|
<div>
|
|
<div class="post-label">Post 5 — Precio Gancho</div>
|
|
<div class="feed-post">
|
|
<div class="post-image">
|
|
<div class="post-precio" style="height:100%">
|
|
<div class="eyebrow">Control Fiscal en Tiempo Real</div>
|
|
<div class="price-main">
|
|
<span class="currency">$</span>480<span class="period">/mes</span>
|
|
</div>
|
|
<div class="price-desc">Todo lo que necesitas para tener visibilidad total de tu situacion fiscal</div>
|
|
<div class="features-row">
|
|
<div class="feature-chip">Facturas</div>
|
|
<div class="feature-chip">Conciliaciones</div>
|
|
<div class="feature-chip">Alertas SAT</div>
|
|
</div>
|
|
<div class="cta-btn">Diagnostico Gratuito</div>
|
|
</div>
|
|
</div>
|
|
<div class="post-caption">
|
|
<strong>horux360</strong> $480 al mes. Eso cuesta tener control fiscal en tiempo real.
|
|
|
|
Menos que una comida de negocios. Y puede ahorrarte miles cada mes.
|
|
<div class="cta-link">horux360.com/diagnostico</div>
|
|
<div class="hashtags">#Horux360 #ControlFiscal #PyMEs #Emprendedores #Mexico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== -->
|
|
<!-- SECCION 2: CARRUSEL 1 -->
|
|
<!-- ==================== -->
|
|
<div class="section">
|
|
<div class="section-divider"></div>
|
|
<h2 class="section-title">Carrusel Educativo #1</h2>
|
|
<p class="section-subtitle">Contador vs. Control Fiscal — 5 slides deslizables</p>
|
|
|
|
<div class="carousel-container" id="carousel1">
|
|
<div class="carousel-viewport">
|
|
<button class="carousel-nav prev" onclick="moveCarousel('carousel1', -1)">‹</button>
|
|
<button class="carousel-nav next" onclick="moveCarousel('carousel1', 1)">›</button>
|
|
<div class="carousel-track">
|
|
<!-- Slide 1: Portada -->
|
|
<div class="carousel-slide slide-portada">
|
|
<h2>Tu contador te esta ahorrando dinero… o solo cumpliendo?</h2>
|
|
<div class="slide-badge">Desliza para descubrir →</div>
|
|
</div>
|
|
<!-- Slide 2: Contador -->
|
|
<div class="carousel-slide slide-content slide-bg-light">
|
|
<h3 style="color:#1E3A5F">Lo que hace un contador:</h3>
|
|
<ul>
|
|
<li style="color:#374151"><span class="icon" style="background:#EFF6FF;color:#2563EB">📋</span> Declaraciones mensuales y anuales</li>
|
|
<li style="color:#374151"><span class="icon" style="background:#EFF6FF;color:#2563EB">🧾</span> Emision de facturas</li>
|
|
<li style="color:#374151"><span class="icon" style="background:#EFF6FF;color:#2563EB">✅</span> Cumplimiento ante el SAT</li>
|
|
<li style="color:#374151"><span class="icon" style="background:#EFF6FF;color:#2563EB">📁</span> Registro contable basico</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Slide 3: Control fiscal -->
|
|
<div class="carousel-slide slide-content slide-bg-dark">
|
|
<h3>Lo que hace un sistema de control fiscal:</h3>
|
|
<ul>
|
|
<li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">🔄</span> Conciliacion automatica de facturas</li>
|
|
<li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">🔔</span> Alertas del SAT en tiempo real</li>
|
|
<li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">📊</span> Analisis de regimen optimo</li>
|
|
<li><span class="icon" style="background:rgba(16,185,129,0.2);color:#10B981">💰</span> Proyecciones de ahorro</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Slide 4: Diagrama -->
|
|
<div class="carousel-slide slide-diagram slide-bg-gradient">
|
|
<h3 style="font-family:Montserrat;font-size:1.2rem;font-weight:700;margin-bottom:8px">No es que tu contador sea malo.</h3>
|
|
<p style="font-size:0.95rem;opacity:0.85;margin-bottom:16px">Es que necesitas AMBAS cosas.</p>
|
|
<div class="diagram-box">
|
|
<div class="d-item">Contador</div>
|
|
<div class="d-plus">+</div>
|
|
<div class="d-item">Horux 360</div>
|
|
<div class="d-equals">=</div>
|
|
<div class="d-item d-result">Ahorro Real</div>
|
|
</div>
|
|
</div>
|
|
<!-- Slide 5: CTA -->
|
|
<div class="carousel-slide slide-cta">
|
|
<h3>Cuanto podrias ahorrar?</h3>
|
|
<div class="cta-button">Diagnostico Gratis en 5 min</div>
|
|
<div class="url">horux360.com/diagnostico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-dots" id="carousel1-dots">
|
|
<div class="carousel-dot active" onclick="goToSlide('carousel1', 0)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel1', 1)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel1', 2)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel1', 3)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel1', 4)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== -->
|
|
<!-- SECCION 3: CARRUSEL 2 — DEDUCCIONES -->
|
|
<!-- ==================== -->
|
|
<div class="section">
|
|
<div class="section-divider"></div>
|
|
<h2 class="section-title">Carrusel Educativo #2</h2>
|
|
<p class="section-subtitle">5 deducciones que los dueños de PyME olvidan — 7 slides</p>
|
|
|
|
<div class="carousel-container" id="carousel2">
|
|
<div class="carousel-viewport">
|
|
<button class="carousel-nav prev" onclick="moveCarousel('carousel2', -1)">‹</button>
|
|
<button class="carousel-nav next" onclick="moveCarousel('carousel2', 1)">›</button>
|
|
<div class="carousel-track">
|
|
<!-- Portada -->
|
|
<div class="carousel-slide slide-portada" style="background:linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #92400E 100%)">
|
|
<div style="font-size:3.5rem;margin-bottom:16px">💸</div>
|
|
<h2 style="font-size:1.6rem">5 deducciones que probablemente estas perdiendo</h2>
|
|
<div class="slide-badge">Desliza →</div>
|
|
</div>
|
|
<!-- Ded 1 -->
|
|
<div class="carousel-slide slide-deduccion slide-bg-dark">
|
|
<div class="ded-icon">🏠</div>
|
|
<div class="ded-number">Deduccion 1</div>
|
|
<h3>Gastos de Home Office</h3>
|
|
<p>Si trabajas desde casa parcial o totalmente, una proporcion de tu renta, internet y electricidad es deducible. La mayoria no lo aplica.</p>
|
|
</div>
|
|
<!-- Ded 2 -->
|
|
<div class="carousel-slide slide-deduccion" style="background:linear-gradient(135deg, #1E293B 0%, #0F172A 100%);color:white">
|
|
<div class="ded-icon">💻</div>
|
|
<div class="ded-number">Deduccion 2</div>
|
|
<h3>Depreciacion de Equipo</h3>
|
|
<p>Computadoras, mobiliario, vehiculos. Muchos no deprecian correctamente y pierden deducciones valiosas cada anio.</p>
|
|
</div>
|
|
<!-- Ded 3 -->
|
|
<div class="carousel-slide slide-deduccion slide-bg-dark">
|
|
<div class="ded-icon">📚</div>
|
|
<div class="ded-number">Deduccion 3</div>
|
|
<h3>Capacitacion y Cursos</h3>
|
|
<p>Cursos, diplomados, certificaciones. Si estan relacionados con tu actividad empresarial, son 100% deducibles.</p>
|
|
</div>
|
|
<!-- Ded 4 -->
|
|
<div class="carousel-slide slide-deduccion" style="background:linear-gradient(135deg, #1E293B 0%, #0F172A 100%);color:white">
|
|
<div class="ded-icon">🛡️</div>
|
|
<div class="ded-number">Deduccion 4</div>
|
|
<h3>Seguros Empresariales</h3>
|
|
<p>Seguros de vida, gastos medicos mayores, seguros de responsabilidad civil. Protegen tu negocio Y reducen tu carga fiscal.</p>
|
|
</div>
|
|
<!-- Ded 5 -->
|
|
<div class="carousel-slide slide-deduccion slide-bg-dark">
|
|
<div class="ded-icon">⛽</div>
|
|
<div class="ded-number">Deduccion 5</div>
|
|
<h3>Gasolina y Transporte</h3>
|
|
<p>Con el CFDI correcto, tus gastos de gasolina y transporte son 100% deducibles. Necesitas factura de cada carga.</p>
|
|
</div>
|
|
<!-- CTA -->
|
|
<div class="carousel-slide slide-cta" style="background:linear-gradient(135deg, #F59E0B 0%, #D97706 100%)">
|
|
<h3 style="color:#000">Estas aprovechando TODAS tus deducciones?</h3>
|
|
<div class="cta-button" style="color:#D97706">Diagnostico Gratuito</div>
|
|
<div class="url" style="color:rgba(0,0,0,0.5)">horux360.com/diagnostico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-dots" id="carousel2-dots">
|
|
<div class="carousel-dot active" onclick="goToSlide('carousel2', 0)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel2', 1)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel2', 2)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel2', 3)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel2', 4)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel2', 5)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel2', 6)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== -->
|
|
<!-- SECCION 4: CARRUSEL 3 — RESICO -->
|
|
<!-- ==================== -->
|
|
<div class="section">
|
|
<div class="section-divider"></div>
|
|
<h2 class="section-title">Carrusel Educativo #3</h2>
|
|
<p class="section-subtitle">RESICO: Te conviene o te esta costando? — 6 slides</p>
|
|
|
|
<div class="carousel-container" id="carousel3">
|
|
<div class="carousel-viewport">
|
|
<button class="carousel-nav prev" onclick="moveCarousel('carousel3', -1)">‹</button>
|
|
<button class="carousel-nav next" onclick="moveCarousel('carousel3', 1)">›</button>
|
|
<div class="carousel-track">
|
|
<!-- Portada -->
|
|
<div class="carousel-slide slide-portada" style="background:linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%)">
|
|
<div style="font-size:3rem;margin-bottom:12px">⚖️</div>
|
|
<h2 style="font-size:1.6rem">RESICO: Estas en el regimen correcto?</h2>
|
|
<div class="slide-badge" style="background:rgba(0,0,0,0.2)">Desliza para comparar →</div>
|
|
</div>
|
|
<!-- Que es -->
|
|
<div class="carousel-slide slide-content slide-bg-dark">
|
|
<h3>Que es RESICO?</h3>
|
|
<div style="font-size:3rem;margin-bottom:16px">📋</div>
|
|
<p style="font-size:0.95rem;max-width:340px;text-align:center;color:rgba(255,255,255,0.85);line-height:1.7">
|
|
Regimen Simplificado de Confianza. Tasas del <strong style="color:#10B981;font-size:1.1rem">1% al 2.5%</strong> sobre ingresos. Suena increible, verdad?
|
|
</p>
|
|
</div>
|
|
<!-- Pero... -->
|
|
<div class="carousel-slide slide-content" style="background:linear-gradient(135deg, #991B1B 0%, #7F1D1D 100%);color:white">
|
|
<div style="font-size:3rem;margin-bottom:12px">⚠️</div>
|
|
<h3>Pero hay un detalle...</h3>
|
|
<p style="font-size:0.95rem;max-width:340px;text-align:center;color:rgba(255,255,255,0.85);line-height:1.7;margin-top:12px">
|
|
En RESICO <strong>no puedes deducir gastos</strong>. Si tienes muchos gastos operativos, podrias terminar pagando <strong>MAS</strong> que en Regimen General.
|
|
</p>
|
|
</div>
|
|
<!-- Comparativa -->
|
|
<div class="carousel-slide slide-resico-compare slide-bg-dark">
|
|
<h3 style="font-family:Montserrat;font-size:1.1rem;font-weight:700">Ejemplo real: Ingresos $200K/mes</h3>
|
|
<div class="resico-table">
|
|
<div class="resico-row">
|
|
<div class="resico-cell resico-header" style="background:transparent"></div>
|
|
<div class="resico-cell resico-header resico" style="background:rgba(37,99,235,0.25)">RESICO</div>
|
|
<div class="resico-cell resico-header general" style="background:rgba(16,185,129,0.25)">General</div>
|
|
</div>
|
|
<div class="resico-row">
|
|
<div class="resico-cell label">Ingresos</div>
|
|
<div class="resico-cell resico">$200,000</div>
|
|
<div class="resico-cell general">$200,000</div>
|
|
</div>
|
|
<div class="resico-row">
|
|
<div class="resico-cell label">Gastos</div>
|
|
<div class="resico-cell resico">No aplica</div>
|
|
<div class="resico-cell general">$80,000</div>
|
|
</div>
|
|
<div class="resico-row">
|
|
<div class="resico-cell label">Base gravable</div>
|
|
<div class="resico-cell resico">$200,000</div>
|
|
<div class="resico-cell general">$120,000</div>
|
|
</div>
|
|
<div class="resico-row">
|
|
<div class="resico-cell label" style="font-weight:700;color:white">ISR aprox.</div>
|
|
<div class="resico-cell resico highlight" style="color:#FCA5A5">$5,000</div>
|
|
<div class="resico-cell general highlight" style="color:#86EFAC">$3,600</div>
|
|
</div>
|
|
</div>
|
|
<p style="font-size:0.75rem;color:rgba(255,255,255,0.5);margin-top:16px;max-width:320px;text-align:center">* Ejemplo simplificado. El ISR real depende de multiples factores.</p>
|
|
</div>
|
|
<!-- Mensaje -->
|
|
<div class="carousel-slide slide-content slide-bg-gradient">
|
|
<div style="font-size:3rem;margin-bottom:16px">🎯</div>
|
|
<h3>La respuesta depende de TU negocio</h3>
|
|
<p style="font-size:0.95rem;max-width:340px;text-align:center;color:rgba(255,255,255,0.85);line-height:1.7;margin-top:12px">
|
|
No hay formula universal. Lo que le funciona a otro empresario puede costarte a ti. Necesitas un analisis personalizado.
|
|
</p>
|
|
</div>
|
|
<!-- CTA -->
|
|
<div class="carousel-slide slide-cta" style="background:linear-gradient(135deg, #10B981 0%, #059669 100%)">
|
|
<h3 style="color:white">Descubre cual regimen te conviene mas</h3>
|
|
<div class="cta-button" style="color:#059669">Diagnostico Gratuito</div>
|
|
<div class="url" style="color:rgba(255,255,255,0.5)">horux360.com/diagnostico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-dots" id="carousel3-dots">
|
|
<div class="carousel-dot active" onclick="goToSlide('carousel3', 0)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel3', 1)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel3', 2)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel3', 3)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel3', 4)"></div>
|
|
<div class="carousel-dot" onclick="goToSlide('carousel3', 5)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== -->
|
|
<!-- SECCION 5: STORIES / REELS -->
|
|
<!-- ==================== -->
|
|
<div class="section">
|
|
<div class="section-divider"></div>
|
|
<h2 class="section-title">Stories y Reels</h2>
|
|
<p class="section-subtitle">Instagram Stories / Reels / TikTok — formato 9:16 vertical</p>
|
|
|
|
<div class="stories-grid">
|
|
<!-- Story 1: Dato duro vertical -->
|
|
<div>
|
|
<div class="post-label center">Story — Dato Duro</div>
|
|
<div class="story-frame story-1">
|
|
<div class="story-eyebrow">Sabias que...</div>
|
|
<div class="story-number">73%</div>
|
|
<div class="story-text">de los dueños de PyMEs pagan mas impuestos de lo necesario</div>
|
|
<div class="swipe-up">
|
|
<div class="arrow">^</div>
|
|
Diagnostico GRATIS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Story 2: 3 cosas -->
|
|
<div>
|
|
<div class="post-label center">Reel — 3 Cosas</div>
|
|
<div class="story-frame story-2">
|
|
<div class="story-header">3 cosas que tu contador <span>NO</span> te va a decir</div>
|
|
<div class="point-item">
|
|
<div class="point-num">1</div>
|
|
<div class="point-text">Que podrias estar en un regimen fiscal que no te conviene</div>
|
|
</div>
|
|
<div class="point-item">
|
|
<div class="point-num">2</div>
|
|
<div class="point-text">Que hay deducciones que no estas aprovechando porque nadie las rastrea</div>
|
|
</div>
|
|
<div class="point-item">
|
|
<div class="point-num">3</div>
|
|
<div class="point-text">Que sin visibilidad en tiempo real, dejas dinero en la mesa cada mes</div>
|
|
</div>
|
|
<div class="story-footer">
|
|
<div class="cta-pill">Diagnostico Gratis →</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Story 3: Mito -->
|
|
<div>
|
|
<div class="post-label center">Reel — Mito vs Realidad</div>
|
|
<div class="story-frame story-3">
|
|
<div class="reel-badge">REEL 30s</div>
|
|
<div class="myth-label">Mito Fiscal</div>
|
|
<div class="myth-text">"$480/mes no me va a ahorrar nada"</div>
|
|
<div class="truth-text">
|
|
<div class="truth-label">REALIDAD:</div>
|
|
Primer mes: $12,300 en deducciones recuperadas. ROI del diagnostico: infinito (porque es gratis).
|
|
</div>
|
|
<div style="position:absolute;bottom:40px;font-family:Montserrat;font-weight:800;font-size:0.9rem;letter-spacing:1px;opacity:0.5">HORUX 360</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== -->
|
|
<!-- SECCION 6: LINKEDIN -->
|
|
<!-- ==================== -->
|
|
<div class="section">
|
|
<div class="section-divider"></div>
|
|
<h2 class="section-title">Posts para LinkedIn</h2>
|
|
<p class="section-subtitle">Formato profesional para empresarios — feed desktop</p>
|
|
|
|
<div class="grid-2">
|
|
<!-- LinkedIn Post 1 -->
|
|
<div>
|
|
<div class="post-label">LinkedIn Post 1 — Costo Invisible</div>
|
|
<div class="linkedin-post">
|
|
<div class="linkedin-header">
|
|
<div class="linkedin-avatar">H</div>
|
|
<div>
|
|
<div class="linkedin-name">Horux 360</div>
|
|
<div class="linkedin-role">Control Fiscal en Tiempo Real para PyMEs</div>
|
|
</div>
|
|
</div>
|
|
<div class="linkedin-body">La mayoria de los dueños de empresa con los que hablo tienen algo en comun:
|
|
|
|
Facturan bien. Venden bien. Crecen.
|
|
|
|
Pero cuando les pregunto "cuanto podrias ahorrar con una estrategia fiscal diferente?", la respuesta es casi siempre: "No se."
|
|
|
|
Y ese "no se" tiene un costo. Uno que se acumula mes tras mes.
|
|
|
|
No hablo de evadir. Hablo de tener visibilidad: facturas conciliadas, alertas del SAT, saber si tu regimen es el optimo.
|
|
|
|
El dueño de PyME promedio con ingresos arriba de $100K mensuales esta dejando entre $5,000 y $15,000 pesos al mes en la mesa.
|
|
|
|
Eso resuelve Horux 360. Desde $480/mes.
|
|
|
|
Diagnostico gratuito → horux360.com/diagnostico</div>
|
|
<div class="linkedin-image">
|
|
<div class="li-chart-bg">
|
|
<div class="chart-title">Lo que pagas vs. lo que podrias pagar</div>
|
|
<div class="li-chart">
|
|
<div class="li-bar-group">
|
|
<div class="li-bar" style="height:120px;background:#EF4444;color:white">$38K</div>
|
|
<div class="li-bar-label">Sin estrategia fiscal</div>
|
|
</div>
|
|
<div class="li-bar-group">
|
|
<div class="li-bar" style="height:65px;background:#10B981;color:white">$21K</div>
|
|
<div class="li-bar-label">Con Horux 360</div>
|
|
</div>
|
|
</div>
|
|
<div class="li-chart-footer">
|
|
<div class="logo-text">HORUX 360</div>
|
|
<div class="tagline">| horux360.com/diagnostico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="linkedin-engagement">
|
|
<span>👍 127 · 8 comentarios</span>
|
|
<span>23 veces compartido</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LinkedIn Post 2 -->
|
|
<div>
|
|
<div class="post-label">LinkedIn Post 2 — Error de PyMEs</div>
|
|
<div class="linkedin-post">
|
|
<div class="linkedin-header">
|
|
<div class="linkedin-avatar">H</div>
|
|
<div>
|
|
<div class="linkedin-name">Horux 360</div>
|
|
<div class="linkedin-role">Control Fiscal en Tiempo Real para PyMEs</div>
|
|
</div>
|
|
</div>
|
|
<div class="linkedin-body">Hay un momento en el crecimiento de toda PyME donde lo que funcionaba deja de ser optimo.
|
|
|
|
El regimen fiscal que elegiste cuando facturabas $50K al mes probablemente no es el mejor ahora que facturas $200K.
|
|
|
|
Pero nadie te avisa. No hay una alerta del SAT que diga: "Oye, ya estas pagando de mas."
|
|
|
|
He visto casos donde un simple cambio de regimen represento ahorros de mas de $100,000 al anio. Completamente legal.
|
|
|
|
Si tu empresa factura mas de $100K/mes y nunca has hecho un analisis de optimizacion fiscal, este es el momento.
|
|
|
|
Diagnostico gratuito → horux360.com/diagnostico</div>
|
|
<div class="linkedin-image">
|
|
<div class="li-chart-bg">
|
|
<div class="chart-title">Ahorro anual por optimizacion de regimen</div>
|
|
<div style="display:flex;align-items:center;gap:20px;margin-top:16px">
|
|
<div style="text-align:center">
|
|
<div style="font-family:Montserrat;font-size:2.5rem;font-weight:900;color:#2563EB">$100K+</div>
|
|
<div style="font-size:0.8rem;color:#666;margin-top:4px">ahorro anual promedio</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:24px;margin-top:24px">
|
|
<div style="text-align:center;padding:12px 20px;background:#EFF6FF;border-radius:12px">
|
|
<div style="font-family:Montserrat;font-weight:800;color:#2563EB;font-size:1.1rem">$480</div>
|
|
<div style="font-size:0.7rem;color:#666">/mes autoservicio</div>
|
|
</div>
|
|
<div style="text-align:center;padding:12px 20px;background:#ECFDF5;border-radius:12px">
|
|
<div style="font-family:Montserrat;font-weight:800;color:#10B981;font-size:1.1rem">$1,500</div>
|
|
<div style="font-size:0.7rem;color:#666">/mes con asesoria</div>
|
|
</div>
|
|
</div>
|
|
<div class="li-chart-footer">
|
|
<div class="logo-text">HORUX 360</div>
|
|
<div class="tagline">| horux360.com/diagnostico</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="linkedin-engagement">
|
|
<span>👍 89 · 12 comentarios</span>
|
|
<span>31 veces compartido</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== -->
|
|
<!-- SECCION 7: GUIA DE ESTILO RAPIDA -->
|
|
<!-- ==================== -->
|
|
<div class="section" style="padding-bottom:100px">
|
|
<div class="section-divider"></div>
|
|
<h2 class="section-title">Guia de Estilo Rapida</h2>
|
|
<p class="section-subtitle">Paleta, tipografias y reglas visuales</p>
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:40px">
|
|
<div style="background:#2563EB;padding:24px;border-radius:12px;text-align:center">
|
|
<div style="font-family:Montserrat;font-weight:800;font-size:1.1rem">Azul Horux</div>
|
|
<div style="font-size:0.85rem;opacity:0.8;margin-top:4px">#2563EB</div>
|
|
<div style="font-size:0.75rem;opacity:0.6;margin-top:2px">CTAs, acentos, elementos principales</div>
|
|
</div>
|
|
<div style="background:#1E3A5F;padding:24px;border-radius:12px;text-align:center">
|
|
<div style="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.75rem;opacity:0.6;margin-top:2px">Fondos, textos sobre claro</div>
|
|
</div>
|
|
<div style="background:#10B981;padding:24px;border-radius:12px;text-align:center;color:#000">
|
|
<div style="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.75rem;opacity:0.6;margin-top:2px">Ahorro, positivo, resultados</div>
|
|
</div>
|
|
<div style="background:#F59E0B;padding:24px;border-radius:12px;text-align:center;color:#000">
|
|
<div style="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.75rem;opacity:0.6;margin-top:2px">Urgencia, destacados, warnings</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:30px">
|
|
<div style="background:#1E293B;padding:30px;border-radius:16px">
|
|
<div style="font-family:Montserrat;font-weight:800;font-size:1.5rem;margin-bottom:16px;color:#2563EB">Montserrat</div>
|
|
<div style="font-family:Montserrat;font-weight:900;font-size:2rem;margin-bottom:8px">Titulares Bold</div>
|
|
<div style="font-family:Montserrat;font-weight:700;font-size:1.2rem;margin-bottom:8px">Subtitulares Semibold</div>
|
|
<div style="font-family:Montserrat;font-weight:600;font-size:1rem;margin-bottom:8px">Precio y CTAs Medium</div>
|
|
<div style="font-size:0.8rem;color:var(--gris);margin-top:12px">Uso: titulos, numeros, precios, CTAs, badges</div>
|
|
</div>
|
|
<div style="background:#1E293B;padding:30px;border-radius:16px">
|
|
<div style="font-family:Inter;font-weight:700;font-size:1.5rem;margin-bottom:16px;color:#10B981">Inter</div>
|
|
<div style="font-family:Inter;font-weight:400;font-size:1rem;line-height:1.8;margin-bottom:8px">Texto de cuerpo para captions, descripciones y contenido largo. Inter es altamente legible en pantallas pequeñas.</div>
|
|
<div style="font-family:Inter;font-weight:600;font-size:0.9rem;color:rgba(255,255,255,0.7)">Texto secundario en peso medium</div>
|
|
<div style="font-size:0.8rem;color:var(--gris);margin-top:12px">Uso: captions, body text, listas, descripciones</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:#1E293B;padding:30px;border-radius:16px;margin-top:30px">
|
|
<h4 style="font-family:Montserrat;font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--naranja)">Reglas Visuales</h4>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:0.85rem;color:rgba(255,255,255,0.8)">
|
|
<div>
|
|
<strong style="color:white">Gradientes:</strong> Siempre de #2563EB a #1E3A5F en 135 grados. Nunca plano.
|
|
</div>
|
|
<div>
|
|
<strong style="color:white">Bordes:</strong> border-radius minimo 12px en cards, 30px en botones/pills.
|
|
</div>
|
|
<div>
|
|
<strong style="color:white">Contraste:</strong> Texto siempre blanco sobre azul/oscuro. Negro sobre blanco/claro.
|
|
</div>
|
|
<div>
|
|
<strong style="color:white">Espaciado:</strong> Generoso. Minimo 40px de padding en cuadrados. Aire = profesionalismo.
|
|
</div>
|
|
<div>
|
|
<strong style="color:white">Iconos:</strong> Emoji como iconografia. Simples, universales, sin necesidad de assets.
|
|
</div>
|
|
<div>
|
|
<strong style="color:white">CTA:</strong> Siempre boton pill con fondo azul/blanco. Texto en Montserrat bold.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Carousel functionality
|
|
const carousels = {};
|
|
|
|
function initCarousel(id) {
|
|
const container = document.getElementById(id);
|
|
const track = container.querySelector('.carousel-track');
|
|
const slides = track.querySelectorAll('.carousel-slide');
|
|
carousels[id] = { current: 0, total: slides.length, track };
|
|
}
|
|
|
|
function updateCarousel(id) {
|
|
const c = carousels[id];
|
|
c.track.style.transform = `translateX(-${c.current * 100}%)`;
|
|
const dots = document.getElementById(id + '-dots').querySelectorAll('.carousel-dot');
|
|
dots.forEach((d, i) => d.classList.toggle('active', i === c.current));
|
|
}
|
|
|
|
function moveCarousel(id, dir) {
|
|
const c = carousels[id];
|
|
c.current = (c.current + dir + c.total) % c.total;
|
|
updateCarousel(id);
|
|
}
|
|
|
|
function goToSlide(id, index) {
|
|
carousels[id].current = index;
|
|
updateCarousel(id);
|
|
}
|
|
|
|
// Touch support
|
|
function addSwipe(id) {
|
|
const el = document.getElementById(id).querySelector('.carousel-viewport');
|
|
let startX;
|
|
el.addEventListener('touchstart', e => startX = e.touches[0].clientX);
|
|
el.addEventListener('touchend', e => {
|
|
const diff = startX - e.changedTouches[0].clientX;
|
|
if (Math.abs(diff) > 50) moveCarousel(id, diff > 0 ? 1 : -1);
|
|
});
|
|
}
|
|
|
|
// Init all
|
|
['carousel1', 'carousel2', 'carousel3'].forEach(id => {
|
|
initCarousel(id);
|
|
addSwipe(id);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|