commit d4368d337895a62a64458f48b693c85a314e7daf Author: Francisco Anfuso Date: Thu Aug 20 23:57:02 2026 -0300 primer desarrollo diff --git a/Catalogo/Catalogo VettaIO.pdf b/Catalogo/Catalogo VettaIO.pdf new file mode 100644 index 0000000..22f1e08 Binary files /dev/null and b/Catalogo/Catalogo VettaIO.pdf differ diff --git a/Catalogo/Gemini_Generated_Image_mqbletmqbletmqbl.png b/Catalogo/Gemini_Generated_Image_mqbletmqbletmqbl.png new file mode 100644 index 0000000..4198d74 Binary files /dev/null and b/Catalogo/Gemini_Generated_Image_mqbletmqbletmqbl.png differ diff --git a/Catalogo/core.png b/Catalogo/core.png new file mode 100644 index 0000000..83d0866 Binary files /dev/null and b/Catalogo/core.png differ diff --git a/Catalogo/flex.png b/Catalogo/flex.png new file mode 100644 index 0000000..412b2ad Binary files /dev/null and b/Catalogo/flex.png differ diff --git a/Catalogo/iot_alertas.png b/Catalogo/iot_alertas.png new file mode 100644 index 0000000..e6327e2 Binary files /dev/null and b/Catalogo/iot_alertas.png differ diff --git a/Catalogo/iot_edge.png b/Catalogo/iot_edge.png new file mode 100644 index 0000000..4780869 Binary files /dev/null and b/Catalogo/iot_edge.png differ diff --git a/Catalogo/iot_mediciones.png b/Catalogo/iot_mediciones.png new file mode 100644 index 0000000..6e80860 Binary files /dev/null and b/Catalogo/iot_mediciones.png differ diff --git a/Catalogo/logo.png b/Catalogo/logo.png new file mode 100644 index 0000000..22fba0f Binary files /dev/null and b/Catalogo/logo.png differ diff --git a/Catalogo/mind.png b/Catalogo/mind.png new file mode 100644 index 0000000..fa180fe Binary files /dev/null and b/Catalogo/mind.png differ diff --git a/Catalogo/nodos1.png b/Catalogo/nodos1.png new file mode 100644 index 0000000..ff8b028 Binary files /dev/null and b/Catalogo/nodos1.png differ diff --git a/Catalogo/nodos2.png b/Catalogo/nodos2.png new file mode 100644 index 0000000..a3483b9 Binary files /dev/null and b/Catalogo/nodos2.png differ diff --git a/Catalogo/nodos3.png b/Catalogo/nodos3.png new file mode 100644 index 0000000..c5ec1b4 Binary files /dev/null and b/Catalogo/nodos3.png differ diff --git a/Desarrollo de Marca.docx b/Desarrollo de Marca.docx new file mode 100644 index 0000000..fbdf8e0 Binary files /dev/null and b/Desarrollo de Marca.docx differ diff --git a/VettaIO - Catalogo.docx b/VettaIO - Catalogo.docx new file mode 100644 index 0000000..07d1295 Binary files /dev/null and b/VettaIO - Catalogo.docx differ diff --git a/contact-form.php b/contact-form.php new file mode 100644 index 0000000..10e401f --- /dev/null +++ b/contact-form.php @@ -0,0 +1,63 @@ + 0) { ob_clean(); } + +// DESACTIVAR TODOS LOS ERRORES (en producción) +ini_set('display_errors', 0); +ini_set('display_startup_errors', 0); +error_reporting(0); + +// CABECERAS PRIMERO +header("Access-Control-Allow-Origin: *"); +header("Content-Type: application/json; charset=UTF-8"); + +// FUNCIÓN PARA ENVIAR RESPUESTAS +function sendResponse($status, $message, $code = 200) { + http_response_code($code); + echo json_encode([ + "status" => $status, + "message" => $message + ]); + exit; +} + +// VERIFICAR MÉTODO +if ($_SERVER["REQUEST_METHOD"] !== "POST") { + sendResponse("error", "Método no permitido", 405); +} + +// OBTENER DATOS +$name = isset($_POST["name"]) ? strip_tags(trim($_POST["name"])) : ''; +$email = isset($_POST["email"]) ? filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL) : ''; +$phone = isset($_POST["phone"]) ? strip_tags(trim($_POST["phone"])) : ''; +$company = isset($_POST["company"]) ? strip_tags(trim($_POST["company"])) : ''; +$service = isset($_POST["service"]) ? strip_tags(trim($_POST["service"])) : ''; +$message_text = isset($_POST["message"]) ? strip_tags(trim($_POST["message"])) : ''; + +// VALIDAR +if (empty($name) || empty($message_text) || !filter_var($email, FILTER_VALIDATE_EMAIL)) { + sendResponse("error", "Por favor completa todos los campos requeridos correctamente.", 400); +} + +// ENVIAR EMAIL (ya sabemos que esto funciona) +$to = "info@vettaio.com"; +$subject = "Nuevo mensaje de contacto de $name - VettaIO"; +$email_content = "Nuevo mensaje de contacto:\n\n"; +$email_content .= "Nombre: $name\n"; +$email_content .= "Email: $email\n"; +$email_content .= "Teléfono: $phone\n"; +$email_content .= "Empresa: $company\n"; +$email_content .= "Servicio de interés: $service\n\n"; +$email_content .= "Mensaje:\n$message_text\n"; + +$email_headers = "From: $name <$email>\r\n"; +$email_headers .= "Reply-To: $email\r\n"; + +if (mail($to, $subject, $email_content, $email_headers)) { + sendResponse("success", "¡Gracias! Tu mensaje ha sido enviado.", 200); +} else { + sendResponse("error", "Error al enviar el mensaje. Por favor, intenta nuevamente.", 500); +} + +// NO DEJAR NADA DESPUÉS DE ESTO - NI ESPACIOS, NI SALTOS DE LÍNEA +?> \ No newline at end of file diff --git a/contacto.html b/contacto.html new file mode 100644 index 0000000..ba2eca3 --- /dev/null +++ b/contacto.html @@ -0,0 +1,498 @@ + + + + + + + + Contacto | VettaIO + + + + + + + + + + + + + + + + + +
+
+
+ + + + Hablemos +
+

¿Cómo podemos ayudarte?

+

+ Estamos listos para escuchar tus desafíos tecnológicos y transformarlos en soluciones concretas. + Respondemos en menos de 24 horas. +

+
+
+ + +
+
+
+
+
+ + + + +
+

Email

+ info@vettaio.com +
+ +
+
+ + + +
+

Teléfono

+ +54 388 584-2292 +
+ +
+
+ + + + +
+

Ubicación

+

Argentina

+
+ +
+
+ + + + +
+

Horario

+

Lun–Vie, 9:00–21:00 ARG

+
+
+
+
+ + +
+
+
+ + +
+

Envíanos un mensaje

+

Completá el formulario y nos ponemos en contacto a la brevedad.

+ + + + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+ + +
+ + + + + +
+
+
+ + +
+
+ + + +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/enviar_contacto.php b/enviar_contacto.php new file mode 100644 index 0000000..ac63aea --- /dev/null +++ b/enviar_contacto.php @@ -0,0 +1,165 @@ + true, 'message' => 'Mensaje recibido (spam bloqueado)']); + exit; +} + +// Validar campos requeridos +$required_fields = ['nombre', 'email', 'division', 'mensaje']; +foreach ($required_fields as $field) { + if (empty($_POST[$field])) { + echo json_encode(['success' => false, 'message' => 'Por favor, completá todos los campos obligatorios.']); + exit; + } +} + +// Validar formato de email +if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { + echo json_encode(['success' => false, 'message' => 'El email ingresado no es válido.']); + exit; +} + +// Validar reCAPTCHA +if (empty($_POST['g-recaptcha-response'])) { + echo json_encode(['success' => false, 'message' => 'Por favor, completa el reCAPTCHA.']); + exit; +} + +// Verificar reCAPTCHA con Google +$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'; +$recaptcha_data = [ + 'secret' => $RECAPTCHA_SECRET_KEY, + 'response' => $_POST['g-recaptcha-response'], + 'remoteip' => $_SERVER['REMOTE_ADDR'] +]; + +$recaptcha_options = [ + 'http' => [ + 'method' => 'POST', + 'content' => http_build_query($recaptcha_data) + ] +]; + +$recaptcha_context = stream_context_create($recaptcha_options); +$recaptcha_result = file_get_contents($recaptcha_url, false, $recaptcha_context); +$recaptcha_json = json_decode($recaptcha_result, true); + +if (!$recaptcha_json['success']) { + echo json_encode(['success' => false, 'message' => 'Error de verificación reCAPTCHA. Por favor, intentá de nuevo.']); + exit; +} + +// ============================================ +// PREPARAR Y ENVIAR EL EMAIL +// ============================================ + +// Sanitizar datos +$nombre = htmlspecialchars(strip_tags($_POST['nombre'])); +$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL); +$empresa = isset($_POST['empresa']) ? htmlspecialchars(strip_tags($_POST['empresa'])) : 'No especificada'; +$telefono = isset($_POST['telefono']) ? htmlspecialchars(strip_tags($_POST['telefono'])) : 'No especificado'; +$division = htmlspecialchars(strip_tags($_POST['division'])); +$tipo = isset($_POST['tipo']) && !empty($_POST['tipo']) ? htmlspecialchars(strip_tags($_POST['tipo'])) : 'No especificado'; +$mensaje = htmlspecialchars(strip_tags($_POST['mensaje'])); +$referencia = isset($_POST['referencia']) && !empty($_POST['referencia']) ? htmlspecialchars(strip_tags($_POST['referencia'])) : 'No especificado'; + +// Construir el cuerpo del email +$email_subject = "Nuevo contacto desde VettaIO - $nombre"; +$email_body = " + + + Nuevo mensaje de contacto + + + +
+
+

Nuevo mensaje de contacto

+

VettaIO - Transformamos desafíos tecnológicos

+
+
+
+
👤 Nombre:
+
$nombre
+
+
+
📧 Email:
+
$email
+
+
+
🏢 Empresa:
+
$empresa
+
+
+
📞 Teléfono:
+
$telefono
+
+
+
🎯 División de interés:
+
$division
+
+
+
📋 Tipo de consulta:
+
$tipo
+
+
+
💬 Mensaje:
+
$mensaje
+
+
+
🔍 ¿Cómo nos encontraste?
+
$referencia
+
+
+
+

Este mensaje fue enviado desde el formulario de contacto de VettaIO

+

IP: {$_SERVER['REMOTE_ADDR']} | Fecha: " . date('d/m/Y H:i:s') . "

+
+
+ + +"; + +// Cabeceras del email +$headers = "MIME-Version: 1.0\r\n"; +$headers .= "Content-type: text/html; charset=UTF-8\r\n"; +$headers .= "From: $email\r\n"; +$headers .= "Reply-To: $email\r\n"; +$headers .= "X-Mailer: PHP/" . phpversion(); + +// Enviar email +$mail_sent = mail($DESTINATION_EMAIL, $email_subject, $email_body, $headers); + +if ($mail_sent) { + echo json_encode(['success' => true, 'message' => '¡Mensaje enviado con éxito! Te responderemos en menos de 24 horas.']); +} else { + echo json_encode(['success' => false, 'message' => 'Error al enviar el mensaje. Por favor, intentá de nuevo o escribinos directamente a info@vettaio.com.']); +} +?> \ No newline at end of file diff --git a/img/icon_core.png b/img/icon_core.png new file mode 100644 index 0000000..e52f42e Binary files /dev/null and b/img/icon_core.png differ diff --git a/img/icon_flex.png b/img/icon_flex.png new file mode 100644 index 0000000..d678e04 Binary files /dev/null and b/img/icon_flex.png differ diff --git a/img/icon_mind.png b/img/icon_mind.png new file mode 100644 index 0000000..d9695a3 Binary files /dev/null and b/img/icon_mind.png differ diff --git a/img/isotipo.png b/img/isotipo.png new file mode 100644 index 0000000..bdd08e0 Binary files /dev/null and b/img/isotipo.png differ diff --git a/img/logotipo.png b/img/logotipo.png new file mode 100644 index 0000000..408745c Binary files /dev/null and b/img/logotipo.png differ diff --git a/img/logovertical.png b/img/logovertical.png new file mode 100644 index 0000000..aa0012d Binary files /dev/null and b/img/logovertical.png differ diff --git a/img/marcas/agricultura_inteligente.png b/img/marcas/agricultura_inteligente.png new file mode 100644 index 0000000..52969fa Binary files /dev/null and b/img/marcas/agricultura_inteligente.png differ diff --git a/img/marcas/aws.png b/img/marcas/aws.png new file mode 100644 index 0000000..2c778ce Binary files /dev/null and b/img/marcas/aws.png differ diff --git a/img/marcas/azure.png b/img/marcas/azure.png new file mode 100644 index 0000000..be06de4 Binary files /dev/null and b/img/marcas/azure.png differ diff --git a/img/marcas/cisco.png b/img/marcas/cisco.png new file mode 100644 index 0000000..f3e6419 Binary files /dev/null and b/img/marcas/cisco.png differ diff --git a/img/marcas/control_temperatura.png b/img/marcas/control_temperatura.png new file mode 100644 index 0000000..edd9b2c Binary files /dev/null and b/img/marcas/control_temperatura.png differ diff --git a/img/marcas/dahua.png b/img/marcas/dahua.png new file mode 100644 index 0000000..3dba75e Binary files /dev/null and b/img/marcas/dahua.png differ diff --git a/img/marcas/dell.png b/img/marcas/dell.png new file mode 100644 index 0000000..2327290 Binary files /dev/null and b/img/marcas/dell.png differ diff --git a/img/marcas/energia.png b/img/marcas/energia.png new file mode 100644 index 0000000..b820236 Binary files /dev/null and b/img/marcas/energia.png differ diff --git a/img/marcas/fortinet.png b/img/marcas/fortinet.png new file mode 100644 index 0000000..c26ea43 Binary files /dev/null and b/img/marcas/fortinet.png differ diff --git a/img/marcas/hikvision.png b/img/marcas/hikvision.png new file mode 100644 index 0000000..bbd277b Binary files /dev/null and b/img/marcas/hikvision.png differ diff --git a/img/marcas/hp.png b/img/marcas/hp.png new file mode 100644 index 0000000..6aa7937 Binary files /dev/null and b/img/marcas/hp.png differ diff --git a/img/marcas/hyperv.png b/img/marcas/hyperv.png new file mode 100644 index 0000000..ed1c4fa Binary files /dev/null and b/img/marcas/hyperv.png differ diff --git a/img/marcas/lenovo.png b/img/marcas/lenovo.png new file mode 100644 index 0000000..b518679 Binary files /dev/null and b/img/marcas/lenovo.png differ diff --git a/img/marcas/mantenimiento.png b/img/marcas/mantenimiento.png new file mode 100644 index 0000000..ca19e3c Binary files /dev/null and b/img/marcas/mantenimiento.png differ diff --git a/img/marcas/mikrotik.png b/img/marcas/mikrotik.png new file mode 100644 index 0000000..3205f32 Binary files /dev/null and b/img/marcas/mikrotik.png differ diff --git a/img/marcas/proxmox.png b/img/marcas/proxmox.png new file mode 100644 index 0000000..eb659ff Binary files /dev/null and b/img/marcas/proxmox.png differ diff --git a/img/marcas/seguridad_patrimonial.png b/img/marcas/seguridad_patrimonial.png new file mode 100644 index 0000000..2de2052 Binary files /dev/null and b/img/marcas/seguridad_patrimonial.png differ diff --git a/img/marcas/tormentas.png b/img/marcas/tormentas.png new file mode 100644 index 0000000..536ea81 Binary files /dev/null and b/img/marcas/tormentas.png differ diff --git a/img/marcas/ubiquiti.png b/img/marcas/ubiquiti.png new file mode 100644 index 0000000..8233c10 Binary files /dev/null and b/img/marcas/ubiquiti.png differ diff --git a/img/marcas/veeam.png b/img/marcas/veeam.png new file mode 100644 index 0000000..3c94cf2 Binary files /dev/null and b/img/marcas/veeam.png differ diff --git a/img/marcas/vmware.png b/img/marcas/vmware.png new file mode 100644 index 0000000..fbf314e Binary files /dev/null and b/img/marcas/vmware.png differ diff --git a/img/marcas/whatsapp.png b/img/marcas/whatsapp.png new file mode 100644 index 0000000..dfc5ed0 Binary files /dev/null and b/img/marcas/whatsapp.png differ diff --git a/img/marcas/whatsapp_icon.png b/img/marcas/whatsapp_icon.png new file mode 100644 index 0000000..16436ea Binary files /dev/null and b/img/marcas/whatsapp_icon.png differ diff --git a/img/marcas/zabbix.png b/img/marcas/zabbix.png new file mode 100644 index 0000000..52ba95f Binary files /dev/null and b/img/marcas/zabbix.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c336d3 --- /dev/null +++ b/index.html @@ -0,0 +1,519 @@ + + + + + + + VettaIO - Soluciones Tecnológicas + + + + + + + + + + + + + +
+
+ + +

