Files
web_vetta/vettaflex.html
2026-08-20 23:57:02 -03:00

685 lines
35 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="VettaFlex - Automatización inteligente de procesos. RPA, integraciones API, pipelines de datos, CI/CD y automatización IoT para tu negocio.">
<meta name="keywords" content="automatización, IoT, RPA, integraciones API, pipelines de datos, CI/CD, VettaFlex, VettaIO">
<title>VettaFlex - Automatización Inteligente e IoT | VettaIO</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
/* Estilos adicionales para la nueva sección de soluciones y diferencial competitivo */
.solutions-section {
padding: 80px 0;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
position: relative;
z-index: 2;
}
.solutions-header {
text-align: center;
margin-bottom: 48px;
}
.solutions-header .section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.solutions-header .section-subtitle {
font-size: 1.2rem;
opacity: 0.8;
max-width: 700px;
margin: 0 auto;
}
.solutions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 32px;
margin-bottom: 60px;
}
.solution-card {
background: rgba(10, 20, 20, 0.65);
backdrop-filter: blur(4px);
border-radius: 28px;
border: 1px solid rgba(16, 185, 129, 0.25);
padding: 28px 24px;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.solution-card:hover {
border-color: rgba(16, 185, 129, 0.6);
transform: translateY(-6px);
background: rgba(16, 185, 129, 0.05);
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.4);
}
.solution-title {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 8px;
background: linear-gradient(135deg, #fff, #10b981);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.01em;
}
.solution-sub {
font-size: 1rem;
font-weight: 500;
color: #10b981;
margin-bottom: 20px;
border-left: 3px solid #10b981;
padding-left: 12px;
}
.solution-desc {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 20px;
opacity: 0.9;
}
.solution-details {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 8px;
}
.detail-block h4 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
color: #10b981;
}
.detail-block h4 svg {
width: 18px;
height: 18px;
stroke: #10b981;
}
.detail-list {
list-style: none;
padding: 0;
margin: 0;
}
.detail-list li {
font-size: 0.85rem;
padding: 4px 0 4px 20px;
position: relative;
line-height: 1.4;
}
.detail-list li::before {
content: "▹";
position: absolute;
left: 0;
color: #10b981;
font-size: 0.8rem;
}
.ideal-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.ideal-tag {
background: rgba(16, 185, 129, 0.15);
border-radius: 40px;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 500;
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.diferencial-section {
margin-top: 40px;
background: linear-gradient(115deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 44, 34, 0.5) 100%);
border-radius: 48px;
padding: 48px 40px;
border: 1px solid rgba(16, 185, 129, 0.3);
backdrop-filter: blur(4px);
}
.diferencial-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 32px;
}
.diferencial-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
}
.diferencial-item {
flex: 1;
min-width: 180px;
text-align: center;
padding: 20px;
background: rgba(0,0,0,0.3);
border-radius: 28px;
transition: all 0.2s;
}
.diferencial-item:hover {
background: rgba(16, 185, 129, 0.1);
transform: scale(1.02);
}
.diferencial-icon {
font-size: 2.5rem;
margin-bottom: 16px;
}
.diferencial-item h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 8px;
color: #10b981;
}
.diferencial-item p {
font-size: 0.9rem;
opacity: 0.9;
}
@media (max-width: 768px) {
.solutions-grid { grid-template-columns: 1fr; }
.diferencial-section { padding: 32px 20px; }
.solutions-header .section-title { font-size: 2rem; }
}
/* Ajuste para mantener consistencia con gradientes existentes */
.text-gradient-flex {
background: linear-gradient(135deg, #10b981, #34d399);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.solution-card .btn-dummy {
display: inline-block;
margin-top: 16px;
font-size: 0.8rem;
color: #10b981;
font-weight: 500;
}
</style>
</head>
<body>
<!-- Particle Network Canvas — VettaFlex (verde) -->
<canvas id="particleCanvas"
data-particle-color="rgba(16, 185, 129, 0.6)"
data-line-color="rgba(16, 185, 129, 0.15)"></canvas>
<!-- ============================================================
Navigation
============================================================ -->
<nav class="navbar">
<div class="nav-container">
<a href="index.html" class="logo">
<img src="img/logovertical.png" alt="VettaIO">
</a>
<div class="nav-links" id="navLinks">
<a href="index.html" class="nav-link">Inicio</a>
<!-- Divisiones dropdown -->
<div class="nav-item">
<div class="nav-link-group">
<a href="javascript:void(0)" class="nav-link" role="button">Divisiones</a>
<button class="dropdown-toggle" aria-label="Abrir submenu" aria-expanded="false">
<svg class="dropdown-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
</div>
<div class="dropdown">
<a href="vettacore.html" class="dropdown-link">
<span class="dd-dot dd-dot--core"></span>VettaCore
</a>
<a href="vettaflex.html" class="dropdown-link">
<span class="dd-dot dd-dot--flex"></span>VettaFlex
</a>
<a href="vettamind.html" class="dropdown-link">
<span class="dd-dot dd-dot--mind"></span>VettaMind
</a>
</div>
</div>
<a href="contacto.html" class="nav-link">Contacto</a>
</div>
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Abrir menú">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- ============================================================
Hero — VettaFlex
============================================================ -->
<section class="subpage-hero">
<div class="container">
<a href="index.html" class="back-link back-link--flex">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
Volver al inicio
</a>
<div class="subpage-icon">
<img src="img/icon_flex.png" alt="VettaFlex">
</div>
<p class="subpage-lead">
Automatización inteligente que potencia tu productividad conectando procesos digitales y dispositivos IoT
</p>
<p class="subpage-body">
VettaFlex transforma procesos manuales en flujos automatizados eficientes. Desde integraciones entre sistemas hasta la orquestación de dispositivos IoT, liberamos a tu equipo de tareas repetitivas para que se enfoquen en lo que realmente importa. <strong>Automatizamos tanto tu software como tu hardware.</strong>
</p>
</div>
</section>
<!-- ============================================================
Features — VettaFlex (8 tarjetas)
============================================================ -->
<section class="features-section">
<div class="container">
<h2 class="features-section-title">
Nuestros <span class="text-gradient-flex">Servicios</span>
</h2>
<p class="features-section-subtitle">Automatización end-to-end para tu negocio digital e industrial</p>
<div class="feature-grid">
<div class="feature-item feature-item--flex">
<h3>Automatización de Procesos</h3>
<p>Automatizamos procesos de negocio complejos. Automatización y orquestación de tareas digitales e industriales.</p>
</div>
<div class="feature-item feature-item--flex">
<h3>API Integration</h3>
<p>Conectamos tus sistemas y aplicaciones. Integraciones con base da datos y plataformas IoT.</p>
</div>
<div class="feature-item feature-item--flex">
<h3>Data Pipelines</h3>
<p>ETL/ELT automatizado, procesamiento de datos en tiempo real desde sensores IoT y data warehousing inteligente.</p>
</div>
<div class="feature-item feature-item--flex">
<h3>Dispositivos IoT</h3>
<p>Orquestación de dispositivos IoT: sensores, actuadores, gateways. Gestión remota, actualizaciones OTA y monitoreo en tiempo real.</p>
</div>
<div class="feature-item feature-item--flex">
<h3>Sistemas de Notificación</h3>
<p>Sistemas de alertas y notificaciones inteligentes. Email, SMS, Slack, Teams activados por eventos de sensores.</p>
</div>
<div class="feature-item feature-item--flex">
<h3>Planificación de Tareas</h3>
<p>Tareas programadas, cron jobs avanzados y procesamiento batch automatizado para lecturas periódicas de sensores.</p>
</div>
<div class="feature-item feature-item--flex">
<h3>Agentes a Medida</h3>
<p>Agentes con capacidades específicas para tareas particulares en entornos empresariales. Conocomienta de tus procesos y necesidades.</p>
</div>
<div class="feature-item feature-item--flex">
<h3>MQTT & Edge Computing</h3>
<p>Procesamiento de datos en el borde, brokers MQTT, integración con protocolos industriales (Modbus, OPC UA) y análisis en tiempo real.</p>
</div>
</div>
</div>
</section>
<!-- ============================================================
Casos de Uso: IoT + Automation
============================================================ -->
<section class="iot-automation-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">Casos de Uso: <span class="text-gradient-flex">IoT + IA</span></h2>
<p class="section-subtitle">Cómo conectamos el mundo físico con tu estrategia digital</p>
</div>
<div class="use-cases-grid">
<!--Agricultura Inteligente -->
<div class="use-case-card">
<div class="use-case-icon">
<img src="img/marcas/agricultura_inteligente.png" alt="Agricultura Inteligente" width="37" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
</div>
<h3>Agricultura Inteligente</h3>
<div class="solution-sub">Sistema de Riego Inteligente con IA</div>
<p>Solución integral para automatizar y optimizar el riego mediante sensores, datos clímaticos y modelos inteligentes.</p>
<div class="solution-details">
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
Qué incluye
</h4>
<ul class="detail-list">
<li>Sensores IoT (humedad, pH, temperatura del suelo)</li>
<li>Control automático de bombas y válvulas</li>
<li>Integración con datos meteorológicos</li>
<li>Plataforma web con dashboards en tiempo real</li>
<li>Algoritmos de IA para planificación de riego</li>
</ul>
</div>
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Beneficios
</h4>
<ul class="detail-list">
<li>Ahorro de agua</li>
<li>Optimización del uso de energía</li>
<li>Mejora del rendimiento productivo</li>
<li>Decisiones basadas en datos</li>
</ul>
</div>
<div class="detail-block"></div>
</div>
<div class="tech-tags"><span>Campos Agrícolas</span><span>Invernaderos</span><span>Cultivos intensivos</span></div>
</div>
<!--Control de Temperatura -->
<div class="use-case-card">
<div class="use-case-icon">
<img src="img/marcas/control_temperatura.png" alt="Control de Temperatura" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
</div>
<h3>Control de Cadena de Frío</h3>
<div class="solution-sub">Monitoreo de Cámaras Frigoríficas</div>
<p>Sistemas de monitoreo continuo para garantizar la calidad de productos refrigerados.</p>
<div class="solution-details">
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
Qué incluye
</h4>
<ul class="detail-list">
<li>Sensores IoT de temperatura y humedad</li>
<li>Alertas en tiempo real(app, email, sms)</li>
<li>Registro historico de condiciones</li>
<li>Reportes automáticos</li>
<li>IA para detección de anomalias</li>
</ul>
</div>
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Beneficios
</h4>
<ul class="detail-list">
<li>Prevención de pérdidas</li>
<li>Cumplimiento sanitario</li>
<li>Control total 24/7</li>
<li>Trazabilidad completa</li>
</ul>
</div>
<div class="detail-block"></div>
</div>
<div class="tech-tags"><span>Carnicerias</span><span>Frigoríficos</span><span>Distribución de alimentos</span></div>
</div>
<!-- Alertas Meteorológicas-->
<div class="use-case-card">
<div class="use-case-icon">
<img src="img/marcas/tormentas.png" alt="Alertas Meteorológicas" width="40" height="37" fill="none" stroke="currentColor" stroke-width="1.5">
</div>
<h3>Alertas Meteorológicas</h3>
<div class="solution-sub">Monitoreo de Condiciones Climáticas</div>
<p>Sistemas de alerta temprana para condiciones climáticas extremas para evitar exposicion de personas.</p>
<div class="solution-details">
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
Qué incluye
</h4>
<ul class="detail-list">
<li>Semáforos de Alerta Visual (amarillo/naranja/rojo)</li>
<li>Telemtría</li>
<li>Panel centralizado de control</li>
<li>Integración de datos metereológicos en tiempo real</li>
<li>IA para predicción de eventos climáticos</li>
</ul>
</div>
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Beneficios
</h4>
<ul class="detail-list">
<li>Reducción de riesgos</li>
<li>Protección de vidas</li>
<li>Respuesta inmediata ante eventos climáticos</li>
<li>Historial de alertas y análisis</li>
</ul>
</div>
<div class="detail-block"></div>
</div>
<div class="tech-tags"><span>Mineras</span><span>Obras en Altura</span><span>Campamentos remotos</span></div>
</div>
<!--Seguridad Patrimonial -->
<div class="use-case-card">
<div class="use-case-icon">
<img src="img/marcas/seguridad_patrimonial.png" alt="Seguridad Patrimonial" width="35" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
</div>
<h3>Seguridad Patrimonial</h3>
<div class="solution-sub">Sistema de Rondines Digitales con Evidencia</div>
<p>Plataforma para control y auditoría de rondas de seguridad en instalaciones.</p>
<div class="solution-details">
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
Qué incluye
</h4>
<ul class="detail-list">
<li>Tags NFC / QR en puntos de control</li>
<li>App móvil para guardias</li>
<li>Registro de recorridos en tiempo real</li>
<li>Carga de fotos, observaciones y eventos</li>
<li>Generación automática de reportes</li>
</ul>
</div>
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Beneficios
</h4>
<ul class="detail-list">
<li>Control total de rondas de vigilancia</li>
<li>Evidencia verificable</li>
<li>Mejoras en la gestión de la seguridad</li>
<li>Reducción de errores humanos</li>
</ul>
</div>
<div class="detail-block"></div>
</div>
<div class="tech-tags"><span>Fábricas</span><span>Depósitos</span><span>Parques Industriales</span></div>
</div>
<!--Gestión de Energía-->
<div class="use-case-card">
<div class="use-case-icon">
<img src="img/marcas/energia.png" alt="Control de Temperatura" width="40" height="37" fill="none" stroke="currentColor" stroke-width="1.5">
</div>
<h3>Gestión de Energía</h3>
<div class="solution-sub">Sistema de Control y Continuidad Energética</div>
<p>Solución para garantizar el suministro eléctrico continuo en nodos críticos.</p>
<div class="solution-details">
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
Qué incluye
</h4>
<ul class="detail-list">
<li>Controlador IoT de energía</li>
<li>Monitoreo de múltiples fuentes de energía</li>
<li>Lógicas automáticas de conmutación</li>
<li>Dashboard en tiempo real</li>
<li>Alertas y registros de eventos</li>
<li>IA para optimización del consumo energético</li>
</ul>
</div>
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Beneficios
</h4>
<ul class="detail-list">
<li>Alta disponibilidad</li>
<li>Reducción de fallas críticas</li>
<li>Optimización energética</li>
<li>Control centralizado</li>
</ul>
</div>
<div class="detail-block"></div>
</div>
<div class="tech-tags"><span>DataCenters</span><span>Instalaciones Industriales</span><span>Infraestructura Crítica</span></div>
</div>
<!--Manteniiento Predictivo-->
<div class="use-case-card">
<div class="use-case-icon">
<img src="img/marcas/mantenimiento.png" alt="Mantenimiento Predictivo" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
</div>
<h3>Mantenimiento Predictivo</h3>
<div class="solution-sub">Sistema de Monitoreo y Mantenimiento Inteligente</div>
<p>Sistema inteligente para anticipar fallas en equipos industriales mediante monitoreo continuo.</p>
<div class="solution-details">
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
Qué incluye
</h4>
<ul class="detail-list">
<li>Sensores IoT para monitoreo de estado</li>
<li>Análisis de datos en tiempo real</li>
<li>Modelos predictivos de fallas</li>
<li>Planificación automática de mantenimiento</li>
<li>Dashboard de seguimiento y reportes</li>
<li>Integración con sistemas de gestión de activos</li>
</ul>
</div>
<div class="detail-block">
<h4>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
Beneficios
</h4>
<ul class="detail-list">
<li>Reducción de tiempos de inactividad</li>
<li>Disminución de fallas críticas</li>
<li>Reducción de costos de mantenimiento</li>
<li>Optimización de paradas técnicas</li>
</ul>
</div>
<div class="detail-block"></div>
</div>
<div class="tech-tags"><span>Vehiculos Pesados</span><span>Talleres Mecánicos</span><span>Motores Industriales</span></div>
</div>
</div>
</div>
</section>
<!-- ============================================================
Arquitectura IoT Section
============================================================ -->
<section class="iot-architecture">
<div class="container">
<div class="architecture-content">
<div class="architecture-text">
<div class="custom-dev-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
<line x1="8" y1="2" x2="8" y2="22"></line>
<line x1="16" y1="2" x2="16" y2="22"></line>
<line x1="2" y1="8" x2="22" y2="8"></line>
</svg>
Arquitectura IoT
</div>
<h2 class="architecture-title">Tu ecosistema IoT <span class="text-gradient-flex">completamente automatizado</span></h2>
<p class="architecture-description">Diseñamos e implementamos la capa de conectividad entre tus dispositivos físicos y tus sistemas digitales, creando un flujo de datos automatizado y accionable.</p>
<div class="architecture-stack">
<div class="stack-item"><strong>01. Edge Layer</strong><p>Sensores, actuadores, gateways y dispositivos IoT con procesamiento local.</p></div>
<div class="stack-item"><strong>02. Connectivity</strong><p>Protocolos MQTT, HTTP, WebSockets, LoRaWAN, Sigfox, 5G, LTE-M.</p></div>
<div class="stack-item"><strong>03. Orchestration</strong><p>Automatización de reglas, workflows, eventos y alertas en tiempo real.</p></div>
<div class="stack-item"><strong>04. Integration</strong><p>Conexión con tu ERP, CRM, dashboards y sistemas legacy mediante APIs.</p></div>
</div>
<a href="contacto.html" class="btn btn-primary">Implementar IoT en mi empresa <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg></a>
</div>
<div class="architecture-visual">
<div class="iot-visual"><div class="iot-node node-1"></div><div class="iot-node node-2"></div><div class="iot-node node-3"></div><div class="iot-node node-4"></div><div class="iot-connections"></div></div>
</div>
</div>
</div>
</section>
<!-- ============================================================
Beneficios Section
============================================================ -->
<section class="benefits-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">¿Por qué <span class="text-gradient-flex">VettaFlex + IoT?</span></h2>
<p class="section-subtitle">Automatización que transforma datos en acciones</p>
</div>
<div class="benefits-grid">
<div class="benefit-item"><div class="benefit-number">01</div><h3>Reducción de costos operativos</h3><p>Automatiza tareas manuales y optimiza recursos con monitoreo inteligente.</p></div>
<div class="benefit-item"><div class="benefit-number">02</div><h3>Toma de decisiones en tiempo real</h3><p>Dashboards y alertas basadas en datos actualizados de tus sensores y sistemas.</p></div>
<div class="benefit-item"><div class="benefit-number">03</div><h3>Escalabilidad garantizada</h3><p>Arquitecturas que crecen contigo, desde decenas hasta miles de dispositivos.</p></div>
<div class="benefit-item"><div class="benefit-number">04</div><h3>Integración con tus sistemas actuales</h3><p>Conectamos IoT con tu ERP, CRM o cualquier software legacy mediante APIs.</p></div>
</div>
</div>
</section>
<!-- ============================================================
CTA — VettaFlex
============================================================ -->
<section class="cta-section">
<div class="container">
<div class="cta-box cta-box--flex">
<h2>¿Listo para <span class="text-gradient-flex">automatizar</span> tu negocio y conectar el mundo físico?</h2>
<p>Conversemos sobre cómo podemos optimizar tus procesos digitales e industriales</p>
<a href="contacto.html" class="btn btn-primary">
Contactar ahora
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
</div>
</section>
<!-- ============================================================
Footer
============================================================ -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<div class="footer-logo"><div class="footer-logo-icon"><img src="img/logovertical.png" alt="VettaIO"></div></div>
<p class="footer-description">Transformando ideas en soluciones tecnológicas de impacto.</p>
</div>
<div class="footer-column"><h4>Divisiones</h4><ul class="footer-links"><li><a href="vettacore.html">VettaCore</a></li><li><a href="vettaflex.html">VettaFlex</a></li><li><a href="vettamind.html">VettaMind</a></li></ul></div>
<div class="footer-column"><h4>Servicios</h4><ul class="footer-links"><li><a href="index.html#custom-dev">Desarrollo a Medida</a></li><li><a href="index.html#iot-solutions">Soluciones IoT</a></li><li><a href="index.html#divisions">Consultoría</a></li><li><a href="contacto.html">Soporte</a></li></ul></div>
<div class="footer-column"><h4>Contacto</h4><ul class="footer-contact"><li><a href="mailto:info@vettaio.com">info@vettaio.com</a></li><li>+54 388 584-2292</li><li>Jujuy, Argentina</li></ul></div>
</div>
<div class="footer-bottom"><p>&copy; <span id="year"></span> VettaIO. Todos los derechos reservados.</p></div>
</div>
</footer>
<script src="scripts.js"></script>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>