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

1107 lines
40 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Política de Privacidad de VettaIO – Conoce cómo protegemos tus datos personales, el uso de cookies y las integraciones con Meta." />
<title>Política de Privacidad | VettaIO</title>
<!-- Google Fonts: Space Grotesk -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<style>
/* ============================================================
RESET Y ESTILOS BASE (copiados de la web principal)
============================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #0b0e1a;
--bg-secondary: #111627;
--text-primary: #eef2ff;
--text-secondary: #a8b3d9;
--accent-cyan: #38d9d9;
--accent-blue: #4f7cff;
--accent-purple: #a78bfa;
--gradient-1: linear-gradient(135deg, #38d9d9 0%, #4f7cff 50%, #a78bfa 100%);
--card-bg: rgba(255, 255, 255, 0.04);
--card-border: rgba(255, 255, 255, 0.06);
--radius: 20px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.text-gradient {
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================================================
PARTICLE CANVAS (fondo)
============================================================ */
#particleCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
/* ============================================================
NAVBAR
============================================================ */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 16px 0;
background: rgba(11, 14, 26, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.3s ease;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 48px;
width: auto;
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-link {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-secondary);
transition: color var(--transition);
position: relative;
padding: 4px 0;
}
.nav-link:hover {
color: #fff;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-1);
transition: width var(--transition);
}
.nav-link:hover::after {
width: 100%;
}
.nav-item {
position: relative;
}
.nav-link-group {
display: flex;
align-items: center;
gap: 4px;
}
.dropdown-toggle {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px 0;
display: flex;
align-items: center;
transition: transform 0.3s;
}
.dropdown-toggle:hover {
color: #fff;
}
.dropdown-toggle.open {
transform: rotate(180deg);
}
.dropdown-arrow {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.dropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--bg-secondary);
border: 1px solid var(--card-border);
border-radius: 14px;
padding: 12px 0;
min-width: 200px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.dropdown.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dropdown-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s;
}
.dropdown-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.04);
}
.dd-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.dd-dot--core { background: #38d9d9; }
.dd-dot--flex { background: #4f7cff; }
.dd-dot--mind { background: #a78bfa; }
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.mobile-menu-btn span {
display: block;
width: 26px;
height: 2.5px;
background: var(--text-primary);
border-radius: 4px;
transition: all 0.3s;
}
.mobile-menu-btn.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.open span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.open span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
background: var(--bg-secondary);
flex-direction: column;
padding: 80px 32px 40px;
gap: 20px;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 1px solid var(--card-border);
align-items: flex-start;
overflow-y: auto;
}
.nav-links.open {
right: 0;
}
.mobile-menu-btn {
display: flex;
}
.dropdown {
position: static;
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
background: transparent;
border: none;
box-shadow: none;
padding: 8px 0 0 16px;
display: none;
}
.dropdown.open {
display: block;
}
.nav-item {
width: 100%;
}
.dropdown-toggle {
padding: 0 8px;
}
.dropdown-link {
padding: 8px 0;
}
}
/* ============================================================
HERO SECTION (versión interna)
============================================================ */
.hero-inner {
position: relative;
z-index: 1;
padding: 140px 0 80px;
text-align: center;
}
.hero-inner .hero-title {
font-size: 3.2rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.hero-inner .hero-sub {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto 32px;
}
.hero-inner .breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 24px;
}
.hero-inner .breadcrumb a {
color: var(--accent-cyan);
transition: color var(--transition);
}
.hero-inner .breadcrumb a:hover {
color: #fff;
}
/* ============================================================
CONTENIDO PRIVACIDAD
============================================================ */
.privacy-content {
position: relative;
z-index: 1;
padding: 40px 0 80px;
}
.privacy-card {
background: var(--card-bg);
backdrop-filter: blur(4px);
border: 1px solid var(--card-border);
border-radius: var(--radius);
padding: 48px 56px;
margin-bottom: 40px;
}
.privacy-card h2 {
font-size: 1.8rem;
font-weight: 700;
margin-top: 40px;
margin-bottom: 16px;
color: #fff;
}
.privacy-card h2:first-of-type {
margin-top: 0;
}
.privacy-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-top: 28px;
margin-bottom: 10px;
color: #eef2ff;
}
.privacy-card p {
color: var(--text-secondary);
margin-bottom: 16px;
font-size: 1rem;
}
.privacy-card ul {
list-style: none;
padding: 0;
margin: 16px 0 24px;
}
.privacy-card ul li {
color: var(--text-secondary);
padding: 6px 0 6px 28px;
position: relative;
font-size: 0.98rem;
}
.privacy-card ul li::before {
content: '▸';
position: absolute;
left: 0;
color: var(--accent-cyan);
font-weight: 700;
}
.privacy-card a {
color: var(--accent-cyan);
text-decoration: underline;
transition: color var(--transition);
}
.privacy-card a:hover {
color: #fff;
}
.privacy-card .last-updated {
display: inline-block;
margin-top: 24px;
font-size: 0.9rem;
color: var(--text-secondary);
border-top: 1px solid var(--card-border);
padding-top: 24px;
width: 100%;
}
@media (max-width: 768px) {
.hero-inner .hero-title {
font-size: 2.4rem;
}
.privacy-card {
padding: 28px 20px;
}
.privacy-card h2 {
font-size: 1.5rem;
}
}
/* ============================================================
FOOTER
============================================================ */
.footer {
position: relative;
z-index: 1;
background: var(--bg-secondary);
border-top: 1px solid var(--card-border);
padding: 60px 0 32px;
margin-top: 20px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-logo-icon img {
height: 48px;
width: auto;
}
.footer-description {
color: var(--text-secondary);
font-size: 0.95rem;
margin-top: 12px;
max-width: 280px;
}
.footer-column h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 16px;
color: #fff;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: var(--text-secondary);
font-size: 0.9rem;
transition: color var(--transition);
}
.footer-links a:hover {
color: #fff;
}
.footer-contact {
list-style: none;
}
.footer-contact li {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 8px;
}
.footer-contact a {
color: var(--accent-cyan);
transition: color var(--transition);
}
.footer-contact a:hover {
color: #fff;
}
.footer-bottom {
border-top: 1px solid var(--card-border);
padding-top: 24px;
text-align: center;
color: var(--text-secondary);
font-size: 0.85rem;
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
@media (max-width: 480px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ============================================================
WHATSAPP FLOAT
============================================================ */
.whatsapp-float {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.whatsapp-float.initial {
transform: scale(0.8);
opacity: 0.7;
}
.whatsapp-float:hover {
transform: scale(1.05);
opacity: 1;
}
.whatsapp-button {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: #25d366;
box-shadow: 0 8px 32px rgba(37, 211, 102, 0.35);
transition: box-shadow 0.3s;
position: relative;
}
.whatsapp-button:hover {
box-shadow: 0 12px 40px rgba(37, 211, 102, 0.5);
}
.whatsapp-icon {
width: 36px;
height: 36px;
display: block;
}
.whatsapp-tooltip {
position: absolute;
right: calc(100% + 16px);
top: 50%;
transform: translateY(-50%);
background: var(--bg-secondary);
padding: 8px 18px;
border-radius: 30px;
white-space: nowrap;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid var(--card-border);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(-50%) translateX(8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.whatsapp-button:hover .whatsapp-tooltip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
@media (max-width: 480px) {
.whatsapp-float {
bottom: 20px;
right: 20px;
}
.whatsapp-button {
width: 56px;
height: 56px;
}
.whatsapp-icon {
width: 30px;
height: 30px;
}
.whatsapp-tooltip {
display: none;
}
}
</style>
</head>
<body>
<!-- ============================================================
PARTICLE CANVAS
============================================================ -->
<canvas id="particleCanvas"></canvas>
<!-- ============================================================
NAVBAR
============================================================ -->
<nav class="navbar">
<div class="nav-container">
<a href="index.html" class="logo">
<img src="img/logovertical.png" alt="VettaIO" />
</a>
<div class="nav-links" id="navLinks">
<a href="index.html#home" class="nav-link">Inicio</a>
<!-- Divisiones dropdown -->
<div class="nav-item">
<div class="nav-link-group">
<a href="javascript:void(0)" class="nav-link" role="button">Divisiones</a>
<button class="dropdown-toggle" id="dropdownToggle" aria-label="Abrir submenu" aria-expanded="false">
<svg class="dropdown-arrow" viewBox="0 0 24 24">
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
</div>
<div class="dropdown" id="dropdownMenu">
<a href="vettacore.html" class="dropdown-link">
<span class="dd-dot dd-dot--core"></span>VettaCore
</a>
<a href="vettaflex.html" class="dropdown-link">
<span class="dd-dot dd-dot--flex"></span>VettaFlex
</a>
<a href="vettamind.html" class="dropdown-link">
<span class="dd-dot dd-dot--mind"></span>VettaMind
</a>
</div>
</div>
<a href="contacto.html" class="nav-link">Contacto</a>
</div>
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Abrir menú">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- ============================================================
HERO INTERNA
============================================================ -->
<section class="hero-inner">
<div class="container">
<div class="breadcrumb">
<a href="index.html">Inicio</a>
<span>/</span>
<span>Política de Privacidad</span>
</div>
<h1 class="hero-title">Política de <span class="text-gradient">Privacidad</span></h1>
<p class="hero-sub">
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.
</p>
</div>
</section>
<!-- ============================================================
CONTENIDO PRIVACIDAD
============================================================ -->
<section class="privacy-content">
<div class="container">
<div class="privacy-card">
<h2>1. Información general</h2>
<p>
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.
</p>
<h2>2. Responsable del tratamiento</h2>
<p>
El responsable del tratamiento de tus datos personales es <strong>VettaIO</strong>,
con domicilio en Jujuy, Argentina. Puedes contactarnos en cualquier momento a través de
<a href="mailto:info@vettaio.com">info@vettaio.com</a> para ejercer tus derechos o resolver
cualquier duda relacionada con la privacidad.
</p>
<h2>3. Datos que recopilamos</h2>
<p>Recopilamos información que nos proporcionas voluntariamente, así como datos generados por tu interacción con nuestros servicios:</p>
<ul>
<li><strong>Datos de identificación:</strong> nombre, dirección de correo electrónico, número de teléfono, y cualquier otro dato que nos facilites al contactarnos o registrarte.</li>
<li><strong>Datos de uso:</strong> información sobre cómo interactúas con nuestro sitio web, como páginas visitadas, tiempo de permanencia, clics y preferencias.</li>
<li><strong>Datos de dispositivos y técnicas:</strong> dirección IP, tipo de navegador, sistema operativo, identificadores de dispositivos y cookies.</li>
<li><strong>Datos de integraciones con Meta:</strong> 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 <a href="https://www.facebook.com/privacy/policy/" target="_blank" rel="noopener">Política de Privacidad de Meta</a> para más información.</li>
<li><strong>Datos de otras plataformas:</strong> de manera similar, si utilizas integraciones con Google, LinkedIn u otros servicios, podremos recibir la información que hayas autorizado.</li>
</ul>
<h2>4. Finalidad del tratamiento</h2>
<p>Tratamos tus datos personales con las siguientes finalidades:</p>
<ul>
<li>Gestionar la relación contractual o precontractual contigo (atender consultas, proporcionar presupuestos, ejecutar proyectos).</li>
<li>Mejorar y personalizar tu experiencia en nuestro sitio web y servicios.</li>
<li>Enviar comunicaciones comerciales y boletines informativos (siempre con tu consentimiento previo).</li>
<li>Realizar análisis estadísticos y de comportamiento para optimizar nuestras soluciones tecnológicas.</li>
<li>Garantizar la seguridad de nuestros sistemas y prevenir fraudes.</li>
<li>Cumplir con obligaciones legales y regulatorias.</li>
</ul>
<h2>5. Cookies y tecnologías similares</h2>
<p>
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).
</p>
<p>
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.
</p>
<p>
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.
</p>
<h2>6. Cesión de datos a terceros</h2>
<p>
No vendemos ni alquilamos tus datos personales a terceros. No obstante, podemos compartir tus datos con:
</p>
<ul>
<li><strong>Proveedores de servicios</strong> 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.</li>
<li><strong>Meta (Facebook, Instagram)</strong> 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.</li>
<li><strong>Autoridades competentes</strong> cuando sea requerido por ley o para proteger nuestros derechos legales.</li>
</ul>
<h2>7. Transferencias internacionales</h2>
<p>
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.
</p>
<h2>8. Plazos de conservación</h2>
<p>
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.
</p>
<h2>9. Derechos de los usuarios</h2>
<p>
De acuerdo con la normativa de protección de datos aplicable, tienes derecho a:
</p>
<ul>
<li><strong>Acceder</strong> a tus datos personales.</li>
<li><strong>Rectificar</strong> datos inexactos o incompletos.</li>
<li><strong>Suprimir</strong> tus datos (derecho al olvido).</li>
<li><strong>Limitar</strong> el tratamiento de tus datos.</li>
<li><strong>Oponerte</strong> al tratamiento para fines de marketing directo o basado en intereses legítimos.</li>
<li><strong>Portabilidad</strong> de tus datos a otro responsable.</li>
<li><strong>Retirar</strong> el consentimiento en cualquier momento, cuando el tratamiento se base en él.</li>
</ul>
<p>
Para ejercer estos derechos, puedes enviar un correo electrónico a <a href="mailto:info@vettaio.com">info@vettaio.com</a>
indicando tu solicitud. Responderemos en el plazo legal establecido.
</p>
<h2>10. Seguridad</h2>
<p>
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.
</p>
<h2>11. Enlaces a sitios externos</h2>
<p>
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.
</p>
<h2>12. Cambios en la política</h2>
<p>
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.
</p>
<h2>13. Contacto</h2>
<p>
Si tienes preguntas, comentarios o deseas ejercer tus derechos, puedes escribirnos a:
<br />
<strong>VettaIO</strong><br />
Jujuy, Argentina<br />
<a href="mailto:info@vettaio.com">info@vettaio.com</a>
</p>
<div class="last-updated">
Última actualización: <span id="updateDate"></span>
</div>
</div>
</div>
</section>
<!-- ============================================================
FOOTER
============================================================ -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<div class="footer-logo">
<div class="footer-logo-icon">
<img src="img/logovertical.png" alt="VettaIO" />
</div>
</div>
<p class="footer-description">Transformando ideas en soluciones tecnológicas de impacto.</p>
</div>
<div class="footer-column">
<h4>Divisiones</h4>
<ul class="footer-links">
<li><a href="vettacore.html">VettaCore</a></li>
<li><a href="vettaflex.html">VettaFlex</a></li>
<li><a href="vettamind.html">VettaMind</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Servicios</h4>
<ul class="footer-links">
<li><a href="index.html#custom-dev">Desarrollo a Medida</a></li>
<li><a href="index.html#iot-solutions">Soluciones IoT</a></li>
<li><a href="index.html#divisions">Consultoría</a></li>
<li><a href="contacto.html">Soporte</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<ul class="footer-contact">
<li><a href="mailto:info@vettaio.com">info@vettaio.com</a></li>
<li>+54 388 584-2292</li>
<li>Jujuy, Argentina</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; <span id="year"></span> VettaIO. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<!-- ============================================================
WHATSAPP FLOAT
============================================================ -->
<div class="whatsapp-float initial" id="whatsappFloat" aria-label="Botón flotante de WhatsApp">
<a href="https://wa.me/543885842292?text=Hola%21%20Me%20interesa%20conocer%20m%C3%A1s%20sobre%20las%20soluciones%20de%20VettaIO"
class="whatsapp-button"
target="_blank"
rel="noopener noreferrer"
aria-label="Contactar por WhatsApp">
<span class="whatsapp-tooltip"><span class="text-gradient">¡Hablemos por WhatsApp!</span></span>
<img class="whatsapp-icon" src="img/marcas/whatsapp_icon.png" alt="WhatsApp" />
</a>
</div>
<!-- ============================================================
SCRIPTS
============================================================ -->
<script>
// ==========================================================
// PARTICLE NETWORK
// ==========================================================
(function() {
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
let w, h;
let particles = [];
const NUM_PARTICLES = 80;
const CONNECTION_DIST = 140;
const MOUSE_RADIUS = 200;
function resize() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.vx = (Math.random() - 0.5) * 0.6;
this.vy = (Math.random() - 0.5) * 0.6;
this.radius = Math.random() * 2 + 1.2;
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0 || this.x > w) this.vx *= -1;
if (this.y < 0 || this.y > h) this.vy *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.4)';
ctx.fill();
}
}
for (let i = 0; i < NUM_PARTICLES; i++) {
particles.push(new Particle());
}
let mouse = { x: null, y: null };
canvas.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
canvas.addEventListener('mouseleave', () => {
mouse.x = null;
mouse.y = null;
});
// Touch support
canvas.addEventListener('touchmove', (e) => {
const t = e.touches[0];
if (t) {
mouse.x = t.clientX;
mouse.y = t.clientY;
}
}, { passive: true });
canvas.addEventListener('touchend', () => {
mouse.x = null;
mouse.y = null;
});
function drawLines() {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < CONNECTION_DIST) {
const alpha = 1 - (dist / CONNECTION_DIST);
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = `rgba(255,255,255,${alpha * 0.25})`;
ctx.lineWidth = 1;
ctx.stroke();
}
}
}
}
function drawMouseConnections() {
if (mouse.x === null || mouse.y === null) return;
for (const p of particles) {
const dx = p.x - mouse.x;
const dy = p.y - mouse.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < MOUSE_RADIUS) {
const alpha = 1 - (dist / MOUSE_RADIUS);
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.strokeStyle = `rgba(56, 217, 217, ${alpha * 0.3})`;
ctx.lineWidth = 1.2;
ctx.stroke();
}
}
}
function animate() {
ctx.clearRect(0, 0, w, h);
for (const p of particles) {
p.update();
p.draw();
}
drawLines();
drawMouseConnections();
requestAnimationFrame(animate);
}
animate();
})();
// ==========================================================
// NAVBAR DROPDOWN
// ==========================================================
const dropdownToggle = document.getElementById('dropdownToggle');
const dropdownMenu = document.getElementById('dropdownMenu');
if (dropdownToggle && dropdownMenu) {
dropdownToggle.addEventListener('click', function(e) {
e.stopPropagation();
const isOpen = dropdownMenu.classList.toggle('open');
this.classList.toggle('open');
this.setAttribute('aria-expanded', isOpen);
});
document.addEventListener('click', function(e) {
if (!e.target.closest('.nav-item')) {
dropdownMenu.classList.remove('open');
dropdownToggle.classList.remove('open');
dropdownToggle.setAttribute('aria-expanded', 'false');
}
});
}
// ==========================================================
// MOBILE MENU
// ==========================================================
const mobileBtn = document.getElementById('mobileMenuBtn');
const navLinks = document.getElementById('navLinks');
if (mobileBtn && navLinks) {
mobileBtn.addEventListener('click', function() {
const isOpen = navLinks.classList.toggle('open');
this.classList.toggle('open');
this.setAttribute('aria-label', isOpen ? 'Cerrar menú' : 'Abrir menú');
});
// Cerrar al hacer clic en un enlace
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('open');
mobileBtn.classList.remove('open');
mobileBtn.setAttribute('aria-label', 'Abrir menú');
});
});
}
// ==========================================================
// WHATSAPP FLOAT ANIMATION
// ==========================================================
setTimeout(() => {
const float = document.getElementById('whatsappFloat');
if (float) float.classList.remove('initial');
}, 600);
// ==========================================================
// FOOTER YEAR
// ==========================================================
document.getElementById('year').textContent = new Date().getFullYear();
// ==========================================================
// FECHA DE ACTUALIZACIÓN
// ==========================================================
document.getElementById('updateDate').textContent = new Date().toLocaleDateString('es-AR', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
</script>
</body>
</html>