El camino a la cima, con tecnología inteligente

+ +
+
Infraestructura de última generación
+
Automatización inteligente
+
IA que impulsa resultados
+
Desarrollo a medida
+
Soluciones IoT conectadas
+
+ +
+ + Explorar Soluciones + + + + + Contáctanos +
+
+
+ + +
+
+
+

¿Te identificas con alguna de estas necesidades?

+

Entendemos los desafíos tecnológicos que enfrentan las empresas modernas

+
+ +
+
+
+ + + +
+

¿Tu infraestructura no escala con tu crecimiento?

+

Servidores lentos, costos elevados en cloud y arquitecturas que no soportan el crecimiento de tu negocio.

+
+ +
+
+ + + + +
+

¿Pierdes tiempo en tareas repetitivas?

+

Procesos manuales que consumen horas, datos que se copian a mano entre sistemas, workflows que se traban.

+
+ +
+
+ + + + +
+

¿Tus sistemas no se hablan entre sí?

+

CRM, ERP, facturación... cada herramienta en su isla. Necesitas unificar tus datos y operaciones.

+
+
+
+ + + +
+

¿No aprovechas tus datos?

+

Tienes información valiosa pero no la usas para predecir, optimizar o tomar mejores decisiones.

+
+
+
+ + + + + +
+

¿Las soluciones genéricas no se adaptan?

+

Software de terceros que no hace exactamente lo que necesitas. Tu negocio es único y merece soluciones a medida.

+
+ + + +
+
+ + + + + + + +
+

¿Necesitas conectar el mundo físico con el digital?

+

Sensores, maquinaria, flotas... Tienes activos valiosos que no están monitoreados ni optimizados. El IoT es la respuesta.

+
+ +
+
+ + + +
+

¿Tu equipo técnico está saturado?

+

Proyectos atrasados, mantenimiento que consume todo el tiempo, nuevas iniciativas que no arrancan.

+
+ +
+
+ + + + + +
+

¿Tu negocio genera datos pero no sabes cómo gestionarlos?

+

Sensores, equipos, clientes, operaciones... Los datos crecen exponencialmente y no tienes una estrategia para almacenarlos, procesarlos o extraer valor de ellos en tiempo real.

+
+ + +
+
+ + + + + +
+

¿Te preocupa la seguridad de tus activos o la trazabilidad de tus productos?

+

Falta de visibilidad de tu cadena de suministro, activos sin monitoreo, productos que no pueden rastrearse. Necesitas control y transparencia en toda tu operación.

+
+
+ +
+

Si te identificaste con alguna de estas situaciones, podemos ayudarte.

+ + Contactanos para una consulta gratuita + + + + +
+
+
+ + +
+
+
+

Nuestras Divisiones

+

Tres pilares tecnológicos que cubren todas tus necesidades digitales

+
+ +
+ +
+
+ VettaCore +
+

Infraestructura Robusta

+

Diseñamos y gestionamos infraestructuras tecnológicas escalables y seguras. Desde servidores en la nube hasta arquitecturas on-premise.

+
    +
  • Cloud Architecture
    • +
  • DevOps Solutions
    • +
  • Infrastructure as Code
    • +
  • Monitoreo & Seguridad
    • +
+ + Conocer Más + + + + +
+ + +
+
+ VettaFlex +
+

Automatización Inteligente

+

Optimizamos procesos mediante automatización avanzada. Integraciones, IoT, workflows y pipelines que transforman tu operación.

+
    +
  • Automatización de Procesos
    • +
  • Integraciones con API
    • +
  • Dispositivos IoT
    • +
  • Workflows y Pipelines
    • +
+ + Conocer Más + + + + +
+ + +
+
+ VettaMind +
+

Inteligencia Artificial

+

Soluciones de IA personalizadas que potencian tu negocio. Machine Learning, procesamiento de lenguaje natural y analítica predictiva.

+
    +
  • Agentes de IA a medida
    • +
  • Soluciones NLP
    • +
  • Analisis Predictivo
    • +
  • Modelos de IA Locales
    • +
+ + Conocer Más + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + Nuestro Fuerte +
+

Soluciones IoT

+

Conectamos el mundo físico con tu ecosistema digital para tomar decisiones más inteligentes.

+
+
+
+
+ Agricultura Inteligente + +
+

Agricultura Inteligente

+

Seguimiento en tiempo real del estado del suelo, humedad, ph y condiciones climáticas. Asistencia de IA para optimizar el rendimiento de los cultivos.

+
+
+
+ Cadena de Frio +
+

Control de Cadena de Frío

+

Sistema de monitoreo y control de temperatura para mantener la calidad de productos sensibles durante el transporte y almacenamiento.

+
+
+
+ Gestión Energética +
+

Gestión de Energía

+

Soluciones inteligentes para monitorear y optimizar el consumo de energía en tiempo real en nodos críticos y con múltiples fuestes de energía.

+
+
+
+ + + +
+

Plataforma IoT a Medida

+

Desarrollamos la plataforma, los tableros y la lógica de negocio que necesitas. Integración con tus sistemas actuales (ERP, CRM).

+
+
+
+

¿Tienes un caso de uso específico en mente?

+ + Hablemos de tu proyecto IoT + + + + +
+
+
+ + +
+
+
+
+ +

Desarrollo a Medida

+

Creamos soluciones únicas para cada cliente. No usamos plantillas ni soluciones genéricas.

+

Desarrollamos plataformas de autogestión y CRM completamente personalizadas, ya en producción y funcionando con éxito. Tu visión, nuestro código.

+ +
    +
  • + + Plataformas CRM personalizadas +
    • +
  • + + Sistemas de autogestión +
    • +
  • + + Aplicaciones web y móviles +
    • +
  • + + Integraciones complejas +
    • +
  • + + APIs y microservicios +
    • +
+ + + Iniciar un Proyecto + + + + +
+ +
+
+
+
+
+
+
+
+
01101001 10110010 11010110 01101011
+
10010110 01011010 10100101 01011010
+
11010110 01101011 10110010 01101001
+
10100101 01011010 10010110 01011010
+
01101011 11010110 01101001 10110010
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + +
+ + ¡Hablemos por WhatsApp! + WhatsApp + +
+ + \ No newline at end of file diff --git a/iot.html b/iot.html new file mode 100644 index 0000000..e69de29 diff --git a/politicas.html b/politicas.html new file mode 100644 index 0000000..1d698b1 --- /dev/null +++ b/politicas.html @@ -0,0 +1,1107 @@ + + + + + + + Política de Privacidad | VettaIO + + + + + + + + + + + + + + + + + +
+
+
+ Inicio + / + Política de Privacidad +
+

Política de Privacidad

+

+ En VettaIO nos comprometemos a proteger tus datos personales y a ser transparentes sobre su uso, + especialmente en relación con las aplicaciones y servicios de Meta (Facebook, Instagram) y otras plataformas. +

+
+
+ + +
+
+
+ +

1. Información general

+

+ La presente Política de Privacidad regula el tratamiento de los datos personales que VettaIO + (en adelante, «la Empresa» o «nosotros») recoge a través de su sitio web, aplicaciones, + integraciones con terceros (incluidas las plataformas de Meta) y demás servicios digitales. + Al utilizar nuestros servicios, aceptas las prácticas descritas en este documento. +

+ +

2. Responsable del tratamiento

+

+ El responsable del tratamiento de tus datos personales es VettaIO, + con domicilio en Jujuy, Argentina. Puedes contactarnos en cualquier momento a través de + info@vettaio.com para ejercer tus derechos o resolver + cualquier duda relacionada con la privacidad. +

+ +

3. Datos que recopilamos

+

Recopilamos información que nos proporcionas voluntariamente, así como datos generados por tu interacción con nuestros servicios:

+
    +
  • Datos de identificación: nombre, dirección de correo electrónico, número de teléfono, y cualquier otro dato que nos facilites al contactarnos o registrarte.
    • +
  • Datos de uso: información sobre cómo interactúas con nuestro sitio web, como páginas visitadas, tiempo de permanencia, clics y preferencias.
    • +
  • Datos de dispositivos y técnicas: dirección IP, tipo de navegador, sistema operativo, identificadores de dispositivos y cookies.
    • +
  • Datos de integraciones con Meta: cuando utilizas funcionalidades como «Iniciar sesión con Facebook», «Compartir en Instagram» o cualquier otra interacción con aplicaciones de Meta, podemos recibir de Meta tu nombre, correo electrónico, foto de perfil y otros datos que hayas autorizado compartir. Consulta la Política de Privacidad de Meta para más información.
    • +
  • Datos de otras plataformas: de manera similar, si utilizas integraciones con Google, LinkedIn u otros servicios, podremos recibir la información que hayas autorizado.
    • +
+ +

4. Finalidad del tratamiento

+

Tratamos tus datos personales con las siguientes finalidades:

+
    +
  • Gestionar la relación contractual o precontractual contigo (atender consultas, proporcionar presupuestos, ejecutar proyectos).
    • +
  • Mejorar y personalizar tu experiencia en nuestro sitio web y servicios.
    • +
  • Enviar comunicaciones comerciales y boletines informativos (siempre con tu consentimiento previo).
    • +
  • Realizar análisis estadísticos y de comportamiento para optimizar nuestras soluciones tecnológicas.
    • +
  • Garantizar la seguridad de nuestros sistemas y prevenir fraudes.
    • +
  • Cumplir con obligaciones legales y regulatorias.
    • +
+ +

5. Cookies y tecnologías similares

+

+ Utilizamos cookies propias y de terceros para mejorar la funcionalidad de nuestro sitio, + analizar el tráfico y ofrecer contenido personalizado. Las cookies pueden ser de sesión + (se eliminan al cerrar el navegador) o persistentes (permanecen en tu dispositivo por un tiempo determinado). +

+

+ Puedes gestionar tus preferencias de cookies en cualquier momento a través de la configuración de tu navegador. + Ten en cuenta que deshabilitar algunas cookies puede afectar el funcionamiento de ciertas partes del sitio. +

+

+ Además, las plataformas de Meta (Facebook, Instagram) y otras integraciones pueden utilizar sus propias cookies + y tecnologías de seguimiento. Te recomendamos revisar sus políticas de privacidad para conocer cómo gestionan tus datos. +

+ +

6. Cesión de datos a terceros

+

+ No vendemos ni alquilamos tus datos personales a terceros. No obstante, podemos compartir tus datos con: +

+
    +
  • Proveedores de servicios que nos ayudan a operar nuestro negocio (alojamiento, análisis, procesamiento de pagos, etc.), siempre bajo estrictos acuerdos de confidencialidad y conforme a la legislación aplicable.
    • +
  • Meta (Facebook, Instagram) y otras plataformas similares, cuando tú inicias sesión o interactúas a través de sus servicios. La información compartida se rige por las políticas de privacidad de dichas plataformas.
    • +
  • Autoridades competentes cuando sea requerido por ley o para proteger nuestros derechos legales.
    • +
+ +

7. Transferencias internacionales

+

+ Algunos de nuestros proveedores y plataformas (incluida Meta) pueden estar ubicados fuera de Argentina. + En estos casos, aseguramos que las transferencias se realizan con garantías adecuadas, + como cláusulas contractuales tipo o mecanismos de transferencia aprobados, para mantener el nivel de protección de tus datos. +

+ +

8. Plazos de conservación

+

+ Conservamos tus datos personales durante el tiempo necesario para cumplir con las finalidades descritas, + y durante los plazos legales establecidos para la prescripción de responsabilidades. + Una vez que ya no sean necesarios, los eliminaremos o anonimizaremos de forma segura. +

+ +

9. Derechos de los usuarios

+

+ De acuerdo con la normativa de protección de datos aplicable, tienes derecho a: +

+
    +
  • Acceder a tus datos personales.
    • +
  • Rectificar datos inexactos o incompletos.
    • +
  • Suprimir tus datos (derecho al olvido).
    • +
  • Limitar el tratamiento de tus datos.
    • +
  • Oponerte al tratamiento para fines de marketing directo o basado en intereses legítimos.
    • +
  • Portabilidad de tus datos a otro responsable.
    • +
  • Retirar el consentimiento en cualquier momento, cuando el tratamiento se base en él.
    • +
+

+ Para ejercer estos derechos, puedes enviar un correo electrónico a info@vettaio.com + indicando tu solicitud. Responderemos en el plazo legal establecido. +

+ +

10. Seguridad

+

+ Implementamos medidas técnicas y organizativas adecuadas para proteger tus datos personales + contra accesos no autorizados, pérdida, alteración o destrucción. + Sin embargo, ningún sistema es completamente seguro, por lo que te recomendamos tomar precauciones + adicionales al compartir información sensible. +

+ +

11. Enlaces a sitios externos

+

+ Nuestro sitio puede contener enlaces a sitios web de terceros (incluidas las plataformas de Meta). + Esta Política de Privacidad no se aplica a esos sitios, por lo que te aconsejamos revisar sus propias políticas + antes de proporcionarles tus datos. +

+ +

12. Cambios en la política

+

+ Podemos actualizar esta Política de Privacidad periódicamente para reflejar cambios en nuestras prácticas + o en la legislación. Te notificaremos cualquier modificación significativa a través de nuestro sitio web + o por correo electrónico. La fecha de la última actualización se indica al final de este documento. +

+ +

13. Contacto

+

+ Si tienes preguntas, comentarios o deseas ejercer tus derechos, puedes escribirnos a: +
+ VettaIO
+ Jujuy, Argentina
+ info@vettaio.com +

