diff --git a/assets/iconos/agro_color.svg b/assets/iconos/agro_color.svg index b647032..dd7db6d 100644 --- a/assets/iconos/agro_color.svg +++ b/assets/iconos/agro_color.svg @@ -1,13 +1,18 @@ - - + + + + - - - - - - - + + + + + + + - \ No newline at end of file + diff --git a/assets/iconos/escuela_color.svg b/assets/iconos/escuela_color.svg index 50202ce..1f2ed73 100644 --- a/assets/iconos/escuela_color.svg +++ b/assets/iconos/escuela_color.svg @@ -1,12 +1,17 @@ - - + + + + - - - - - - + + + + + + - \ No newline at end of file + diff --git a/assets/iconos/fabrica_color.svg b/assets/iconos/fabrica_color.svg index 9a715a3..149ce00 100644 --- a/assets/iconos/fabrica_color.svg +++ b/assets/iconos/fabrica_color.svg @@ -1,14 +1,19 @@ - - + + + + - - - - - - - - + + + + + + + + - \ No newline at end of file + diff --git a/assets/iconos/nurse_color.svg b/assets/iconos/nurse_color.svg index 5d591ab..a0cae11 100644 --- a/assets/iconos/nurse_color.svg +++ b/assets/iconos/nurse_color.svg @@ -1,12 +1,17 @@ - - + + + + - - - - - - + + + + + + - \ No newline at end of file + diff --git a/assets/img/1790382805.png b/assets/img/1790382805.png new file mode 100644 index 0000000..d2c2455 Binary files /dev/null and b/assets/img/1790382805.png differ diff --git a/assets/img/CRA.jpg b/assets/img/CRA.jpg new file mode 100644 index 0000000..0aefae5 Binary files /dev/null and b/assets/img/CRA.jpg differ diff --git a/assets/img/JAP2.jpg b/assets/img/JAP2.jpg new file mode 100644 index 0000000..cbfafdf Binary files /dev/null and b/assets/img/JAP2.jpg differ diff --git a/assets/img/MAR.jpg b/assets/img/MAR.jpg new file mode 100644 index 0000000..469244d Binary files /dev/null and b/assets/img/MAR.jpg differ diff --git a/assets/img/VUB.jpg b/assets/img/VUB.jpg new file mode 100644 index 0000000..09298e9 Binary files /dev/null and b/assets/img/VUB.jpg differ diff --git a/assets/img/carlos_garcia.png b/assets/img/carlos_garcia.png deleted file mode 100644 index a2106ae..0000000 Binary files a/assets/img/carlos_garcia.png and /dev/null differ diff --git a/assets/img/juan_perez.png b/assets/img/juan_perez.png deleted file mode 100644 index edc4c1d..0000000 Binary files a/assets/img/juan_perez.png and /dev/null differ diff --git a/assets/img/maria_martinez.png b/assets/img/maria_martinez.png deleted file mode 100644 index 7c02920..0000000 Binary files a/assets/img/maria_martinez.png and /dev/null differ diff --git a/css/styles.css b/css/styles.css index 38ef0f0..381e19e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -75,6 +75,15 @@ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; + + /*Efecto bola de nieve*/ + --snowball-color: rgba(76,175,122,0.3); + --snowball-particle-count: 180; + --snowball-max-capacity: 15; + --snowball-cooldown: 2.5; + --snowball-line-width: 1.5; + --snowball-min-radius: 5; + --snowball-max-radius: 10; } /* Tema Oscuro (Elegante mate, sin negros puros #000 ni neón estridente) */ @@ -116,6 +125,8 @@ --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 35px rgba(0, 0, 0, 0.55); --shadow-canva: rgba(92, 103, 107, 0.432); + + --snowball-color: rgba(76,175,122,0.2); } /* --- 2. Reseteo y Base --- */ @@ -682,6 +693,20 @@ p, li, .lead-text, .text-body, .text-muted { margin: 0 auto; text-align: center; } + +/*==============================*/ +/*----- SnowBall ------*/ +.snowball-canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + z-index: 0; +} + +/*==============================*/ /*==============================*/ /* --- 7. Tarjetas y Grillas --- */ @@ -710,7 +735,27 @@ p, li, .lead-text, .text-body, .text-muted { border-radius: var(--radius-md); padding: 1.75rem; transition: all var(--transition-normal); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +.icono-agro { + display: block; + width: 2.5rem; + height: 2.5rem; + margin-bottom: 0.5rem; + background-color: var(--text-body); + -webkit-mask-image: url('../assets/iconos/agro_color.svg'); + mask-image: url('../assets/iconos/agro_color.svg'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + flex-shrink: 0; } .card-agro:hover { @@ -727,8 +772,28 @@ p, li, .lead-text, .text-body, .text-muted { border-radius: var(--radius-md); padding: 1.75rem; transition: all var(--transition-normal); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; } +.icono-fabrica { + display: block; + width: 2.5rem; + height: 2.5rem; + margin-bottom: 0.5rem; + background-color: var(--text-body); + -webkit-mask-image: url('../assets/iconos/fabrica_color.svg'); + mask-image: url('../assets/iconos/fabrica_color.svg'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + flex-shrink: 0; +} .card-fabrica:hover { transform: translateY(-2px); @@ -744,7 +809,27 @@ p, li, .lead-text, .text-body, .text-muted { border-radius: var(--radius-md); padding: 1.75rem; transition: all var(--transition-normal); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +.icono-salud { + display: block; + width: 2.5rem; + height: 2.5rem; + margin-bottom: 0.5rem; + background-color: var(--text-body); + -webkit-mask-image: url('../assets/iconos/nurse_color.svg'); + mask-image: url('../assets/iconos/nurse_color.svg'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + flex-shrink: 0; } .card-salud:hover { @@ -761,7 +846,26 @@ p, li, .lead-text, .text-body, .text-muted { border-radius: var(--radius-md); padding: 1.75rem; transition: all var(--transition-normal); - + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +.icono-educacion { + display: block; + width: 2.5rem; + height: 2.5rem; + margin-bottom: 0.5rem; + background-color: var(--text-body); + -webkit-mask-image: url('../assets/iconos/escuela_color.svg'); + mask-image: url('../assets/iconos/escuela_color.svg'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + flex-shrink: 0; } .card-educacion:hover { @@ -886,7 +990,7 @@ p, li, .lead-text, .text-body, .text-muted { } /* --- 8. Hero: La Doble Entrada (Home) --- */ -.hero-wrapper { +.section-padding { background: radial-gradient(circle at 80% 20%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body); border-bottom: 1px solid var(--border-color); position: relative; @@ -1377,6 +1481,40 @@ p, li, .lead-text, .text-body, .text-muted { /* --- 13. Modales (Pop-ups de Desafíos y Cursos) --- */ +.dfcard1{ + background: linear-gradient(0deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%); + display: flex; + flex-direction: column; + justify-content: space-between; +} +.dfcard1 h3{ + font-size: 1.25rem; + margin-bottom: 0.75rem; +} +.dfcard1 p{ + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.55; + margin-bottom: 1.5rem; +} +.dfcard2{ + background: linear-gradient(135deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%); + border-color: var(--ide-accent); + display: flex; + border-width: 2px; + flex-direction: column; + justify-content: space-between; +} +.dfcard2 h3{ + font-size: 1.25rem; + margin-bottom: 0.75rem; +} +.dfcard2 p{ + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.55; + margin-bottom: 1.5rem; +} .modal-backdrop { position: fixed; top: 0; diff --git a/desafios.html b/desafios.html index 1b1a626..3f45bfa 100644 --- a/desafios.html +++ b/desafios.html @@ -65,11 +65,10 @@
-
+
- -

Crecimos y necesitamos ordenar la gestión

-

+

Crecimos y necesitamos ordenar la gestión

+

Lo que antes funcionaba de manera informal empieza a generar descoordinación, retrabajos, falta de claridad o dependencia de personas clave.

@@ -79,9 +78,8 @@
-
+
-

Tenemos muchas iniciativas, pero cuesta convertirlas en resultados

Los proyectos avanzan con dificultades, compiten por recursos o pierden foco, y necesitamos mejorar la forma de priorizar, coordinar y ejecutar. @@ -93,9 +91,8 @@

-
+
-

Estamos impulsando cambios, pero cuesta llevarlos a la práctica

Nuevos procesos, herramientas o formas de trabajar no siempre logran integrarse a la dinámica cotidiana de la organización. @@ -107,9 +104,8 @@

-
+
-

Queremos aprovechar la tecnología y la IA con sentido

Vemos oportunidades para automatizar, sistematizar o mejorar decisiones, pero necesitamos identificar dónde la tecnología puede generar valor real. @@ -121,9 +117,8 @@

-
+
-

Necesitamos cumplir nuevos requisitos sin sumar burocracia

Una norma, certificación, cliente o regulación exige cambios. Buscamos integrarlos a la gestión para que, además de cumplir, ayuden a mejorar. @@ -135,11 +130,10 @@

-
+
- -

Sabemos que algo debería cambiar, pero no tenemos claro por dónde empezar

-

+

Sabemos que algo debería cambiar, pero no tenemos claro por dónde empezar

+

Los resultados, los procesos o la dinámica de la organización muestran señales que necesitamos comprender antes de decidir dónde intervenir.

diff --git a/ide-academy.html b/ide-academy.html index b65670d..ef874d6 100644 --- a/ide-academy.html +++ b/ide-academy.html @@ -46,14 +46,14 @@ z-index: 1;">
- CAPACIDADES & APRENDIZAJE -

Desarrollamos las capacidades que hacen posible la transformación

+ Executive Learning & Capability Development +

Desarrollamos capacidades para gestionar, liderar y transformar

- Los procesos y la tecnología son indispensables, pero son las personas quienes los ejecutan y mejoran día a día. Diseñamos programas prácticos orientados a resultados organizacionales tangibles. + Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para convertir el aprendizaje en acción.

@@ -63,11 +63,12 @@
- PROGRAMAS ACTIVOS -

Próximos Cursos y Formaciones Destacadas

+ APRENDER CON IDE +

Conocimiento que se conecta con la práctica

- Hacé clic en cualquier programa para acceder a su ficha técnica completa, objetivos y temario modular. -

+ Aprender no es solamente incorporar conceptos. Es comprender cómo aplicarlos, relacionarlos con otros saberes y convertirlos en mejores decisiones y formas de actuar. +

+ Por eso, en IDE Academy diseñamos experiencias de aprendizaje que parten de situaciones reales, integran herramientas aplicables y promueven el intercambio entre profesionales.

diff --git a/includes/header.html b/includes/header.html index 7e841c6..6960338 100644 --- a/includes/header.html +++ b/includes/header.html @@ -14,7 +14,7 @@
    -
  • Desafíos
    • +
  • Punto de Partida
  • Soluciones
  • Ecosistema
  • diff --git a/index.html b/index.html index 4a83f03..c6b3fdc 100644 --- a/index.html +++ b/index.html @@ -26,13 +26,12 @@
    -
    +
    -
    CONECTAMOS EL TODO -

    +

    ¿Qué pasa cuando dejamos de mirar los problemas por separado?

    @@ -57,8 +56,8 @@

    -
    - +
    +
    @@ -659,34 +658,26 @@
    -
    - - - +
    +

    Agro & Alimentos

    Trazabilidad, inocuidad, buenas prácticas y gestión responsable para fortalecer operaciones y generar valor sostenible.

    - - - +

    Industria & Servicios

    Procesos, calidad, proyectos y transformación digital para mejorar la gestión, la eficiencia y la capacidad de adaptación.

    - - - +

    Sector Salud

    Procesos críticos, experiencia del paciente y cumplimiento para fortalecer la calidad, la seguridad y la mejora continua.

    - - - +

    Educación & Gobierno

    Gestión, calidad, proyectos y desarrollo de capacidades para fortalecer organizaciones, servicios y resultados.

    @@ -724,8 +715,6 @@ - - - + diff --git a/js/snowball-particles.js b/js/snowball-particles.js new file mode 100644 index 0000000..2eb4ed0 --- /dev/null +++ b/js/snowball-particles.js @@ -0,0 +1,402 @@ +/** + * SnowballBackground + * Círculos huecos flotantes que se fusionan en el mouse aumentando su radio + * y se desintegran expulsando todas las partículas. + * + * Uso: + * 1) Automático: agregá la clase .snowball-bg a cualquier contenedor + * 2) Manual: new SnowballBackground({ containerId: 'mi-id' }) + * + * Tema: lee variables CSS del contenedor o :root y reacciona a cambios de tema. + */ +class SnowballBackground { + constructor(options = {}) { + // --- Resolver contenedor (acepta elemento, ID o selector) --- + if (options.container instanceof HTMLElement) { + this.container = options.container; + } else if (options.containerId) { + this.container = document.getElementById(options.containerId); + } else if (options.containerSelector) { + this.container = document.querySelector(options.containerSelector); + } + + if (!this.container) { + console.warn('SnowballBackground: no se encontró el contenedor.', options); + return; + } + + // Evitar doble inicialización en el mismo contenedor + if (this.container._snowballInstance) { + return; + } + this.container._snowballInstance = this; + + // --- Configuración (defaults, se sobreescriben con CSS vars y options) --- + this.config = { + particleCount: 70, + maxCapacity: 20, + cooldownSeconds: 2.5, + color: '#38bdf8', + lineWidth: 1.5, + minRadius: 5, + maxRadius: 10 + }; + + // Leer variables CSS antes de aplicar options (options tienen prioridad) + this.syncThemeColors(); + + // Aplicar overrides manuales + if (options.particleCount) this.config.particleCount = options.particleCount; + if (options.maxCapacity) this.config.maxCapacity = options.maxCapacity; + if (options.cooldownSeconds) this.config.cooldownSeconds = options.cooldownSeconds; + if (options.color) this.config.color = options.color; + if (options.lineWidth) this.config.lineWidth = options.lineWidth; + if (options.minRadius) this.config.minRadius = options.minRadius; + if (options.maxRadius) this.config.maxRadius = options.maxRadius; + + // --- Estados internos --- + this.particles = []; + this.absorbedParticles = []; + this.disintegrationShards = []; + this.mouse = { x: -1000, y: -1000, active: false }; + this.isCoolingDown = false; + this.cooldownEndTime = 0; + this.currentBallRadius = 0; + + // --- Init --- + this.initCanvas(); + this.initParticles(); + this.bindEvents(); + this.observeThemeChanges(); + this.loop(); + } + + /* ============================================================= + * LECTURA DE VARIABLES CSS + * =========================================================== */ + readCSSVar(name) { + // Primero busca en el contenedor, luego en :root + let value = getComputedStyle(this.container).getPropertyValue(name).trim(); + if (!value) { + value = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); + } + return value || null; + } + + syncThemeColors() { + const map = { + '--snowball-color': { key: 'color', parse: String }, + '--snowball-particle-count': { key: 'particleCount', parse: parseInt }, + '--snowball-max-capacity': { key: 'maxCapacity', parse: parseInt }, + '--snowball-cooldown': { key: 'cooldownSeconds',parse: parseFloat }, + '--snowball-line-width': { key: 'lineWidth', parse: parseFloat }, + '--snowball-min-radius': { key: 'minRadius', parse: parseFloat }, + '--snowball-max-radius': { key: 'maxRadius', parse: parseFloat } + }; + + for (const [cssVar, { key, parse }] of Object.entries(map)) { + const raw = this.readCSSVar(cssVar); + if (raw !== null) { + const parsed = parse(raw, 10); + // Solo aplicar si el parseo dio un valor válido + if (typeof parsed === 'string' ? parsed : !isNaN(parsed)) { + this.config[key] = parsed; + } + } + } + } + + /* ============================================================= + * OBSERVADOR DE CAMBIOS DE TEMA + * =========================================================== */ + observeThemeChanges() { + this._themeObserver = new MutationObserver(() => { + this.syncThemeColors(); + }); + + // Observar (cambios de data-theme, class, style) + this._themeObserver.observe(document.documentElement, { + attributes: true, + attributeFilter: ['data-theme', 'class', 'style'] + }); + + // Observar también (algunos frameworks ponen el tema ahí) + this._themeObserver.observe(document.body, { + attributes: true, + attributeFilter: ['data-theme', 'class', 'style'] + }); + } + + /* ============================================================= + * CANVAS + * =========================================================== */ + initCanvas() { + this.canvas = document.createElement('canvas'); + this.canvas.className = 'snowball-canvas'; + this.canvas.style.cssText = + 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + this.ctx = this.canvas.getContext('2d'); + + // El contenedor debe ser posicionable + const pos = getComputedStyle(this.container).position; + if (pos === 'static') { + this.container.style.position = 'relative'; + } + + this.container.appendChild(this.canvas); + this.resize(); + } + + resize() { + const rect = this.container.getBoundingClientRect(); + this.width = rect.width; + this.height = rect.height; + const dpr = window.devicePixelRatio || 1; + this.canvas.width = this.width * dpr; + this.canvas.height = this.height * dpr; + this.ctx.scale(dpr, dpr); + } + + /* ============================================================= + * PARTÍCULAS + * =========================================================== */ + initParticles() { + this.particles = []; + for (let i = 0; i < this.config.particleCount; i++) { + const radius = this.randomRange(this.config.minRadius, this.config.maxRadius); + this.particles.push({ + x: this.randomRange(radius, Math.max(radius + 1, this.width - radius)), + y: this.randomRange(radius, Math.max(radius + 1, this.height - radius)), + vx: (Math.random() - 0.5) * 1.6, + vy: (Math.random() - 0.5) * 1.6, + radius, + state: 'FREE' + }); + } + } + + bindEvents() { + this._onResize = () => this.resize(); + window.addEventListener('resize', this._onResize); + + this._onMouseMove = (e) => { + const rect = this.container.getBoundingClientRect(); + this.mouse.x = e.clientX - rect.left; + this.mouse.y = e.clientY - rect.top; + this.mouse.active = true; + }; + this.container.addEventListener('mousemove', this._onMouseMove); + + this._onMouseLeave = () => { this.mouse.active = false; }; + this.container.addEventListener('mouseleave', this._onMouseLeave); + } + + randomRange(min, max) { + return Math.random() * (max - min) + min; + } + + /* ============================================================= + * CONVERSIÓN DE COLOR UNIVERSAL + * =========================================================== */ + toRgba(color, alpha = 1) { + if (!color) return `rgba(0,0,0,${alpha})`; + const c = color.trim(); + + // rgba(...) o rgb(...) + if (c.startsWith('rgb')) { + const parts = c.match(/[\d.]+/g); + if (!parts || parts.length < 3) return `rgba(0,0,0,${alpha})`; + const [r, g, b] = parts; + const origA = parts[3] !== undefined ? parseFloat(parts[3]) : 1; + return `rgba(${r},${g},${b},${(origA * alpha).toFixed(3)})`; + } + + // #hex (3, 4, 6 u 8 dígitos) + if (c.startsWith('#')) { + let hex = c.slice(1); + if (hex.length === 3 || hex.length === 4) { + hex = hex.split('').map(ch => ch + ch).join(''); + } + const n = parseInt(hex.slice(0, 6), 16); + const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255; + let hexA = 1; + if (hex.length === 8) hexA = parseInt(hex.slice(6, 8), 16) / 255; + return `rgba(${r},${g},${b},${(hexA * alpha).toFixed(3)})`; + } + + // Fallback: dejar que el navegador resuelva (hsl, nombres, etc.) + try { + const tmp = document.createElement('canvas').getContext('2d'); + tmp.fillStyle = c; + const resolved = tmp.fillStyle; + if (resolved !== c) return this.toRgba(resolved, alpha); + } catch (_) {} + + return `rgba(0,0,0,${alpha})`; + } + + /* ============================================================= + * EXPLOSIÓN + * =========================================================== */ + explode() { + const ex = this.mouse.x, ey = this.mouse.y; + const br = this.currentBallRadius; + const count = this.absorbedParticles.length; + + // Fragmentos de desintegración + const shardCount = 8; + const arcStep = (Math.PI * 2) / shardCount; + for (let i = 0; i < shardCount; i++) { + const angle = i * arcStep; + this.disintegrationShards.push({ + x: ex, y: ey, radius: br, + startAngle: angle + 0.1, + endAngle: angle + arcStep - 0.1, + vx: Math.cos(angle + arcStep / 2) * 3, + vy: Math.sin(angle + arcStep / 2) * 3, + alpha: 1 + }); + } + + // Dispersar partículas + this.absorbedParticles.forEach((p, i) => { + const angle = (Math.PI * 2 / count) * i + (Math.random() - 0.5) * 0.3; + const force = this.randomRange(10, 18); + p.x = ex + Math.cos(angle) * (br * 0.8); + p.y = ey + Math.sin(angle) * (br * 0.8); + p.vx = Math.cos(angle) * force; + p.vy = Math.sin(angle) * force; + p.state = 'EXPLODED'; + }); + + this.absorbedParticles = []; + this.currentBallRadius = 0; + this.isCoolingDown = true; + this.cooldownEndTime = performance.now() + this.config.cooldownSeconds * 1000; + } + + /* ============================================================= + * UPDATE + * =========================================================== */ + update() { + const now = performance.now(); + if (this.isCoolingDown && now >= this.cooldownEndTime) { + this.isCoolingDown = false; + } + + let targetRadius = 0; + if (this.absorbedParticles.length > 0) { + targetRadius = 14 + (this.absorbedParticles.length / this.config.maxCapacity) * 46; + } + this.currentBallRadius += (targetRadius - this.currentBallRadius) * 0.15; + + const hitRadius = this.absorbedParticles.length === 0 ? 14 : this.currentBallRadius; + + this.particles.forEach((p) => { + if (p.state === 'FREE') { + p.x += p.vx; + p.y += p.vy; + if (p.x - p.radius <= 0) { p.x = p.radius; p.vx *= -1; } + if (p.x + p.radius >= this.width) { p.x = this.width - p.radius; p.vx *= -1; } + if (p.y - p.radius <= 0) { p.y = p.radius; p.vy *= -1; } + if (p.y + p.radius >= this.height) { p.y = this.height - p.radius; p.vy *= -1; } + + if (this.mouse.active && !this.isCoolingDown) { + const dx = p.x - this.mouse.x, dy = p.y - this.mouse.y; + if (Math.sqrt(dx * dx + dy * dy) < hitRadius + p.radius) { + p.state = 'ABSORBED'; + this.absorbedParticles.push(p); + if (this.absorbedParticles.length >= this.config.maxCapacity) { + this.explode(); + } + } + } + } else if (p.state === 'EXPLODED') { + p.x += p.vx; p.y += p.vy; + p.vx *= 0.96; p.vy *= 0.96; + if (p.x - p.radius <= 0) { p.x = p.radius; p.vx *= -1; } + if (p.x + p.radius >= this.width) { p.x = this.width - p.radius; p.vx *= -1; } + if (p.y - p.radius <= 0) { p.y = p.radius; p.vy *= -1; } + if (p.y + p.radius >= this.height) { p.y = this.height - p.radius; p.vy *= -1; } + if (Math.sqrt(p.vx * p.vx + p.vy * p.vy) < 1.6) p.state = 'FREE'; + } + }); + + for (let i = this.disintegrationShards.length - 1; i >= 0; i--) { + const s = this.disintegrationShards[i]; + s.x += s.vx; s.y += s.vy; + s.radius += 0.8; + s.alpha -= 0.05; + if (s.alpha <= 0) this.disintegrationShards.splice(i, 1); + } + } + + /* ============================================================= + * DRAW (todos los colores pasan por toRgba) + * =========================================================== */ + draw() { + this.ctx.clearRect(0, 0, this.width, this.height); + const color = this.config.color; + const lw = this.config.lineWidth; + + // 1. Partículas libres / explotadas + this.ctx.lineWidth = lw; + this.ctx.strokeStyle = this.toRgba(color, 1); + this.particles.forEach((p) => { + if (p.state !== 'ABSORBED') { + this.ctx.beginPath(); + this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); + this.ctx.stroke(); + } + }); + + // 2. Fragmentos de desintegración + this.disintegrationShards.forEach((s) => { + this.ctx.save(); + this.ctx.lineWidth = lw + 0.5; + this.ctx.strokeStyle = this.toRgba(color, s.alpha); + this.ctx.beginPath(); + this.ctx.arc(s.x, s.y, s.radius, s.startAngle, s.endAngle); + this.ctx.stroke(); + this.ctx.restore(); + }); + + // 3. Bola en el mouse + if (this.mouse.active && !this.isCoolingDown && this.currentBallRadius > 2) { + this.ctx.save(); + this.ctx.lineWidth = lw + 0.5; + this.ctx.strokeStyle = this.toRgba(color, 1); + this.ctx.beginPath(); + this.ctx.arc(this.mouse.x, this.mouse.y, this.currentBallRadius, 0, Math.PI * 2); + this.ctx.stroke(); + this.ctx.restore(); + } + } + + /* ============================================================= + * LOOP + * =========================================================== */ + loop() { + this.update(); + this.draw(); + requestAnimationFrame(() => this.loop()); + } +} + +/* ============================================================== + * AUTO-INICIALIZACIÓN + * Busca todos los elementos con clase .snowball-bg + * ============================================================== */ +function initSnowballBackgrounds() { + document.querySelectorAll('.snowball-bg').forEach((el) => { + if (!el._snowballInstance) { + new SnowballBackground({ container: el }); + } + }); +} + +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initSnowballBackgrounds); +} else { + initSnowballBackgrounds(); +} \ No newline at end of file diff --git a/soluciones.html b/soluciones.html index 2b1bb40..489de29 100644 --- a/soluciones.html +++ b/soluciones.html @@ -43,7 +43,7 @@ left: 0; width: 100%; height: 100%; - background: rgba(19, 167, 138, 0.5); + background: rgba(227, 235, 233, 0.25); z-index: 1; ">
    diff --git a/somos-ide.html b/somos-ide.html index d6728ea..fb58151 100644 --- a/somos-ide.html +++ b/somos-ide.html @@ -89,7 +89,7 @@
    - Retrato de Carlos Garcia + Retrato de Carlos Garcia

    Claudia Raquel ANDRÉS

    Directora General | Líder de IDE Projects
    @@ -102,7 +102,7 @@
    - Retrato de Carlos Garcia + Retrato de Carlos Garcia

    José PUGLIESE

    Líder de IDE Digital
    @@ -115,7 +115,7 @@
    - Retrato de Carlos Garcia + Retrato de Carlos Garcia

    Miguel Ángel ROJAS

    Líder de IDE Excellence
    @@ -128,7 +128,7 @@
    - Retrato de Carlos Garcia + Retrato de Carlos Garcia

    Víctor Ulises BARRIONUEVO

    Projects & Digital