+ +
+ Última actualización: +
+
+
+
+ + + + + +
+ + ¡Hablemos por WhatsApp! + WhatsApp + +
+ + + + + \ No newline at end of file diff --git a/propuesta ia.txt b/propuesta ia.txt new file mode 100644 index 0000000..938f8fd --- /dev/null +++ b/propuesta ia.txt @@ -0,0 +1,187 @@ +Perfecto, con lo que se ve en tus archivos ya hay una base conceptual muy sólida: + +Infraestructura (VettaCore) +Automatización + IoT (VettaFlex) +IA (VettaMind) +Y además aparece transversalmente desarrollo a medida como eje unificador + +Voy a proponerte exactamente lo que buscás: +👉 3 catálogos separados (uno por eje principal) +👉 pero interconectados estratégicamente para vender siempre el ecosistema completo + +🧩 ESTRUCTURA GENERAL (para los 3 catálogos) + +Todos deberían seguir esta lógica: + +Introducción al eje +Problemas que resuelve +Servicios principales +Soluciones empaquetadas (casos concretos) +Integración con otros ejes (cross-sell) +Modelo de trabajo +CTA +📘 CATÁLOGO 1: DESARROLLO A MEDIDA (EJE CENTRAL) +🧠 Enfoque + +Este es el core real del negocio: todo pasa por acá. + +🔹 Introducción + +Desarrollamos software a medida que se adapta exactamente a la operación de tu empresa, integrando sistemas, automatizando procesos y conectando datos físicos y digitales. + +🔹 Problemas que resuelve +Sistemas que no se adaptan al negocio +Herramientas aisladas (CRM, ERP, etc.) +Procesos manuales +Falta de trazabilidad +Dificultad para escalar +🔹 Servicios principales +1. Desarrollo de sistemas empresariales +CRM / ERP personalizados +Sistemas de gestión operativa +Plataformas internas +2. Integración de sistemas +APIs +Integración entre plataformas existentes +Unificación de datos +3. Plataformas IoT +Dashboards en tiempo real +Backend para dispositivos +Gestión de sensores +4. Sistemas con IA integrada +Predicción de demanda +Automatización inteligente +Análisis de datos +🔹 Soluciones empaquetadas +Sistema de gestión integral (ventas + stock + finanzas) +Plataforma de monitoreo en tiempo real (IoT) +Sistema de trazabilidad de productos +Portal de clientes/proveedores +🔹 Integración con otros ejes + +👉 “Este servicio se potencia con:” + +Automatización (workflows, bots, integraciones) +IoT (datos del mundo físico) +IA (predicción y optimización) +🔹 Modelo de trabajo +Discovery + diagnóstico +Desarrollo iterativo (MVP → evolución) +Integración continua +Soporte y mejora +⚙️ CATÁLOGO 2: AUTOMATIZACIÓN + IoT + +(Alineado con lo que ya tenés en VettaFlex) + +🧠 Enfoque + +Optimizar operaciones conectando procesos digitales + dispositivos físicos. + +🔹 Introducción + +Automatizamos procesos y conectamos dispositivos para que tu negocio funcione de forma autónoma, eficiente y basada en datos en tiempo real + +🔹 Problemas que resuelve +Tareas repetitivas +Procesos manuales +Falta de monitoreo +Sistemas desconectados +Ineficiencia operativa +🔹 Servicios principales +1. Automatización de procesos (RPA + workflows) +Flujos automáticos +Orquestación de tareas +2. Integraciones +APIs +Conexión entre sistemas +3. IoT (Internet of Things) +Sensores (temperatura, vibración, consumo, etc.) +Gateways y edge computing +Protocolos industriales (MQTT, Modbus, OPC) +4. Data pipelines +Procesamiento en tiempo real +ETL/ELT +5. Sistemas de alertas +Notificaciones inteligentes +Eventos en tiempo real +🔹 Soluciones empaquetadas +Monitoreo de maquinaria (mantenimiento preventivo 👈 muy alineado a lo que querías agregar) +Control de temperatura (cadena de frío) +Agricultura inteligente +Automatización de procesos administrativos +Control energético +🔹 Integración con otros ejes + +👉 “Esto no es solo automatización:” + +Desarrollo a medida → interfaz y lógica de negocio +IA → decisiones inteligentes sobre los datos +🔹 Diferencial clave + +Automatizan software + hardware (muy fuerte esto) + +🤖 CATÁLOGO 3: IA APLICADA + +(Alineado con VettaMind) + +🧠 Enfoque + +Convertir datos en decisiones. + +🔹 Introducción + +Aplicamos inteligencia artificial para optimizar procesos, predecir comportamientos y generar ventajas competitivas reales + +🔹 Problemas que resuelve +No aprovechamiento de datos +Decisiones basadas en intuición +Falta de predicción +Ineficiencia operativa +🔹 Servicios principales +1. Machine Learning +Modelos predictivos +Series temporales +2. NLP +Chatbots +Procesamiento de documentos +3. Computer Vision +Control de calidad +Reconocimiento +4. Analítica avanzada +Forecasting +Detección de anomalías +5. IoT Analytics +Mantenimiento predictivo +Optimización en tiempo real +🔹 Soluciones empaquetadas +Mantenimiento predictivo industrial +Optimización energética +Recomendadores +Análisis de ventas +Optimización de rutas/flotas +🔹 Integración con otros ejes + +👉 “La IA sin datos no sirve” + +IoT → genera datos +Desarrollo → implementa soluciones +Automatización → ejecuta decisiones +🔥 BONUS: CÓMO CONECTAR LOS 3 CATÁLOGOS (CLAVE COMERCIAL) + +Te dejo una sección que deberías repetir en los 3: + +🔗 Ecosistema VettaIO + +Nuestras soluciones no funcionan de forma aislada: + +Desarrollo a medida → construye el sistema +IoT & Automatización → genera y ejecuta datos +IA → optimiza y predice + +👉 El verdadero valor está en la combinación. + +💡 POSICIONAMIENTO FINAL (MUY IMPORTANTE) + +Con esto estás dejando de vender servicios sueltos y pasás a vender: + +👉 “Soluciones tecnológicas integrales basadas en datos” \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..279cab8 --- /dev/null +++ b/scripts.js @@ -0,0 +1,622 @@ +// Particle Network +class ParticleNetwork { + constructor(colorConfig = null) { + this.canvas = document.getElementById('particleCanvas'); + + if (!this.canvas) { + console.error('ParticleNetwork: Canvas element not found'); + return; + } + + this.ctx = this.canvas.getContext('2d'); + this.particles = []; + this.mouse = { x: -1000, y: -1000 }; // Start off-screen + this.particleCount = 80; + this.mouseRadius = 200; // Radio de influencia del mouse para conexiones + + // Color configuration - default to cyan/green + this.colors = colorConfig || { + particle: 'rgba(0, 166, 255, 0.6)', + line: 'rgba(0, 145, 255, 0.36)' + }; + + this.init(); + } + + init() { + this.resizeCanvas(); + this.createParticles(); + this.setupEventListeners(); + this.animate(); + } + + resizeCanvas() { + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + } + + createParticles() { + this.particles = []; + for (let i = 0; i < this.particleCount; i++) { + this.particles.push({ + x: Math.random() * this.canvas.width, + y: Math.random() * this.canvas.height, + vx: (Math.random() - 0.5) * 0.5, + vy: (Math.random() - 0.5) * 0.5, + radius: Math.random() * 2 + 1 + }); + } + } + + setupEventListeners() { + window.addEventListener('resize', () => { + this.resizeCanvas(); + this.createParticles(); + }); + + window.addEventListener('mousemove', (e) => { + this.mouse.x = e.clientX; + this.mouse.y = e.clientY; + }); + + // Reset mouse position when it leaves the window + window.addEventListener('mouseleave', () => { + this.mouse.x = -1000; + this.mouse.y = -1000; + }); + } + + drawParticle(particle) { + this.ctx.beginPath(); + this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); + this.ctx.fillStyle = this.colors.particle; + this.ctx.fill(); + } + + drawLine(p1, p2, opacity) { + this.ctx.beginPath(); + this.ctx.moveTo(p1.x, p1.y); + this.ctx.lineTo(p2.x, p2.y); + // Extract RGB from the line color and apply opacity + const baseColor = this.colors.line.match(/rgba?\(([^)]+)\)/)[1].split(',').slice(0, 3).join(','); + this.ctx.strokeStyle = `rgba(${baseColor}, ${opacity})`; + this.ctx.lineWidth = 1; + this.ctx.stroke(); + } + + updateParticle(particle) { + // Update position + particle.x += particle.vx; + particle.y += particle.vy; + + // Bounce off edges + if (particle.x < 0 || particle.x > this.canvas.width) { + particle.vx *= -1; + } + if (particle.y < 0 || particle.y > this.canvas.height) { + particle.vy *= -1; + } + + // Mouse interaction removed - particles just float naturally + } + + animate() { + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + + // Update and draw particles + this.particles.forEach((particle, i) => { + this.updateParticle(particle); + this.drawParticle(particle); + + // Connect particles ONLY if mouse is near them + this.particles.slice(i + 1).forEach(otherParticle => { + const dx = particle.x - otherParticle.x; + const dy = particle.y - otherParticle.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + // Check if particles are close to each other + if (distance < 150) { + // Check if mouse is near either particle + const mouseToP1 = Math.sqrt( + Math.pow(this.mouse.x - particle.x, 2) + + Math.pow(this.mouse.y - particle.y, 2) + ); + const mouseToP2 = Math.sqrt( + Math.pow(this.mouse.x - otherParticle.x, 2) + + Math.pow(this.mouse.y - otherParticle.y, 2) + ); + + // Only draw line if mouse is within radius of either particle + if (mouseToP1 < this.mouseRadius || mouseToP2 < this.mouseRadius) { + // Calculate opacity based on distance and mouse proximity + const proximityFactor = Math.min(mouseToP1, mouseToP2) / this.mouseRadius; + const distanceFactor = 1 - (distance / 150); + const opacity = 0.3 * distanceFactor * (1 - proximityFactor); + + this.drawLine(particle, otherParticle, opacity); + } + } + }); + }); + + requestAnimationFrame(() => this.animate()); + } +} + +// Animated Text Rotator +class TextRotator { + constructor(containerSelector, interval = 3000) { + this.container = document.querySelector(containerSelector); + + if (!this.container) { + console.warn('TextRotator: Container not found'); + return; + } + + this.texts = this.container.querySelectorAll('.animated-text'); + + if (this.texts.length === 0) { + console.warn('TextRotator: No animated text elements found'); + return; + } + + this.currentIndex = 0; + this.interval = interval; + + this.start(); + } + + start() { + setInterval(() => { + this.texts[this.currentIndex].classList.remove('active'); + this.currentIndex = (this.currentIndex + 1) % this.texts.length; + this.texts[this.currentIndex].classList.add('active'); + }, this.interval); + } +} + +// Smooth Scroll +function smoothScroll(target) { + const element = document.querySelector(target); + if (element) { + const headerOffset = 64; + const elementPosition = element.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } +} + +// Navigation +function setupNavigation() { + const mobileMenuBtn = document.getElementById('mobileMenuBtn'); + const navLinksContainer = document.getElementById('navLinks'); + + if (!mobileMenuBtn || !navLinksContainer) return; + + // Para móvil: el enlace "Divisiones" SOLO abre el submenú, NO navega + const divisionesNavItem = document.querySelector('.nav-item'); + if (divisionesNavItem) { + const divisionesLink = divisionesNavItem.querySelector('.nav-link-group .nav-link'); + + if (divisionesLink) { + // Prevenir comportamiento por defecto del enlace + divisionesLink.addEventListener('click', (e) => { + if (window.innerWidth <= 768) { + e.preventDefault(); + e.stopPropagation(); + + // Toggle del submenú + divisionesNavItem.classList.toggle('open'); + + // Actualizar aria-expanded del botón toggle + const toggleBtn = divisionesNavItem.querySelector('.dropdown-toggle'); + if (toggleBtn) { + toggleBtn.setAttribute('aria-expanded', divisionesNavItem.classList.contains('open')); + } + } + }); + } + } + + // Smooth scroll solo para enlaces que NO son el de Divisiones en móvil + document.querySelectorAll('a[href^="#"]').forEach(link => { + // Verificar si es el enlace de Divisiones en móvil + const isDivisionesLink = window.innerWidth <= 768 && + link.closest('.nav-item') && + link.closest('.nav-item') === divisionesNavItem && + link.getAttribute('href') === '#divisions'; + + if (isDivisionesLink) { + return; // No agregar smooth scroll a este enlace + } + + link.addEventListener('click', (e) => { + const target = link.getAttribute('href'); + if (target && target !== '#') { + e.preventDefault(); + smoothScroll(target); + + // Cerrar menú móvil si está abierto + if (window.innerWidth <= 768 && navLinksContainer.classList.contains('active')) { + navLinksContainer.classList.remove('active'); + mobileMenuBtn.classList.remove('active'); + } + } + }); + }); + + // Mobile menu toggle (hamburguesa) + mobileMenuBtn.addEventListener('click', () => { + navLinksContainer.classList.toggle('active'); + mobileMenuBtn.classList.toggle('active'); + + // Cerrar cualquier submenú abierto al cerrar el menú principal + if (!navLinksContainer.classList.contains('active')) { + const openSubmenus = document.querySelectorAll('.nav-item.open'); + openSubmenus.forEach(submenu => { + submenu.classList.remove('open'); + const toggleBtn = submenu.querySelector('.dropdown-toggle'); + if (toggleBtn) { + toggleBtn.setAttribute('aria-expanded', 'false'); + } + }); + } + }); + + // Toggle dropdown desde el botón flecha (consistencia) + document.querySelectorAll('.dropdown-toggle').forEach(trigger => { + trigger.addEventListener('click', (e) => { + if (window.innerWidth <= 768) { + e.preventDefault(); + e.stopPropagation(); + const item = trigger.closest('.nav-item'); + if (item) { + item.classList.toggle('open'); + trigger.setAttribute('aria-expanded', item.classList.contains('open')); + } + } + }); + }); + + // Cerrar menú móvil al hacer clic fuera + document.addEventListener('click', (e) => { + if (!e.target.closest('.navbar') && navLinksContainer.classList.contains('active')) { + navLinksContainer.classList.remove('active'); + mobileMenuBtn.classList.remove('active'); + } + }); + + // Cerrar submenús al redimensionar a desktop + window.addEventListener('resize', () => { + if (window.innerWidth > 768) { + const openSubmenus = document.querySelectorAll('.nav-item.open'); + openSubmenus.forEach(submenu => { + submenu.classList.remove('open'); + }); + } + }); +} + +// Scroll Animations +function setupScrollAnimations() { + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -100px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, observerOptions); + + const animatedElements = document.querySelectorAll('[data-aos]'); + animatedElements.forEach(el => observer.observe(el)); +} + + +// Active Navigation Link on Scroll +function setupActiveNavOnScroll() { + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('.nav-link'); + + window.addEventListener('scroll', () => { + let current = ''; + + sections.forEach(section => { + const sectionTop = section.offsetTop; + const sectionHeight = section.clientHeight; + + if (window.pageYOffset >= sectionTop - 100) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${current}`) { + link.classList.add('active'); + } + }); + }); +} + +// Initialize everything when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + console.log('DOM loaded, initializing...'); + + // Initialize particle network with colors from data attribute or defaults + const canvas = document.getElementById('particleCanvas'); + + if (canvas) { + console.log('Canvas found, initializing particles...'); + const particleColor = canvas.getAttribute('data-particle-color'); + const lineColor = canvas.getAttribute('data-line-color'); + + const colorConfig = (particleColor && lineColor) ? { + particle: particleColor, + line: lineColor + } : null; + + new ParticleNetwork(colorConfig); + } else { + console.error('Canvas not found!'); + } + + // Initialize text rotator + const textContainer = document.querySelector('.animated-text-container'); + if (textContainer) { + console.log('Text container found, initializing rotator...'); + new TextRotator('.animated-text-container'); + } else { + console.warn('Text container not found'); + } + + // Setup navigation + setupNavigation(); + + // Setup scroll animations + setupScrollAnimations(); + + // Setup active nav on scroll + setupActiveNavOnScroll(); + + setupMobileSubmenuClose(); + + console.log('Initialization complete!'); +}); + +// Add parallax effect to hero section +window.addEventListener('scroll', () => { + const hero = document.querySelector('.hero-content'); + const scrolled = window.pageYOffset; + + if (hero && scrolled < window.innerHeight) { + hero.style.transform = `translateY(${scrolled * 0.5}px)`; + hero.style.opacity = 1 - (scrolled / window.innerHeight); + } +}); +// ============================================================ +// Carrusel de Logos - Pausa al hover +// ============================================================ + +function setupLogoCarousel() { + const track = document.querySelector('.logo-track'); + const logoItems = document.querySelectorAll('.logo-item'); + + if (!track) return; + + // Pausar animación al hacer hover en cualquier logo + logoItems.forEach(item => { + item.addEventListener('mouseenter', () => { + track.style.animationPlayState = 'paused'; + }); + item.addEventListener('mouseleave', () => { + track.style.animationPlayState = 'running'; + }); + }); +} + +// Inicializar +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', setupLogoCarousel); +} else { + setupLogoCarousel(); +} +// Cerrar submenú al seleccionar una opción (en móvil) +function setupMobileSubmenuClose() { + if (window.innerWidth <= 768) { + const dropdownLinks = document.querySelectorAll('.dropdown-link'); + dropdownLinks.forEach(link => { + link.addEventListener('click', () => { + // Cerrar el submenú después de hacer clic + const navItem = link.closest('.nav-item'); + if (navItem) { + navItem.classList.remove('open'); + const toggleBtn = navItem.querySelector('.dropdown-toggle'); + if (toggleBtn) { + toggleBtn.setAttribute('aria-expanded', 'false'); + } + } + + // Opcional: cerrar también el menú principal si quieres + const navLinksContainer = document.getElementById('navLinks'); + const mobileMenuBtn = document.getElementById('mobileMenuBtn'); + if (navLinksContainer && mobileMenuBtn && navLinksContainer.classList.contains('active')) { + navLinksContainer.classList.remove('active'); + mobileMenuBtn.classList.remove('active'); + } + }); + }); + } +} +// ============================================================ +// Botón Flotante de WhatsApp con Transición Visual +// ============================================================ + +document.addEventListener('DOMContentLoaded', function () { + const whatsappFloat = document.getElementById('whatsappFloat'); + const heroSection = document.getElementById('home'); + const navbar = document.querySelector('.navbar'); + + if (!whatsappFloat || !heroSection) return; + + let currentState = 'large'; // 'large' o 'small' + let isTransitioning = false; + + // Función para verificar si el elemento está en viewport + function isElementInViewport(el, offset = 0) { + const rect = el.getBoundingClientRect(); + const windowHeight = window.innerHeight || document.documentElement.clientHeight; + return rect.top <= windowHeight - offset && rect.bottom >= offset; + } + + // Función para verificar si estamos en el hero + function isInHero() { + return isElementInViewport(heroSection, 100); + } + + // Función para verificar si el usuario ha pasado el hero + function hasScrolledPastHero() { + const heroBottom = heroSection.getBoundingClientRect().bottom; + const navHeight = navbar ? navbar.offsetHeight : 80; + return heroBottom <= navHeight + 50; + } + + // Función principal para actualizar el estado con efecto visual + function updateWhatsAppButton() { + if (isTransitioning) return; // Evitar multiples disparos a la vez + + const inHero = isInHero(); + const scrolledPast = hasScrolledPastHero(); + const newState = (inHero && !scrolledPast) ? 'large' : 'small'; + + // Solo cambiar si el estado es diferente + if (newState !== currentState) { + isTransitioning = true; + + // 1. Iniciar teletransportación fuera + whatsappFloat.classList.add('teleporting-out'); + + // 2. Esperar a que desaparezca + setTimeout(() => { + // Limpiar clases de estado + whatsappFloat.classList.remove('large', 'small', 'teleporting-out', 'initial'); + + // Cambiar la posición instantaneamente siendo invisibles + whatsappFloat.classList.add(newState); + + // 3. Iniciar teletransportación entrada + whatsappFloat.classList.add('teleporting-in'); + currentState = newState; + + // 4. Limpiar cuando termina + setTimeout(() => { + whatsappFloat.classList.remove('teleporting-in'); + isTransitioning = false; + }, 400); // 400ms para aparecer + + }, 300); // 300ms para desaparecer + + // Log para debug (opcional) + console.log(`Botón teletransportado a: ${newState}`); + } + } + + // Throttle para mejor performance + let ticking = false; + let lastScrollY = window.scrollY; + let scrollDirection = 'down'; + + window.addEventListener('scroll', function () { + // Detectar dirección del scroll para efectos adicionales + const currentScrollY = window.scrollY; + scrollDirection = currentScrollY > lastScrollY ? 'down' : 'up'; + lastScrollY = currentScrollY; + + if (!ticking) { + requestAnimationFrame(function () { + updateWhatsAppButton(); + ticking = false; + }); + ticking = true; + } + }); + + // Actualizar en resize + window.addEventListener('resize', function () { + updateWhatsAppButton(); + }); + + // Actualizar en la carga inicial + updateWhatsAppButton(); + + // Efecto adicional: mostrar notificación visual cuando cambia de posición + // (opcional: agregar un pequeño badge que indique el cambio) + let hasShownNotification = false; + + function showPositionNotification() { + if (hasShownNotification) return; + + // Crear un pequeño indicador visual (opcional) + /*const notification = document.createElement('div'); + notification.style.cssText = ` + position: fixed; + bottom: 110px; + right: 110px; + background: rgba(110, 124, 181, 0.8); + color: white; + padding: 5px 12px; + border-radius: 20px; + font-size: 12px; + font-family: 'Space Grotesk', sans-serif; + z-index: 999; + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; + white-space: nowrap; + `;*/ + + document.body.appendChild(notification); + + setTimeout(() => { + notification.style.opacity = '1'; + setTimeout(() => { + notification.style.opacity = '0'; + setTimeout(() => { + notification.remove(); + }, 300); + }, 2000); + }, 100); + + hasShownNotification = true; + } + + // Mostrar notificación la primera vez que sale del hero + let hasTriggeredNotification = false; + + function checkAndShowNotification() { + if (!hasTriggeredNotification && currentState === 'small') { + showPositionNotification(); + hasTriggeredNotification = true; + } + } + + // Monitorear cambios de estado para la notificación + const observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + if (mutation.attributeName === 'class') { + checkAndShowNotification(); + } + }); + }); + + observer.observe(whatsappFloat, { attributes: true }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..61fb3e8 --- /dev/null +++ b/styles.css @@ -0,0 +1,3193 @@ +/* ============================================================ + VettaIO - Global Stylesheet + ============================================================ */ + +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #3b82f6; + --secondary-color: #00ffaa; + --accent-color: #8b5cf6; + --bg-dark: #0a0e27; + --bg-dark-alt: #1a1f3a; + --bg-darker: #0f1229; + --text-primary: #ffffff; + --text-secondary: #9ca3af; + --text-muted: #6b7280; + --border-color: rgba(0, 191, 255, 0.2); + --gradient-primary: linear-gradient(135deg, #00ffaa 0%, #3b82f6 100%); + --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); + --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%); +} + +body { + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; +} + +/* ============================================================ + Layout Containers + ============================================================ */ +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 2rem; +} + +.container-small { + max-width: 960px; + margin: 0 auto; + padding: 0 2rem; +} + +/* ============================================================ + Particle Canvas + ============================================================ */ +#particleCanvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + pointer-events: none; +} + +/* ============================================================ + Navigation + ============================================================ */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(10, 14, 39, 0.8); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border-color); +} + +.nav-container { + max-width: 1280px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + align-items: center; + justify-content: space-between; + height: 64px; +} + +.logo { + display: flex; + align-items: center; + gap: 0.5rem; + z-index: 10; + text-decoration: none; +} + +.logo img { + height: 25px; + width: auto; + max-width: 160px; +} + +.logo-icon { + width: 40px; + height: 40px; + background: linear-gradient(135deg, #00ffaa 0%, #3b82f6 100%); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + color: white; +} + +.logo-text { + font-size: 1.5rem; + font-weight: 900; + letter-spacing: -0.02em; +} + +.logo-highlight { + color: var(--primary-color); +} + +.nav-links { + display: flex; + gap: 2rem; + align-items: center; +} + +.nav-link { + color: var(--text-secondary); + text-decoration: none; + font-weight: 500; + transition: color 0.3s; + position: relative; +} + +.nav-link:hover, +.nav-link.active { + color: var(--primary-color); +} + +/* ============================================================ + Dropdown Menu (Divisiones) + ============================================================ */ +.nav-item { + position: relative; + display: flex; + align-items: center; +} + +.nav-link-group { + display: flex; + align-items: center; + gap: 0.3rem; +} + +.nav-link-group .nav-link { + display: block; /* override if needed */ +} + +.dropdown-toggle { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + transition: color 0.3s; +} + +.dropdown-toggle:hover, +.nav-item.open .dropdown-toggle, +.nav-item:hover .dropdown-toggle { + color: var(--primary-color); +} + +.dropdown-arrow { + width: 14px; + height: 14px; + transition: transform 0.3s; + flex-shrink: 0; +} + +.nav-item:hover .dropdown-arrow, +.nav-item.open .dropdown-arrow { + transform: rotate(180deg); +} + +.dropdown { + position: absolute; + top: calc(100% + 0.75rem); + left: 50%; + transform: translateX(-50%); + background: rgba(10, 14, 39, 0.95); + backdrop-filter: blur(20px); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 0.5rem; + min-width: 200px; + opacity: 0; + pointer-events: none; + transform: translateX(-50%) translateY(-8px); + transition: opacity 0.25s ease, transform 0.25s ease; + z-index: 2000; +} + +/* Bridge invisible que cubre el gap entre el nav-link y el dropdown + para que el hover no se corte al mover el mouse entre ambos */ +.dropdown::before { + content: ''; + position: absolute; + top: -0.85rem; /* cubre el gap de 0.75rem + un poco más */ + left: 0; + right: 0; + height: 0.85rem; +} + +.nav-item:hover .dropdown, +.nav-item:focus-within .dropdown { + opacity: 1; + pointer-events: all; + transform: translateX(-50%) translateY(0); +} + +.dropdown-link { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.65rem 1rem; + border-radius: 8px; + color: var(--text-secondary); + text-decoration: none; + font-weight: 500; + font-size: 0.925rem; + transition: all 0.2s; + white-space: nowrap; +} + +.dropdown-link:hover { + background: rgba(59, 130, 246, 0.1); + color: var(--text-primary); +} + +.dropdown-link .dd-dot { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} + +.dd-dot--core { background: #3b82f6; } +.dd-dot--flex { background: #25e99e; } +.dd-dot--mind { background: #a78bfa; } + +/* Dropdown in mobile (stacked) */ +@media (max-width: 768px) { + .nav-links { + position: fixed; + top: 64px; + left: 0; + right: 0; + background: var(--bg-dark-alt); + flex-direction: column; + padding: 2rem; + gap: 1.5rem; + border-top: 1px solid var(--border-color); + transform: translateX(-100%); + transition: transform 0.3s; + align-items: center; /* ← Centrar horizontalmente */ + } + + .nav-links.active { + transform: translateX(0); + } + + /* Centrar cada item del nav */ + .nav-link { + text-align: center; + font-size: 1.1rem; + padding: 0.5rem 0; + display: block; + width: 100%; + } + + /* Ajustar el nav-item para que ocupe todo el ancho y esté centrado */ + .nav-item { + flex-direction: column; + align-items: center; /* ← Centrar contenido */ + width: 100%; + } + + /* El grupo del link y botón también centrado */ + .nav-link-group { + width: 100%; + justify-content: center; /* ← Centrar el contenido */ + gap: 0.75rem; + position: relative; + } + + /* El enlace Divisiones centrado */ + .nav-link-group .nav-link { + text-align: center; + display: inline-block; + width: auto; + } + + /* Botón toggle posicionado relativamente al lado del texto */ + .dropdown-toggle { + padding: 8px 12px; + margin: 0; + position: relative; + } + + /* Dropdown centrado */ + .dropdown { + position: static; + opacity: 1; + pointer-events: all; + transform: none; + background: rgba(26, 31, 58, 0.6); + border: none; + border-left: 2px solid var(--border-color); + border-radius: 0; + padding: 0.5rem 0; + margin: 0.5rem auto 0 auto; /* ← Centrar automáticamente */ + min-width: unset; + width: 90%; /* ← Ancho controlado para centrar */ + max-width: 280px; /* ← Ancho máximo para no ser muy ancho */ + display: none; + } + + /* Cuando está abierto, mostrarlo */ + .nav-item.open .dropdown { + display: block; + } + + /* Links del dropdown centrados */ + .dropdown-link { + padding: 0.75rem 1rem; + white-space: normal; + font-size: 0.95rem; + text-align: center; /* ← Centrar texto */ + justify-content: center; /* ← Centrar ícono y texto */ + gap: 0.75rem; + } + + /* Ajuste para el botón toggle en móvil */ + .dropdown-toggle { + padding: 8px 12px; + margin: -8px -12px -8px 0; + } + + /* Logo más pequeño en mobile */ + .logo img { + height: 18px; + max-width: 120px; + } +} + +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + z-index: 10; +} + +.mobile-menu-btn span { + width: 25px; + height: 2px; + background: var(--primary-color); + transition: all 0.3s; +} + +.mobile-menu-btn.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.mobile-menu-btn.active span:nth-child(2) { + opacity: 0; +} + +.mobile-menu-btn.active span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -6px); +} + +/* ============================================================ + Hero Section (Index) + ============================================================ */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding-top: 64px; + z-index: 10; +} + +.hero-content { + text-align: center; + animation: fadeInUp 1s ease-out; + width: 100%; + max-width: 100%; + padding: 0 1rem; + box-sizing: border-box; +} + +.hero-logo { + margin-bottom: 2rem; +} + +.hero-logo-icon { + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s; +} + +.hero-logo-icon img { + max-width: 80%; + height: auto; +} + +.hero-logo-icon:hover { + transform: scale(1.05); + filter: drop-shadow(0 0 8px rgba(173, 216, 230, 0.5)); +} + +.hero-title { + font-size: clamp(3rem, 10vw, 8rem); + font-weight: 900; + margin-bottom: 1rem; + letter-spacing: -0.03em; + line-height: 1; +} + +.hero-title-highlight { + background: linear-gradient(135deg, #00ffaa 0%, #3b82f6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: clamp(1.25rem, 3vw, 1.5rem); + color: var(--text-secondary); + margin-bottom: 1rem; +} + +.animated-text-container { + height: 4rem; + position: relative; + margin-bottom: 3rem; + overflow: hidden; +} + +.animated-text { + position: absolute; + width: 100%; + font-size: clamp(1rem, 2.5vw, 1.25rem); + font-weight: 700; + background: linear-gradient(135deg, #00ffaa 0%, #3b82f6 50%, #8b5cf6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + opacity: 0; + transform: translateY(20px); + transition: all 0.7s ease-in-out; +} + +.animated-text.active { + opacity: 1; + transform: translateY(0); +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +/* ============================================================ + Buttons + ============================================================ */ +.btn { + padding: 1rem 2rem; + border-radius: 8px; + font-weight: 700; + font-size: 1.125rem; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: all 0.3s; + cursor: pointer; + border: none; + font-family: inherit; +} + +.btn-primary { + background: linear-gradient(135deg, #00ffaa 0%, #3b82f6 100%); + color: white; + box-shadow: 0 4px 15px rgba(0, 255, 170, 0.3); +} + +.btn-primary:hover { + transform: scale(1.05); + box-shadow: 0 8px 25px rgba(0, 255, 170, 0.5); +} + +.btn-secondary { + border: 2px solid var(--primary-color); + color: var(--text-primary); + background: transparent; +} + +.btn-secondary:hover { + background: rgba(0, 255, 170, 0.1); + transform: scale(1.05); +} + +.btn-full { + width: 100%; + justify-content: center; +} + +/* ============================================================ + Sections — General + ============================================================ */ +section { + position: relative; + padding: 6rem 0; + z-index: 10; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-title { + font-size: clamp(2.5rem, 6vw, 4rem); + font-weight: 900; + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +.section-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 48rem; + margin: 0 auto; +} + +/* ============================================================ + Text Gradients + ============================================================ */ +.text-gradient { + background: linear-gradient(135deg, #00ffaa 0%, #3b82f6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.text-gradient-core { + background: linear-gradient(135deg, #3b82f6 0%, #544dda 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.text-gradient-flex { + background: linear-gradient(135deg, #087651 0%, #25e99e 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.text-gradient-mind { + background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* ============================================================ + Client Needs Section + ============================================================ */ +.needs-section { + background: linear-gradient(180deg, rgba(10, 14, 39, 0) 0%, rgba(26, 31, 58, 0.3) 50%, rgba(10, 14, 39, 0) 100%); + padding: 8rem 0; +} + +.needs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-bottom: 4rem; +} + +.need-card { + background: linear-gradient( + 135deg, + rgba(26, 31, 58, 0.5) 0%, + rgba(15, 18, 41, 0.5) 100%); + border: 1px solid rgba(0, 166, 255, 0.1); + border-radius: 16px; + padding: 2rem; + transition: all 0.3s; + backdrop-filter: blur(12px); +} + +.need-card:hover { + border-color: rgba(0, 166, 255, 0.4); + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0, 179, 255, 0.15); +} + +.need-icon { + width: 56px; + height: 56px; + background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%); + border: 1px solid var(--border-color); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: var(--primary-color); + transition: all 0.3s; +} + +.need-card:hover .need-icon { + background: linear-gradient(135deg, rgba(0, 183, 255, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); + transform: scale(1.1); +} + +.need-card h3 { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); + line-height: 1.4; +} + +.need-card p { + color: var(--text-secondary); + line-height: 1.7; + font-size: 0.95rem; +} + +.needs-cta { + text-align: center; + padding-top: 2rem; + border-top: 1px solid rgba(0, 255, 170, 0.1); +} + +.needs-cta-text { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 2rem; +} + +/* ============================================================ + Divisions Section (Index) + ============================================================ */ +.divisions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.division-card { + background: linear-gradient(to bottom, var(--bg-dark-alt), var(--bg-darker)); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 2rem; + transition: all 0.3s; + opacity: 0; + transform: translateY(30px); +} + +.division-card[data-aos="fade-up"] { + animation: fadeInUp 0.6s ease-out forwards; +} + +.division-card:hover { + transform: translateY(-10px) scale(1.02); + border-color: rgba(0, 183, 255, 0.5); + box-shadow: 0 20px 40px rgba(0, 234, 255, 0.2); +} + +.division-icon { + display: flex; + align-items: start; + margin-bottom: 1.5rem; + justify-content: left; + transition: transform 0.3s; +} + +.icon-blue { + background: linear-gradient(135deg, #3b82f6 0%, #00ffaa 100%); +} + +.icon-purple { + background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); +} + +.icon-green { + background: linear-gradient(135deg, #10b981 0%, #059669 100%); +} + +.division-name { + font-size: 2rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +.division-tagline { + font-weight: 600; + margin-bottom: 1rem; +} + +.tagline-core { color: #3b99f6; } +.tagline-flex { color: #00ffaa; } +.tagline-mind { color: #ad8dfa; } + +.division-description { + color: var(--text-secondary); + margin-bottom: 1.5rem; + line-height: 1.7; +} + +.division-features { + list-style: none; + margin-bottom: 1.5rem; +} + +.division-features li { + color: var(--text-secondary); + font-size: 0.875rem; + padding: 0.5rem 0; + display: flex; + align-items: center; +} + +.division-features li::before { + content: ''; + width: 6px; + height: 6px; + background: var(--primary-color); + border-radius: 50%; + margin-right: 0.75rem; + flex-shrink: 0; +} + +.division-btn { + width: 100%; + padding: 0.75rem; + border: 1px solid rgba(0, 204, 255, 0.556); + border-radius: 8px; + background: transparent; + color: var(--text-primary); + text-decoration: none; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all 0.3s; +} + +.division-btn:hover { + background: rgba(0, 110, 255, 0.1); + border-color: var(--primary-color); +} + +.division-btn svg { + transition: transform 0.3s; +} + +.division-btn:hover svg { + transform: translateX(4px); +} + +/* ============================================================ + Custom Development Section + ============================================================ */ +.custom-dev-card { + background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); + border: 1px solid rgba(46, 170, 247, 0.3); + border-radius: 24px; + padding: 3rem; + backdrop-filter: blur(10px); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: center; +} + +.custom-dev-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--primary-color); + font-weight: 700; + text-transform: uppercase; + font-size: 0.875rem; + letter-spacing: 0.05em; + margin-bottom: 1.5rem; +} + +.custom-dev-badge svg { + width: 24px; + height: 24px; +} + +.custom-dev-title { + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 900; + margin-bottom: 1.5rem; + letter-spacing: -0.02em; +} + +.custom-dev-intro { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 1rem; + line-height: 1.6; +} + +.custom-dev-text { + color: var(--text-muted); + margin-bottom: 2rem; + line-height: 1.7; +} + +.custom-dev-features { + list-style: none; + margin-bottom: 2rem; +} + +.custom-dev-features li { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text-secondary); + padding: 0.75rem 0; +} + +.custom-dev-features li svg { + width: 24px; + height: 24px; + padding: 4px; + background: linear-gradient(135deg, #1949b2 0%, #3b82f6 100%); + border-radius: 6px; + flex-shrink: 0; +} + +.custom-dev-visual { + position: relative; +} + +.code-visual { + background: linear-gradient(to bottom, var(--bg-dark-alt), var(--bg-darker)); + border: 1px solid rgba(0, 234, 255, 0.3); + border-radius: 16px; + padding: 2rem; +} + +.code-line { + height: 16px; + border-radius: 4px; + margin-bottom: 1rem; + animation: pulse 2s ease-in-out infinite; +} + +.line-1 { + background: linear-gradient(90deg, #00ffaa 0%, #3b82f6 100%); + width: 75%; +} + +.line-2 { + background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%); + width: 50%; + animation-delay: 0.15s; +} + +.line-3 { + background: linear-gradient(90deg, #10b981 0%, #059669 100%); + width: 85%; + animation-delay: 0.3s; +} + +.code-blocks { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin: 1rem 0; +} + +.code-block { + width: 100%; + height: 96px; + margin-bottom: 12px; + border-radius: 8px; + border: 1px solid rgba(0, 255, 170, 0.3); +} + +/* ===== BLOCK 1 - Binary Animation ===== */ +.block-1 { + background: rgba(0, 0, 0, 0.4); + border-radius: 8px; + overflow: hidden; + padding: 10px; +} + +.binary-container { + display: flex; + flex-direction: column; + gap: 12px; + height: 100%; + justify-content: center; +} + +.binary-line { + font-family: 'Space Grotesk', monospace; + font-size: 12px; + color: #0ff; + text-shadow: 0 0 4px #0ff; + white-space: nowrap; + letter-spacing: 2px; +} + +.binary-line:nth-child(odd) { + animation: scrollRight 8s linear infinite; +} + +.binary-line:nth-child(even) { + animation: scrollLeft 8s linear infinite; +} + +@keyframes scrollLeft { + 0% { transform: translateX(0%); } + 100% { transform: translateX(-50%); } +} + +@keyframes scrollRight { + 0% { transform: translateX(-50%); } + 100% { transform: translateX(0%); } +} + +/* ===== BLOCK 2 - Puzzle Pieces ===== */ +.block-2 { + background: rgba(0, 0, 0, 0.4); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.puzzle-container { + position: relative; + width: 100%; + height: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px; + padding: 8px; +} + +.puzzle-piece { + background: rgba(100, 150, 255, 0.6); + border-radius: 4px; + transition: all 0.3s ease; + animation: puzzleCycle 6s ease-in-out infinite; + box-shadow: 0 0 6px rgba(100, 150, 255, 0.5); +} + +/* Formas de puzzle con mask */ +.piece-1 { + mask: radial-gradient(circle at 0% 0%, transparent 8px, black 8px); + animation-delay: 0s; +} +.piece-2 { + mask: radial-gradient(circle at 100% 0%, transparent 8px, black 8px); + animation-delay: 0.2s; +} +.piece-3 { + mask: radial-gradient(circle at 0% 100%, transparent 8px, black 8px); + animation-delay: 0.4s; +} +.piece-4 { + mask: radial-gradient(circle at 100% 100%, transparent 8px, black 8px); + animation-delay: 0.6s; +} + +@keyframes puzzleCycle { + 0%, 100% { + transform: translate(0, 0) scale(1); + opacity: 0.8; + } + 50% { + transform: translate(calc(20% * var(--dir-x, 1)), calc(20% * var(--dir-y, 1))) scale(0.95); + opacity: 1; + } +} + +/* Ajuste de direcciones individuales */ +.piece-1 { --dir-x: -1; --dir-y: -1; } +.piece-2 { --dir-x: 1; --dir-y: -1; } +.piece-3 { --dir-x: -1; --dir-y: 1; } +.piece-4 { --dir-x: 1; --dir-y: 1; } + +/* ===== BLOCK 3 - Mouse Adjusting UI ===== */ +.block-3 { + background: rgba(0, 0, 0, 0.4); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.ui-adjust { + width: 90%; + display: flex; + flex-direction: column; + gap: 16px; +} + +.slider-track { + position: relative; + height: 4px; + background: rgba(255, 255, 255, 0.2); + border-radius: 4px; + cursor: pointer; +} + +.slider-fill { + position: absolute; + height: 100%; + width: 0%; + background: linear-gradient(90deg, #0ff, #f0f); + border-radius: 4px; + animation: fillMove 4s ease-in-out infinite alternate; +} + +.slider-thumb { + position: absolute; + width: 14px; + height: 14px; + background: white; + border-radius: 50%; + top: 50%; + transform: translate(-50%, -50%); + left: 0%; + animation: thumbMove 4s ease-in-out infinite alternate; + box-shadow: 0 0 6px cyan; +} + +.ui-indicator { + display: flex; + align-items: center; + gap: 12px; +} + +.cursor-dot { + width: 12px; + height: 12px; + background: white; + border-radius: 50%; + animation: cursorGlow 1s infinite alternate; + box-shadow: 0 0 6px white; +} + +.level-bar { + flex: 1; + height: 20px; + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; + overflow: hidden; + position: relative; +} + +.level-bar::after { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 0%; + background: linear-gradient(90deg, #0ff, #f0f); + border-radius: 10px; + animation: levelFill 4s ease-in-out infinite alternate; +} + +@keyframes fillMove { + 0% { width: 0%; } + 100% { width: 100%; } +} + +@keyframes thumbMove { + 0% { left: 0%; } + 100% { left: 100%; } +} + +@keyframes levelFill { + 0% { width: 0%; } + 100% { width: 100%; } +} + +@keyframes cursorGlow { + 0% { opacity: 0.5; transform: scale(0.9); } + 100% { opacity: 1; transform: scale(1.2); } +} + +.visual-glow { + position: absolute; + border-radius: 50%; + filter: blur(60px); + opacity: 0.2; + z-index: -1; +} + +.glow-1 { + width: 96px; + height: 96px; + background: linear-gradient(135deg, #00ffaa, #3b82f6); + top: -1rem; + right: -1rem; +} + +.glow-2 { + width: 128px; + height: 128px; + background: linear-gradient(135deg, #8b5cf6, #ec4899); + bottom: -1rem; + left: -1rem; +} + +/* ============================================================ + Contact Form + ============================================================ */ +.contact-form-container { + background: linear-gradient(to bottom, var(--bg-dark-alt), var(--bg-darker)); + border: 1px solid rgba(0, 225, 255, 0.3); + border-radius: 16px; + padding: 3rem; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + margin-bottom: 1.5rem; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + font-weight: 600; + color: var(--text-secondary); + margin-bottom: 0.5rem; + font-size: 0.875rem; +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + background: var(--bg-dark); + border: 1px solid rgba(0, 225, 255, 0.3); + border-radius: 8px; + padding: 0.875rem 1rem; + color: var(--text-primary); + font-family: inherit; + font-size: 1rem; + transition: all 0.3s; +} + +.form-group select option { + background: var(--bg-dark-alt); + color: var(--text-primary); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(0, 255, 170, 0.1); +} + +.form-group textarea { + resize: vertical; +} +/* ============================================================ + Estilos para VettaMind mejorado (IA + IoT + PYMES) + ============================================================ */ + +/* Sección IA + IoT */ +.ai-iot-section { + padding: 5rem 0; + background: linear-gradient(180deg, rgba(139, 92, 246, 0.03) 0%, rgba(10, 14, 39, 0) 100%); + position: relative; + z-index: 10; +} + +.ai-iot-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.ai-iot-card { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.6), rgba(15, 18, 41, 0.6)); + border: 1px solid rgba(139, 92, 246, 0.2); + border-radius: 20px; + padding: 2rem; + transition: all 0.3s ease; +} + +.ai-iot-card:hover { + transform: translateY(-5px); + border-color: rgba(139, 92, 246, 0.5); + box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1); +} + +.ai-iot-icon { + width: 60px; + height: 60px; + background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); + border: 1px solid rgba(139, 92, 246, 0.3); + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: #a78bfa; + transition: all 0.3s; +} + +.ai-iot-card:hover .ai-iot-icon { + transform: scale(1.05); + background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.1)); +} + +.ai-iot-card h3 { + font-size: 1.3rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.ai-iot-card p { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 1rem; +} + +.impact-badge { + display: inline-block; + background: rgba(139, 92, 246, 0.15); + border: 1px solid rgba(139, 92, 246, 0.3); + border-radius: 20px; + padding: 0.25rem 0.8rem; + font-size: 0.75rem; + font-weight: 600; + color: #a78bfa; +} + +/* Sección IA para PYMES */ +.ia-pymes-section { + padding: 5rem 0; + position: relative; + z-index: 10; +} + +.pymes-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.pyme-card { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.5), rgba(15, 18, 41, 0.5)); + border: 1px solid rgba(139, 92, 246, 0.15); + border-radius: 20px; + padding: 2rem; + transition: all 0.3s ease; +} + +.pyme-card:hover { + transform: translateY(-5px); + border-color: rgba(139, 92, 246, 0.4); + box-shadow: 0 10px 30px rgba(139, 92, 246, 0.08); +} + +.pyme-icon { + width: 50px; + height: 50px; + background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); + border: 1px solid rgba(139, 92, 246, 0.3); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: #a78bfa; +} + +.pyme-card h3 { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.pyme-card p { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 0.75rem; + font-size: 0.9rem; +} + +.pyme-card strong { + color: #a78bfa; +} + +/* Sección Beneficios IA */ +.benefits-ia-section { + padding: 4rem 0; + background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(10, 14, 39, 0)); + position: relative; + z-index: 10; +} + +.benefits-ia-header { + text-align: center; + margin-bottom: 3rem; +} + +.benefits-ia-header h2 { + font-size: clamp(1.8rem, 4vw, 2.5rem); + font-weight: 800; + margin-bottom: 0.5rem; +} + +.benefits-ia-header p { + color: var(--text-secondary); +} + +.benefits-ia-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + text-align: center; +} + +.benefit-ia-item { + padding: 1.5rem; +} + +.benefit-ia-number { + font-size: 2.5rem; + font-weight: 900; + background: linear-gradient(135deg, #a78bfa, #8b5cf6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 0.5rem; +} + +.benefit-ia-item p { + color: var(--text-secondary); + font-size: 0.9rem; +} + +/* Back link mind color */ +.back-link--mind { + color: #a78bfa; +} + +/* Responsive */ +@media (max-width: 768px) { + .ai-iot-grid { + grid-template-columns: 1fr; + } + + .pymes-grid { + grid-template-columns: 1fr; + } + + .benefits-ia-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .benefit-ia-number { + font-size: 2rem; + } +} + +@media (max-width: 480px) { + .benefits-ia-grid { + grid-template-columns: 1fr; + } + + .pyme-card { + padding: 1.5rem; + } +} + +/* ============================================================ + Footer + ============================================================ */ +.footer { + border-top: 1px solid var(--border-color); + padding: 3rem 0; + position: relative; + z-index: 10; +} + +.footer-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-logo { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.footer-logo-icon { + display: flex; + align-items: center; + justify-content: center; +} + +.footer-logo-icon img { + width: 150px; + height: auto; +} + +.footer-logo span { + font-size: 1.25rem; + font-weight: 900; +} + +.footer-description { + color: var(--text-muted); + font-size: 0.875rem; +} + +.footer-column h4 { + color: var(--primary-color); + font-weight: 700; + margin-bottom: 1rem; +} + +.footer-links, +.footer-contact { + list-style: none; +} + +.footer-links li, +.footer-contact li { + margin-bottom: 0.5rem; +} + +.footer-links a { + color: var(--text-muted); + text-decoration: none; + font-size: 0.875rem; + transition: color 0.3s; +} + +.footer-links a:hover { + color: var(--primary-color); +} + +.footer-contact li { + color: var(--text-muted); + font-size: 0.875rem; +} + +.footer-contact a { + color: var(--text-muted); + text-decoration: none; + font-size: 0.875rem; + transition: all 0.3s ease; + display: inline-block; +} + +.footer-contact a:hover { + color: var(--primary-color); + transform: translateX(3px); +} + +.footer-contact a:active, +.footer-contact a:visited { + color: var(--text-muted); +} + +.footer-bottom { + border-top: 1px solid var(--border-color); + padding-top: 2rem; + text-align: center; +} + +.footer-bottom p { + color: var(--text-muted); + font-size: 0.875rem; +} + +/* ============================================================ + Subpage — Common Layout + ============================================================ */ + +/* Hero area for subpages */ +.subpage-hero { + min-height: 60vh; + display: flex; + align-items: center; + padding-top: 64px; + position: relative; + z-index: 10; +} + +/* Back navigation link */ +.back-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--primary-color); + text-decoration: none; + margin-bottom: 2rem; + margin-top: 2rem; + font-weight: 600; + transition: all 0.3s; +} + +.back-link:hover { + transform: translateX(-5px); +} + +/* Override color per division */ +.back-link--flex { color: #25e99e; } +.back-link--mind { color: #a78bfa; } + +/* Subpage icon banner */ +.subpage-icon { + margin-bottom: 2.5rem; + margin-top: 1rem; +} + +.subpage-icon img { + width: 500px; + max-width: 100%; + height: auto; +} + +/* Subpage hero text */ +.subpage-lead { + font-size: 1.5rem; + color: var(--text-secondary); + max-width: 800px; + margin-bottom: 2rem; +} + +.subpage-body { + color: var(--text-muted); + max-width: 800px; + line-height: 1.8; + font-size: 1.1rem; +} + +/* ============================================================ + Feature Cards Grid (Subpages) + ============================================================ */ +.features-section { + padding: 4rem 0; + position: relative; + z-index: 10; +} + +.features-section-title { + font-size: 3rem; + font-weight: 900; + margin-bottom: 1rem; + text-align: center; +} + +.features-section-subtitle { + text-align: center; + color: var(--text-secondary); + margin-bottom: 3rem; + font-size: 1.2rem; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +/* Base feature card */ +.feature-item { + background: linear-gradient(to bottom, var(--bg-dark-alt), var(--bg-darker)); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 2rem; + transition: all 0.3s; +} + +.feature-item:hover { + transform: translateY(-5px); +} + +.feature-item h3 { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.feature-item p { + color: var(--text-secondary); + line-height: 1.7; +} + +/* VettaCore — blue accent */ +.feature-item--core { + border-color: rgba(59, 130, 246, 0.2); +} + +.feature-item--core:hover { + border-color: rgba(59, 130, 246, 0.5); + box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1); +} + +.feature-item--core h3 { + background: linear-gradient(135deg, #3b82f6 0%, #544dda 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* VettaFlex — green accent */ +.feature-item--flex { + border-color: rgba(8, 138, 79, 0.3); +} + +.feature-item--flex:hover { + border-color: rgba(8, 138, 79, 0.6); + box-shadow: 0 10px 30px rgba(8, 138, 79, 0.1); +} + +.feature-item--flex h3 { + background: linear-gradient(135deg, #5cf6b1 0%, #078136 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* VettaMind — purple accent */ +.feature-item--mind { + border-color: rgba(139, 92, 246, 0.2); +} + +.feature-item--mind:hover { + border-color: rgba(139, 92, 246, 0.5); + box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1); +} + +.feature-item--mind h3 { + background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +/* ============================================================ + Estilos para VettaFlex mejorado (IoT + Automation) + ============================================================ */ + +/* Use Cases Grid */ +.iot-automation-section { + padding: 5rem 0; + background: linear-gradient(180deg, rgba(10, 14, 39, 0.3) 0%, rgba(16, 185, 129, 0.05) 100%); + position: relative; + z-index: 10; +} + +.use-cases-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.use-case-card { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.6), rgba(15, 18, 41, 0.6)); + border: 1px solid rgba(16, 185, 129, 0.2); + border-radius: 16px; + padding: 1.8rem; + transition: all 0.3s ease; + backdrop-filter: blur(8px); +} + +.use-case-card:hover { + transform: translateY(-5px); + border-color: rgba(16, 185, 129, 0.5); + box-shadow: 0 10px 30px rgba(16, 185, 129, 0.1); +} + +.use-case-icon { + width: 60px; + height: 60px; + background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)); + border: 1px solid rgba(16, 185, 129, 0.3); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: #25e99e; + transition: all 0.3s; +} + +.use-case-card:hover .use-case-icon { + transform: scale(1.05); + background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1)); +} + +.use-case-card h3 { + font-size: 1.3rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.use-case-card p { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 1.2rem; +} + +.tech-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.tech-tags span { + background: rgba(16, 185, 129, 0.15); + border: 1px solid rgba(16, 185, 129, 0.3); + border-radius: 20px; + padding: 0.25rem 0.8rem; + font-size: 0.75rem; + font-weight: 500; + color: #25e99e; +} + +/* Arquitectura IoT Section */ +.iot-architecture { + padding: 5rem 0; + position: relative; + z-index: 10; +} + +.architecture-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: center; +} + +.architecture-title { + font-size: clamp(1.8rem, 4vw, 2.5rem); + font-weight: 800; + margin-bottom: 1.5rem; + letter-spacing: -0.02em; +} + +.architecture-description { + color: var(--text-secondary); + line-height: 1.7; + margin-bottom: 2rem; +} + +.architecture-stack { + margin-bottom: 2rem; +} + +.stack-item { + margin-bottom: 1.5rem; + padding-left: 1rem; + border-left: 2px solid rgba(16, 185, 129, 0.5); +} + +.stack-item strong { + display: block; + color: #25e99e; + font-size: 1rem; + margin-bottom: 0.3rem; +} + +.stack-item p { + color: var(--text-muted); + font-size: 0.9rem; + line-height: 1.5; +} + +.architecture-visual { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(10, 14, 39, 0.5)); + border: 1px solid rgba(16, 185, 129, 0.2); + border-radius: 24px; + padding: 2rem; + min-height: 400px; + position: relative; +} + +.iot-visual { + position: relative; + width: 100%; + height: 100%; + min-height: 350px; +} + +.iot-node { + position: absolute; + width: 60px; + height: 60px; + background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05)); + border: 2px solid #25e99e; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + animation: pulse 2s infinite; +} + +.iot-node::before { + content: ''; + width: 10px; + height: 10px; + background: #25e99e; + border-radius: 50%; + box-shadow: 0 0 10px #25e99e; +} + +.node-1 { top: 10%; left: 10%; animation-delay: 0s; } +.node-2 { top: 60%; left: 20%; animation-delay: 0.5s; } +.node-3 { top: 30%; left: 70%; animation-delay: 1s; } +.node-4 { top: 70%; left: 70%; animation-delay: 1.5s; } + +.iot-connections { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + repeating-linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0px, rgba(16, 185, 129, 0.2) 1px, transparent 1px, transparent 20px), + repeating-linear-gradient(0deg, rgba(16, 185, 129, 0.2) 0px, rgba(16, 185, 129, 0.2) 1px, transparent 1px, transparent 20px); + pointer-events: none; +} + +/* Beneficios Section */ +.benefits-section { + padding: 5rem 0; + background: linear-gradient(180deg, rgba(16, 185, 129, 0.02) 0%, rgba(10, 14, 39, 0) 100%); +} + +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.benefit-item { + text-align: center; + padding: 2rem; + background: linear-gradient(135deg, rgba(26, 31, 58, 0.4), rgba(15, 18, 41, 0.4)); + border: 1px solid rgba(16, 185, 129, 0.15); + border-radius: 16px; + transition: all 0.3s; +} + +.benefit-item:hover { + border-color: rgba(16, 185, 129, 0.4); + transform: translateY(-5px); +} + +.benefit-number { + font-size: 2.5rem; + font-weight: 900; + background: linear-gradient(135deg, #25e99e, #087651); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 1rem; +} + +.benefit-item h3 { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: 0.8rem; + color: var(--text-primary); +} + +.benefit-item p { + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.6; +} + +/* Responsive */ +@media (max-width: 768px) { + .use-cases-grid { + grid-template-columns: 1fr; + } + + .architecture-content { + grid-template-columns: 1fr; + } + + .architecture-visual { + min-height: 300px; + order: -1; + } + + .benefits-grid { + grid-template-columns: 1fr; + } + + .iot-node { + width: 45px; + height: 45px; + } +} +/* ============================================================ + Estilos para VettaCore (Redes y Servidores) + ============================================================ */ + +/* Certifications Banner */ +.certifications-section { + padding: 2rem 0 0 0; + position: relative; + z-index: 10; +} + +.cert-banner { + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(26, 31, 58, 0.5)); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 60px; + padding: 1rem 2rem; + backdrop-filter: blur(10px); +} + +.cert-item { + display: flex; + align-items: center; + gap: 0.75rem; + color: #3b82f6; + font-weight: 600; + font-size: 0.9rem; +} + +.cert-item svg { + width: 24px; + height: 24px; +} + +/* Infra Solutions Grid */ +.infra-solutions { + padding: 5rem 0; + background: linear-gradient(180deg, rgba(10, 14, 39, 0.3) 0%, rgba(59, 130, 246, 0.03) 100%); + position: relative; + z-index: 10; +} + +.solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.solution-card { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.6), rgba(15, 18, 41, 0.6)); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 16px; + padding: 2rem; + transition: all 0.3s ease; + backdrop-filter: blur(8px); + text-align: center; +} + +.solution-card:hover { + transform: translateY(-5px); + border-color: rgba(59, 130, 246, 0.5); + box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1); +} + +.solution-icon { + width: 70px; + height: 70px; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)); + border: 1px solid rgba(59, 130, 246, 0.3); + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + color: #3b82f6; + transition: all 0.3s; +} + +.solution-card:hover .solution-icon { + transform: scale(1.05); + background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1)); +} + +.solution-card h3 { + font-size: 1.3rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.solution-card p { + color: var(--text-secondary); + line-height: 1.6; + font-size: 0.95rem; +} + +/* Tech Stack Section */ +.tech-stack-section { + padding: 5rem 0; + position: relative; + z-index: 10; +} + +.tech-stack-header { + text-align: center; + margin-bottom: 3rem; +} + +.tech-stack-header h2 { + font-size: clamp(1.8rem, 4vw, 2.5rem); + font-weight: 800; + margin-bottom: 0.5rem; +} + +.tech-stack-header p { + color: var(--text-secondary); +} + +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 2rem; +} + +.tech-category { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.4), rgba(15, 18, 41, 0.4)); + border: 1px solid rgba(59, 130, 246, 0.15); + border-radius: 16px; + padding: 1.5rem; + transition: all 0.3s; +} + +.tech-category:hover { + border-color: rgba(59, 130, 246, 0.3); + transform: translateY(-3px); +} + +.tech-category h3 { + font-size: 1.1rem; + font-weight: 700; + color: #3b82f6; + margin-bottom: 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(59, 130, 246, 0.3); +} + +.tech-category ul { + list-style: none; +} + +.tech-category li { + color: var(--text-secondary); + font-size: 0.9rem; + padding: 0.4rem 0; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.tech-category li::before { + content: '▹'; + color: #3b82f6; + font-size: 0.7rem; +} + +/* Benefits Core Section */ +.benefits-section-core { + padding: 3rem 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(10, 14, 39, 0)); + position: relative; + z-index: 10; +} + +.benefits-core-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + text-align: center; +} + +.benefit-core-item { + padding: 1.5rem; +} + +.benefit-core-number { + font-size: 2.5rem; + font-weight: 900; + background: linear-gradient(135deg, #3b82f6, #60a5fa); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 0.5rem; +} + +.benefit-core-item p { + color: var(--text-secondary); + font-size: 0.9rem; +} + +/* Back link core color */ +.back-link--core { + color: #3b82f6; +} + +/* Responsive */ +@media (max-width: 768px) { + .cert-banner { + flex-direction: column; + align-items: center; + border-radius: 24px; + gap: 1rem; + } + + .solutions-grid { + grid-template-columns: 1fr; + } + + .tech-grid { + grid-template-columns: 1fr; + } + + .benefits-core-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } +} + +@media (max-width: 480px) { + .benefits-core-grid { + grid-template-columns: 1fr; + } + + .cert-item { + font-size: 0.8rem; + } +} +/* ============================================================ + Carrusel de Logos - Estilo Minimalista + ============================================================ */ + +.tech-stack-section { + padding: 5rem 0; + position: relative; + z-index: 10; + overflow: hidden; + background: transparent; +} + +.tech-stack-header { + text-align: center; + margin-bottom: 3rem; +} + +.tech-stack-header h2 { + font-size: clamp(1.8rem, 4vw, 2.5rem); + font-weight: 800; + margin-bottom: 0.5rem; +} + +.tech-stack-header p { + color: var(--text-secondary); +} + +/* Carrusel - Sin bordes, sin fondos */ +.logo-carousel { + width: 100%; + overflow: hidden; + position: relative; + margin: 2rem 0; +} + +/* Efecto fade en los bordes (opcional, para mejor experiencia) */ +.logo-carousel::before, +.logo-carousel::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + width: 80px; + z-index: 2; + pointer-events: none; +} + +/*.logo-carousel::before { + left: 0; + background: linear-gradient(to right, #0a0e27, transparent); +} + +.logo-carousel::after { + right: 0; + background: linear-gradient(to left, #0a0e27, transparent); +}*/ + +.logo-track { + display: flex; + gap: 3rem; + animation: scrollLogos 30s linear infinite; + width: fit-content; + align-items: center; +} + +.logo-track:hover { + animation-play-state: paused; +} + +/* Logo item - Solo la imagen y texto, sin marcos */ +.logo-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.logo-item img { + width: 50px; + height: 50px; + object-fit: contain; + filter: brightness(0) invert(1); + opacity: 0.6; + transition: all 0.3s ease; +} + +.logo-item:hover img { + opacity: 1; + transform: scale(1.1); + filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(59, 130, 246, 0.5)); +} + +.logo-item span { + font-size: 0.7rem; + font-weight: 500; + color: var(--text-muted); + text-align: center; + transition: color 0.3s; + letter-spacing: 0.5px; +} + +.logo-item:hover span { + color: #3b82f6; +} + +/* Animación del scroll */ +@keyframes scrollLogos { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +/* Responsive */ +@media (max-width: 768px) { + .logo-track { + gap: 2rem; + } + + .logo-item img { + width: 40px; + height: 40px; + } + + .logo-item span { + font-size: 0.6rem; + } + + .logo-carousel::before, + .logo-carousel::after { + width: 40px; + } +} + +@media (max-width: 480px) { + .logo-track { + gap: 1.5rem; + } + + .logo-item img { + width: 32px; + height: 32px; + } + + .logo-item span { + font-size: 0.55rem; + } +} + +/* ============================================================ + Estilos para la Sección IoT + ============================================================ */ +.iot-solutions { + background: linear-gradient(180deg, rgba(10, 14, 39, 0.5) 0%, rgba(0, 20, 40, 0.3) 100%); + padding: 6rem 0; + position: relative; + z-index: 10; +} + +.iot-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 4rem; +} + +.iot-card { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.7) 0%, rgba(15, 18, 41, 0.7) 100%); + border: 1px solid rgba(0, 255, 170, 0.2); + border-radius: 20px; + padding: 2rem; + transition: all 0.3s ease; + backdrop-filter: blur(8px); + text-align: center; +} + +.iot-card:hover { + transform: translateY(-8px); + border-color: rgba(0, 255, 170, 0.6); + box-shadow: 0 20px 35px -15px rgba(0, 255, 170, 0.2); + background: linear-gradient(135deg, rgba(26, 31, 58, 0.9) 0%, rgba(15, 18, 41, 0.9) 100%); +} + +.iot-icon { + width: 70px; + height: 70px; + background: linear-gradient(135deg, rgba(0, 255, 170, 0.15), rgba(59, 130, 246, 0.15)); + border: 1px solid rgba(0, 255, 170, 0.3); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + color: #00ffaa; + transition: all 0.3s ease; +} + +.iot-card:hover .iot-icon { + transform: scale(1.1); + background: linear-gradient(135deg, rgba(0, 255, 170, 0.25), rgba(59, 130, 246, 0.25)); + box-shadow: 0 0 15px rgba(0, 255, 170, 0.4); +} + +.iot-card h3 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, #ffffff, #a0c0ff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.iot-card p { + color: var(--text-secondary); + font-size: 0.95rem; + line-height: 1.6; +} + +.iot-cta { + text-align: center; + margin-top: 2rem; + padding: 2rem; + border-top: 1px solid rgba(0, 255, 170, 0.2); +} + +.iot-cta-text { + font-size: 1.4rem; + font-weight: 600; + margin-bottom: 1.5rem; + color: var(--text-primary); +} + +/* Ajustes responsivos para la sección IoT */ +@media (max-width: 768px) { + .iot-grid { + gap: 1.5rem; + } + .iot-card { + padding: 1.5rem; + } + .iot-cta-text { + font-size: 1.2rem; + } +} + +/* ============================================================ + CTA Banner (Subpages) + ============================================================ */ +.cta-section { + padding: 4rem 0; + position: relative; + z-index: 10; +} + +.cta-box { + border-radius: 24px; + padding: 4rem 2rem; + text-align: center; +} + +.cta-box--core { + background: linear-gradient(135deg, rgba(0, 89, 255, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); + border: 1px solid rgba(59, 130, 246, 0.3); +} + +.cta-box--flex { + background: linear-gradient(135deg, rgba(92, 246, 187, 0.1) 0%, rgba(14, 91, 100, 0.1) 100%); + border: 1px solid rgba(37, 233, 158, 0.3); +} + +.cta-box--mind { + background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); + border: 1px solid rgba(139, 92, 246, 0.3); +} + +.cta-box h2 { + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 900; + margin-bottom: 1rem; +} + +.cta-box p { + color: var(--text-secondary); + margin-bottom: 2rem; + font-size: 1.2rem; +} + +/* ============================================================ + Animations + ============================================================ */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulse { + 0%, 100% { opacity: 0.6; } + 50% { opacity: 1; } +} + +/* ============================================================ + Responsive Design + ============================================================ */ +@media (max-width: 768px) { + .nav-links { + position: fixed; + top: 64px; + left: 0; + right: 0; + background: var(--bg-dark-alt); + flex-direction: column; + padding: 2rem; + gap: 1rem; + border-top: 1px solid var(--border-color); + transform: translateX(-100%); + transition: transform 0.3s; + } + + .nav-links.active { + transform: translateX(0); + } + + .mobile-menu-btn { + display: flex; + } + + .divisions-grid { + grid-template-columns: 1fr; + } + + .custom-dev-card { + grid-template-columns: 1fr; + padding: 2rem; + } + + .form-row { + grid-template-columns: 1fr; + } + + .footer-grid { + grid-template-columns: 1fr; + } + + .hero-buttons { + flex-direction: column; + } + + .btn { + width: 100%; + justify-content: center; + } + + .subpage-icon img { + width: 100%; + max-width: 320px; + } + + .features-section-title { + font-size: 2rem; + } + + .cta-box { + padding: 2.5rem 1.5rem; + } +} + +@media (max-width: 480px) { + .container, + .container-small { + padding: 0 1rem; + } + + .custom-dev-card { + padding: 1.5rem; + } + + .contact-form-container { + padding: 1.5rem; + } + + .subpage-lead { + font-size: 1.2rem; + } +} + +/* ============================================================ + Contact Page — Full Layout + ============================================================ */ + +/* Page hero */ +.contact-page-hero { + min-height: 40vh; + display: flex; + align-items: center; + padding-top: 64px; + position: relative; + z-index: 10; + text-align: center; +} + +.contact-page-hero .container { + width: 100%; +} + +.contact-page-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(59, 130, 246, 0.1); + border: 1px solid rgba(59, 130, 246, 0.3); + color: var(--primary-color); + font-weight: 700; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.08em; + padding: 0.4rem 1rem; + border-radius: 100px; + margin-bottom: 1.5rem; +} + +/* Info cards row */ +.contact-info-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1.5rem; + margin-bottom: 4rem; +} + +.contact-info-card { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.6), rgba(15, 18, 41, 0.6)); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 2rem 1.5rem; + text-align: center; + transition: all 0.3s; + backdrop-filter: blur(12px); +} + +.contact-info-card:hover { + border-color: rgba(59, 130, 246, 0.4); + transform: translateY(-4px); + box-shadow: 0 10px 30px rgba(0, 179, 255, 0.1); +} + +.contact-info-card .card-icon { + width: 52px; + height: 52px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.25rem; + background: linear-gradient(135deg, rgba(0, 234, 255, 0.15), rgba(59, 130, 246, 0.15)); + border: 1px solid var(--border-color); + color: var(--primary-color); + transition: all 0.3s; +} + +.contact-info-card:hover .card-icon { + background: linear-gradient(135deg, rgba(0, 234, 255, 0.25), rgba(59, 130, 246, 0.25)); + transform: scale(1.1); +} + +.contact-info-card h3 { + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-muted); + margin-bottom: 0.5rem; +} + +.contact-info-card p, +.contact-info-card a { + color: var(--text-primary); + font-weight: 500; + font-size: 0.95rem; + text-decoration: none; + line-height: 1.5; + transition: color 0.2s; + display: block; +} + +.contact-info-card a:hover { + color: var(--primary-color); +} + +/* Two-column layout: form + sidebar */ +.contact-main-grid { + display: grid; + grid-template-columns: 1fr 380px; + gap: 2.5rem; + align-items: start; +} + +/* Big form */ +.contact-big-form-container { + background: linear-gradient(to bottom, var(--bg-dark-alt), var(--bg-darker)); + border: 1px solid rgba(0, 225, 255, 0.3); + border-radius: 20px; + padding: 2.5rem; +} + +.contact-big-form-container h2 { + font-size: 1.75rem; + font-weight: 800; + margin-bottom: 0.5rem; +} + +.contact-big-form-container > p { + color: var(--text-secondary); + margin-bottom: 2rem; + font-size: 0.95rem; +} + +/* Sidebar */ +.contact-sidebar { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.sidebar-card { + background: linear-gradient(135deg, rgba(26, 31, 58, 0.6), rgba(15, 18, 41, 0.6)); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 1.75rem; + backdrop-filter: blur(12px); +} + +.sidebar-card h3 { + font-size: 1.05rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.sidebar-card .sidebar-item { + display: flex; + align-items: flex-start; + gap: 0.75rem; + margin-bottom: 1rem; + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.5; +} + +.sidebar-card .sidebar-item:last-child { + margin-bottom: 0; +} + +.sidebar-item-icon { + width: 32px; + height: 32px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: linear-gradient(135deg, rgba(0, 234, 255, 0.12), rgba(59, 130, 246, 0.12)); + border: 1px solid var(--border-color); + color: var(--primary-color); +} + +/* Social links row */ +.social-links { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; +} + +.social-link { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-secondary); + text-decoration: none; + font-size: 0.85rem; + font-weight: 500; + transition: all 0.2s; +} + +.social-link:hover { + border-color: var(--primary-color); + color: var(--text-primary); + background: rgba(59, 130, 246, 0.08); +} + +/* Divisions quick nav */ +.divisions-quick-nav { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.division-quick-link { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.65rem 0.85rem; + border-radius: 10px; + color: var(--text-secondary); + text-decoration: none; + font-size: 0.9rem; + font-weight: 500; + transition: all 0.2s; + border: 1px solid transparent; +} + +.division-quick-link:hover { + background: rgba(59, 130, 246, 0.08); + border-color: var(--border-color); + color: var(--text-primary); +} + +.division-quick-link .dql-dot { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} + +/* Form success message */ +.form-success { + display: none; + text-align: center; + padding: 3rem 2rem; +} + +.form-success.visible { + display: block; +} + +.form-success .success-icon { + width: 64px; + height: 64px; + background: linear-gradient(135deg, #00ffaa, #3b82f6); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; +} + +.form-success h3 { + font-size: 1.5rem; + font-weight: 800; + margin-bottom: 0.75rem; +} + +.form-success p { + color: var(--text-secondary); +} +/* Estilos para mensajes del formulario */ +.form-success, +.form-error { + margin-bottom: 2rem; + border-radius: 12px; + background: white; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + animation: slideIn 0.3s ease-out; +} + +.form-success { + border-left: 4px solid #10b981; +} + +.form-error { + border-left: 4px solid #ef4444; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +/* ============================================================ + Botón Flotante de WhatsApp con Transición Fluida + ============================================================ */ + +.whatsapp-float { + position: fixed; + bottom: 30px; + right: 30px; + z-index: 1000; + pointer-events: none; /* Asegura que el contenedor no intercepte clics accidentalmente */ +} + +.whatsapp-float .whatsapp-button { + pointer-events: all; +} + +/* Estado inicial - dentro del hero */ +.whatsapp-float.large { + bottom: 30px; + right: 30px; + top: auto; +} + +.whatsapp-float.large .whatsapp-button { + width: 65px; + height: 65px; + border-radius: 50%; + transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); +} + +.whatsapp-float.large .whatsapp-icon { + width: 65px; + height: 65px; + margin: 0; + transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); +} + +/* Estado sticky - fuera del hero */ +.whatsapp-float.small { + bottom: auto; + top: 80px; + right: 30px; +} + +.whatsapp-float.small .whatsapp-button { + width: 48px; + height: 48px; + border-radius: 50%; + transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); +} + +.whatsapp-float.small .whatsapp-icon { + width: 48px; + height: 48px; + margin: 0; + transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); +} + +/* Botón base */ +.whatsapp-button { + display: flex; + align-items: center; + justify-content: center; + background: transparent; + text-decoration: none; + position: relative; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); +} + + + +/* Tooltip */ +.whatsapp-tooltip { + position: absolute; + right: 70px; + background: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(10px); + color: linear-gradient(135deg, #00ffaa, #3b82f6); + padding: 8px 15px; + border-radius: 50px; + font-size: 14px; + font-weight: 500; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + pointer-events: none; + font-family: 'Space Grotesk', sans-serif; + letter-spacing: 0.3px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); +} + +.whatsapp-tooltip::after { + content: ''; + position: absolute; + right: -6px; + top: 50%; + transform: translateY(-50%); + border-width: 6px 0 6px 6px; + border-style: solid; + border-color: transparent transparent transparent rgba(0, 0, 0, 0.9); +} + +.whatsapp-button:hover .whatsapp-tooltip { + opacity: 1; + visibility: visible; + right: 60px; +} + +/* Efecto hover del botón */ +.whatsapp-button:hover { + transform: scale(1.08) rotate(5deg); + box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5); +} + +/* Animación de pulso solo en estado grande (dentro del hero) */ +.whatsapp-float.large .whatsapp-button { + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); + } + 70% { + box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); + } +} + +/* Efecto de entrada suave al cargar la página */ +.whatsapp-float.initial { + animation: floatIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1); +} + +@keyframes floatIn { + from { + opacity: 0; + transform: translateY(30px) scale(0.8); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Efecto de "rebote" al cambiar de posición -> ahora Teletransportación */ +.whatsapp-float.teleporting-out { + animation: teleportOut 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; +} +.whatsapp-float.teleporting-in { + animation: teleportIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards; +} + +@keyframes teleportOut { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(0) rotate(-45deg); + opacity: 0; + } +} + +@keyframes teleportIn { + 0% { + transform: scale(0) rotate(45deg); + opacity: 0; + } + 50% { + transform: scale(1.1) rotate(-10deg); + opacity: 1; + } + 100% { + transform: scale(1) rotate(0); + opacity: 1; + } +} +/* Responsive */ +@media (max-width: 900px) { + .contact-main-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .contact-info-grid { + grid-template-columns: 1fr 1fr; + } + .whatsapp-float { + z-index: 9999; + } + + .whatsapp-float.large .whatsapp-button { + width: 55px; + height: 55px; + } + + .whatsapp-float.large .whatsapp-icon { + width: 55px; + height: 55px; + margin: 0; + } + + .whatsapp-float.small { + top: auto !important; + bottom: 20px; + right: 20px; + } + + .whatsapp-float.large { + bottom: 20px; + right: 20px; + } + + .whatsapp-float.small .whatsapp-button { + width: 44px; + height: 44px; + } + + .whatsapp-float.small .whatsapp-icon { + width: 44px; + height: 44px; + margin: 0; + } + + .whatsapp-tooltip { + display: none; + } +} + +@media (max-width: 480px) { + .contact-info-grid { + grid-template-columns: 1fr; + } + + .contact-big-form-container { + padding: 1.5rem; + } + .whatsapp-float.small, .whatsapp-float.large { + bottom: 15px; + right: 15px; + } +} + +/* Form error message */ +.form-error { + display: none; + text-align: center; + padding: 3rem 2rem; +} + +.form-error.visible { + display: block; +} + +.form-error .error-icon { + width: 64px; + height: 64px; + background: linear-gradient(135deg, #ef4444, #dc2626); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; +} + +.form-error h3 { + font-size: 1.5rem; + font-weight: 800; + margin-bottom: 0.75rem; +} + +.form-error p { + color: var(--text-secondary); +} + +.form-error a { + color: var(--primary-color); + text-decoration: underline; +} + +/* Spinning loader for submit button */ +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file diff --git a/vettacore.html b/vettacore.html new file mode 100644 index 0000000..5b8182f --- /dev/null +++ b/vettacore.html @@ -0,0 +1,419 @@ + + + + + + + + VettaCore - Infraestructura de Redes y Servidores | VettaIO + + + + + + + + + + + + + +
+
+ + + + + Volver al inicio + + +
+ VettaCore +
+ +

+ Infraestructura de redes y servidores — la columna vertebral de tu negocio +

+

+ En VettaCore diseñamos, implementamos y gestionamos infraestructuras tecnológicas robustas. Especialistas en redes on-premise, servidores de alto rendimiento y soluciones de seguridad integral (CCTV, control de acceso). Contamos con certificaciones CCNA y MikroTik que garantizan la calidad de nuestro trabajo. También integramos cloud híbrida cuando tu negocio lo necesita. +

+
+
+ + +
+
+
+
+ + + + Certificación CCNA +
+
+ + + + Certificación MTCNA +
+
+ + + + +10 años de experiencia +
+
+
+
+ + +
+
+

+ Nuestros Servicios +

+

Soluciones integrales de infraestructura on-premise y cloud híbrida

+ +
+
+

Diseño y Cableado Estructurado

+

Diseño e implementación de redes LAN/WAN, cableado estructurado categoría 6/6A, fibra óptica y certificación de instalaciones.

+
+ +
+

Routing & Switching Avanzado

+

Configuración de routers y switches Cisco, MikroTik. VLANs, OSPF, BGP, MPLS y alta disponibilidad. Certificación CCNA y MTCNA.

+
+ +
+

Servidores On-Premise

+

Implementación de servidores físicos (Dell, HP, Lenovo). Virtualización con VMware, Hyper-V o Proxmox. Almacenamiento SAN/NAS y backup local.

+
+ +
+

Seguridad Perimetral y CCTV

+

Firewalls empresariales (Fortinet, Palo Alto, MikroTik). Sistemas de videovigilancia IP, cámaras 4K, NVR, análisis de video y control de acceso biométrico. Instalación y mantenimiento.

+
+ +
+

Cloud Híbrida

+

Integración selectiva con AWS, Azure o Google Cloud. Sincronización de datos, backups en la nube y arquitecturas multi-cloud cuando es necesario.

+
+ +
+

Monitoreo y Gestión Remota

+

Monitoreo 24/7 de tu infraestructura. Alertas proactivas, gestión remota de equipos y resolución de incidentes antes que afecten tu negocio.

+
+ + +
+

Wi-Fi Empresarial

+

Diseño e implementación de redes inalámbricas de alta densidad. Controladores, access points, roaming seamless y autenticación 802.1X.

+
+ + +
+

Disaster Recovery & BCP

+

Planes de continuidad de negocio, backups automatizados (local + cloud), replicación de servidores y recuperación rápida ante fallos.

+
+
+
+
+ + +
+
+
+

Soluciones de Infraestructura

+

Cobertura completa para tu empresa

+
+ +
+
+
+ + + + + +
+

Centro de Datos On-Premise

+

Diseño y construcción de salas de servidores. Climatización, UPS, generadores, PDU y sistemas de extinción de incendios.

+
+ +
+
+ + + + +
+

Redes Industriales

+

Infraestructura para entornos industriales. Switches, fibra óptica, TCP/IP y segmentación OT/IT.

+
+ +
+
+ + + +
+

VPN y Acceso Remoto Seguro

+

Implementación de VPN site-to-site y SSL VPN para teletrabajo. Autenticación multi-factor y políticas de acceso granular.

+
+ +
+
+ + + +
+

Migración a Cloud Híbrida

+

Evaluamos qué debe quedarse on-premise y qué puede ir a la nube. Migraciones seguras sin downtime.

+
+
+
+
+ + +
+
+
+

Tecnologías que dominamos

+

Hardware y software con los que trabajamos diariamente

+
+ + +
+
+ +
+ Cisco logo +
+
+ MikroTik logo +
+
+ Ubiquiti logo +
+
+ Fortinet logo +
+ + +
+ Dell logo +
+
+ HP logo +
+
+ Lenovo logo +
+
+ VMware logo +
+
+ Hyper-V logo +
+
+ Proxmox logo +
+ + +
+ Hikvision logo +
+
+ Dahua logo +
+ + +
+ AWS logo +
+
+ Azure logo +
+
+ Veeam logo +
+
+ Zabbix logo +
+ + + +
+ Cisco logo +
+
+ MikroTik logo +
+
+ Ubiquiti logo +
+
+ Fortinet logo +
+
+
+
+
+ + +
+
+
+
+
+10
+

años de experiencia en infraestructura

+
+
+
99.9%
+

disponibilidad garantizada

+
+
+
24/7
+

monitoreo y soporte

+
+
+
100+
+

clientes satisfechos

+
+
+
+
+ + +
+
+
+

¿Necesitas una infraestructura sólida y confiable?

+

Diseñamos la columna vertebral tecnológica que tu empresa merece

+ + Consultar por tu proyecto + + + + +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/vettaflex.html b/vettaflex.html new file mode 100644 index 0000000..aa87df6 --- /dev/null +++ b/vettaflex.html @@ -0,0 +1,685 @@ + + + + + + + + VettaFlex - Automatización Inteligente e IoT | VettaIO + + + + + + + + + + + + + + +
+
+ + + + + Volver al inicio + + +
+ VettaFlex +
+ +

+ Automatización inteligente que potencia tu productividad conectando procesos digitales y dispositivos IoT +

+

+ 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. Automatizamos tanto tu software como tu hardware. +

+
+
+ + +
+
+

+ Nuestros Servicios +

+

Automatización end-to-end para tu negocio digital e industrial

+ +
+
+

Automatización de Procesos

+

Automatizamos procesos de negocio complejos. Automatización y orquestación de tareas digitales e industriales.

+
+ +
+

API Integration

+

Conectamos tus sistemas y aplicaciones. Integraciones con base da datos y plataformas IoT.

+
+ +
+

Data Pipelines

+

ETL/ELT automatizado, procesamiento de datos en tiempo real desde sensores IoT y data warehousing inteligente.

+
+ +
+

Dispositivos IoT

+

Orquestación de dispositivos IoT: sensores, actuadores, gateways. Gestión remota, actualizaciones OTA y monitoreo en tiempo real.

+
+ +
+

Sistemas de Notificación

+

Sistemas de alertas y notificaciones inteligentes. Email, SMS, Slack, Teams activados por eventos de sensores.

+
+ +
+

Planificación de Tareas

+

Tareas programadas, cron jobs avanzados y procesamiento batch automatizado para lecturas periódicas de sensores.

+
+ +
+

Agentes a Medida

+

Agentes con capacidades específicas para tareas particulares en entornos empresariales. Conocomienta de tus procesos y necesidades.

+
+ +
+

MQTT & Edge Computing

+

Procesamiento de datos en el borde, brokers MQTT, integración con protocolos industriales (Modbus, OPC UA) y análisis en tiempo real.

+
+
+
+
+ + +
+
+
+

Casos de Uso: IoT + IA

+

Cómo conectamos el mundo físico con tu estrategia digital

+
+ +
+ +
+
+ Agricultura Inteligente +
+

Agricultura Inteligente

+
Sistema de Riego Inteligente con IA
+

Solución integral para automatizar y optimizar el riego mediante sensores, datos clímaticos y modelos inteligentes.

+
+
+

+ + Qué incluye +

+
    +
  • Sensores IoT (humedad, pH, temperatura del suelo)
    • +
  • Control automático de bombas y válvulas
    • +
  • Integración con datos meteorológicos
    • +
  • Plataforma web con dashboards en tiempo real
    • +
  • Algoritmos de IA para planificación de riego
    • +
+
+
+

+ + + + Beneficios +

+
    +
  • Ahorro de agua
    • +
  • Optimización del uso de energía
    • +
  • Mejora del rendimiento productivo
    • +
  • Decisiones basadas en datos
    • +
+
+
+
+
Campos AgrícolasInvernaderosCultivos intensivos
+
+ +
+
+ Control de Temperatura +
+

Control de Cadena de Frío

+
Monitoreo de Cámaras Frigoríficas
+

Sistemas de monitoreo continuo para garantizar la calidad de productos refrigerados.

+
+
+

+ + Qué incluye +

+
    +
  • Sensores IoT de temperatura y humedad
    • +
  • Alertas en tiempo real(app, email, sms)
    • +
  • Registro historico de condiciones
    • +
  • Reportes automáticos
    • +
  • IA para detección de anomalias
    • +
+
+
+

+ + + + Beneficios +

+
    +
  • Prevención de pérdidas
    • +
  • Cumplimiento sanitario
    • +
  • Control total 24/7
    • +
  • Trazabilidad completa
    • +
+
+
+
+
CarniceriasFrigoríficosDistribución de alimentos
+
+ +
+
+ Alertas Meteorológicas +
+

Alertas Meteorológicas

+
Monitoreo de Condiciones Climáticas
+

Sistemas de alerta temprana para condiciones climáticas extremas para evitar exposicion de personas.

+
+
+

+ + Qué incluye +

+
    +
  • Semáforos de Alerta Visual (amarillo/naranja/rojo)
    • +
  • Telemtría
    • +
  • Panel centralizado de control
    • +
  • Integración de datos metereológicos en tiempo real
    • +
  • IA para predicción de eventos climáticos
    • +
+
+
+

+ + + + Beneficios +

+
    +
  • Reducción de riesgos
    • +
  • Protección de vidas
    • +
  • Respuesta inmediata ante eventos climáticos
    • +
  • Historial de alertas y análisis
    • +
+
+
+
+
MinerasObras en AlturaCampamentos remotos
+
+ +
+
+ Seguridad Patrimonial +
+

Seguridad Patrimonial

+
Sistema de Rondines Digitales con Evidencia
+

Plataforma para control y auditoría de rondas de seguridad en instalaciones.

+
+
+

+ + Qué incluye +

+
    +
  • Tags NFC / QR en puntos de control
    • +
  • App móvil para guardias
    • +
  • Registro de recorridos en tiempo real
    • +
  • Carga de fotos, observaciones y eventos
    • +
  • Generación automática de reportes
    • +
+
+
+

+ + + + Beneficios +

+
    +
  • Control total de rondas de vigilancia
    • +
  • Evidencia verificable
    • +
  • Mejoras en la gestión de la seguridad
    • +
  • Reducción de errores humanos
    • +
+
+
+
+
FábricasDepósitosParques Industriales
+
+ +
+
+ Control de Temperatura +
+

Gestión de Energía

+
Sistema de Control y Continuidad Energética
+

Solución para garantizar el suministro eléctrico continuo en nodos críticos.

+
+
+

+ + Qué incluye +

+
    +
  • Controlador IoT de energía
    • +
  • Monitoreo de múltiples fuentes de energía
    • +
  • Lógicas automáticas de conmutación
    • +
  • Dashboard en tiempo real
    • +
  • Alertas y registros de eventos
    • +
  • IA para optimización del consumo energético
    • +
+
+
+

+ + + + Beneficios +

+
    +
  • Alta disponibilidad
    • +
  • Reducción de fallas críticas
    • +
  • Optimización energética
    • +
  • Control centralizado
    • +
+
+
+
+
DataCentersInstalaciones IndustrialesInfraestructura Crítica
+
+ +
+
+ Mantenimiento Predictivo +
+

Mantenimiento Predictivo

+
Sistema de Monitoreo y Mantenimiento Inteligente
+

Sistema inteligente para anticipar fallas en equipos industriales mediante monitoreo continuo.

+
+
+

+ + Qué incluye +

+
    +
  • Sensores IoT para monitoreo de estado
    • +
  • Análisis de datos en tiempo real
    • +
  • Modelos predictivos de fallas
    • +
  • Planificación automática de mantenimiento
    • +
  • Dashboard de seguimiento y reportes
    • +
  • Integración con sistemas de gestión de activos
    • +
+
+
+

+ + + + Beneficios +

+
    +
  • Reducción de tiempos de inactividad
    • +
  • Disminución de fallas críticas
    • +
  • Reducción de costos de mantenimiento
    • +
  • Optimización de paradas técnicas
    • +
+
+
+
+
Vehiculos PesadosTalleres MecánicosMotores Industriales
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + Arquitectura IoT +
+

Tu ecosistema IoT completamente automatizado

+

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.

+
+
01. Edge Layer

Sensores, actuadores, gateways y dispositivos IoT con procesamiento local.

+
02. Connectivity

Protocolos MQTT, HTTP, WebSockets, LoRaWAN, Sigfox, 5G, LTE-M.

+
03. Orchestration

Automatización de reglas, workflows, eventos y alertas en tiempo real.

+
04. Integration

Conexión con tu ERP, CRM, dashboards y sistemas legacy mediante APIs.

+
+ Implementar IoT en mi empresa +
+
+
+
+
+
+
+ + +
+
+
+

¿Por qué VettaFlex + IoT?

+

Automatización que transforma datos en acciones

+
+
+
01

Reducción de costos operativos

Automatiza tareas manuales y optimiza recursos con monitoreo inteligente.

+
02

Toma de decisiones en tiempo real

Dashboards y alertas basadas en datos actualizados de tus sensores y sistemas.

+
03

Escalabilidad garantizada

Arquitecturas que crecen contigo, desde decenas hasta miles de dispositivos.

+
04

Integración con tus sistemas actuales

Conectamos IoT con tu ERP, CRM o cualquier software legacy mediante APIs.

+
+
+
+ + + + +
+
+
+

¿Listo para automatizar tu negocio y conectar el mundo físico?

+

Conversemos sobre cómo podemos optimizar tus procesos digitales e industriales

+ + Contactar ahora + + + + +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/vettamind.html b/vettamind.html new file mode 100644 index 0000000..445b8eb --- /dev/null +++ b/vettamind.html @@ -0,0 +1,410 @@ + + + + + + + + VettaMind - Inteligencia Artificial | VettaIO + + + + + + + + + + + + + +
+
+ + + + + Volver al inicio + + +
+ VettaMind +
+ +

+ Inteligencia Artificial que transforma datos en decisiones para industrias y PYMES +

+

+ VettaMind desarrolla soluciones de IA personalizadas que resuelven problemas de negocio reales. + Desde modelos predictivos para fábricas hasta asistentes inteligentes para comercios, + convertimos tus datos en ventajas competitivas concretas. IA accesible, práctica y con resultados medibles. +

+
+
+ + +
+
+

+ Nuestros Servicios +

+

IA práctica y aplicada a tu negocio

+ +
+
+

Machine Learning Custom

+

Desarrollamos modelos de ML personalizados para tus casos de uso. Clasificación, regresión, clustering y series temporales.

+
+ +
+

Natural Language Processing

+

Análisis de sentimientos, chatbots inteligentes, extracción de información y procesamiento de documentos.

+
+ +
+

Computer Vision

+

Detección de objetos, reconocimiento facial, OCR avanzado e inspección visual automatizada.

+
+ +
+

Analisis Predictivo

+

Forecasting de ventas, detección de anomalías, análisis de riesgo y optimización predictiva.

+
+ +
+

Sistemas de Recomendación

+

Algoritmos de recomendación personalizados, filtramos sobrecarga de información para ofrecer al usuario contenido relevante.

+
+ +
+

MLOps & Model Deployment

+

Despliegue, monitoreo y reentrenamiento de modelos en producción. Pipelines automatizados.

+
+ +
+

IA para PYMES

+

Soluciones accesibles y de alto impacto: automatización de respuestas, análisis de ventas, predicción de demanda y optimización de inventario.

+
+ +
+

IoT Analytics

+

Procesamiento inteligente de datos de sensores. Mantenimiento predictivo, detección de anomalías y optimización en tiempo real.

+
+
+
+
+ + +
+
+
+

IA + IoT

+

Cuando los datos del mundo físico encuentran inteligencia artificial

+
+ +
+
+
+ + + + +
+

Mantenimiento Predictivo Industrial

+

Sensores de vibración, temperatura y consumo + algoritmos de ML que predicen fallos antes de que ocurran. Reduce tiempos de inactividad hasta un 50%.

+
Ahorro: 30-50% en mantenimiento
+
+ +
+
+ + + + + + + +
+

Optimización Energética Inteligente

+

Análisis de patrones de consumo y control automático de HVAC, iluminación y equipos. Ahorro energético del 20-40% con modelos predictivos.

+
Ahorro: 20-40% en energía
+
+ +
+
+ + + + + + + + +
+

Control de Calidad Automatizado

+

Cámaras + visión artificial para inspección de productos en línea de producción. Detección de defectos en milisegundos con precisión >99%.

+
Precisión: >99%
+
+ +
+
+ + + +
+

Análisis de Flotas Inteligente

+

GPS + telemetría + ML para optimizar rutas, predecir mantenimiento de vehículos y reducir consumo de combustible hasta un 25%.

+
Ahorro: 15-25% en combustible
+
+
+
+
+ + +
+
+
+

IA para PYMES

+

Soluciones accesibles, prácticas y con ROI medible para negocios de todos los tamaños

+
+ +
+
+
+ + + + +
+

Pequeñas Fábricas / Talleres

+

Problema: Tiempos muertos no planificados, calidad inconsistente.

+

Solución IA: Sensores de bajo costo + modelos predictivos que alertan antes de fallos. Control de calidad con visión artificial desde el celular.

+

Resultado: +30% de productividad, -40% de desperdicios.

+
+ +
+
+ + + +
+

Comercios de Ropa / Retail

+

Problema: Exceso o falta de stock, promociones inefectivas.

+

Solución IA: Predicción de demanda por temporada, recomendación de productos a clientes, optimización de precios dinámicos.

+

Resultado: -25% de inventario ocioso, +20% en ventas cruzadas.

+
+ +
+
+ + + +
+

Empresas de Ventas / Call Center

+

Problema: Tiempo de respuesta lento, leads desaprovechados.

+

Solución IA: Chatbots inteligentes 24/7, scoring de leads predictivo, análisis de sentimientos en llamadas.

+

Resultado: Respuesta instantánea, +35% conversión de leads.

+
+ +
+
+ + + + + +
+

Consultorios / Profesionales

+

Problema: Gestión manual de turnos, recordatorios, seguimiento.

+

Solución IA: Agenda inteligente, recordatorios automáticos personalizados, análisis de satisfacción post-consulta.

+

Resultado: -60% no-show, +25% retención de pacientes.

+
+ +
+
+ + + + +
+

Restaurantes / Gastronomía

+

Problema: Merma de insumos, tiempos de espera largos.

+

Solución IA: Predicción de demanda por hora/día, optimización de inventario, sistema de reservas inteligente.

+

Resultado: -30% merma de alimentos, -40% tiempo de espera.

+
+ +
+
+ + + + + +
+

Logística / Distribución

+

Problema: Rutas ineficientes, entregas tardías.

+

Solución IA: Optimización de rutas en tiempo real, predicción de demoras, asignación dinámica de entregas.

+

Resultado: -25% en costos de transporte, +95% entregas a tiempo.

+
+
+
+
+ + +
+
+
+

¿Por qué implementar IA en tu negocio?

+

Resultados tangibles desde el primer mes

+
+
+
+
+30%
+

Productividad promedio

+
+
+
-40%
+

Reducción de costos operativos

+
+
+
24/7
+

Operación continua

+
+
+
ROI
+

Recuperación en 6-12 meses

+
+
+
+
+ + +
+
+
+

¿Listo para implementar IA en tu negocio?

+

Agendá una consultoría gratuita y descubrí cómo la IA puede transformar tu empresa

+ + Consultar por tu proyecto IA + + + + +
+
+
+ + + + + + + + \ No newline at end of file