efecto fluid

inicio.html

@@ -9,6 +9,9 @@
   <link rel="stylesheet" href="style/main.css">
 </head>
 <body>
+  <div id="fluid-bg" aria-hidden="true">
+    <canvas id="fluidCanvas"></canvas>
+  </div>
   <div id="menu-container"></div>
 
   <main>

nosotros.html

@@ -38,13 +38,13 @@
           <div class="card-icon icon-amor"></div>
           <h3>Amor</h3>
           <span class="card-tag">La Pasión y el Arte</span>
-          <p>Representa la chispa creativa, la intuición visual, la dirección de arte meticulosa, la empatía con la visión del cliente y la estética no negociable. Es el alma y la identidad de cada marca.</p>
+          <p>Representa el instinto creativo, la intuición visual, la dirección de arte meticulosa, la empatía con la visión del cliente y la estética no negociable. <br>Es el alma y la identidad de cada marca.</p>
         </article>
         <article class="dualidad-card card-roma">
           <div class="card-icon icon-roma"></div>
           <h3>Roma</h3>
           <span class="card-tag">La Construcción y la Estructura</span>
-          <p>Representa la arquitectura, la solidez, la ingeniería de procesos, la estrategia a largo plazo y la infraestructura digital orientada a resultados. Es el imperio que sostiene esa visión.</p>
+          <p>Representa la arquitectura, el método, la ingeniería de procesos, la estrategia a largo plazo y la infraestructura digital orientada a resultados. <br>Es el imperio que sostiene esa visión.</p>
         </article>
       </div>
     </section>
@@ -77,8 +77,7 @@
       </div>
 
       <p class="equipo-colaboradores">
-        Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.
-      </p>
+     Trabajamos en equipo ayudando a las PyMEs a competir y crecer.      </p>
     </section>
 
     <!-- SECCIÓN 3: PRINCIPIOS BOUTIQUE -->
@@ -172,7 +171,7 @@
         <!-- ARQUETIPO 1 -->
         <article class="caso-card">
           <div class="caso-header">
-            <span class="caso-badge">Arquetipo 1</span>
+            <span class="caso-badge">Mordi - El mundo en un bocado</span>
             <h3 class="caso-titulo">Identidad Integral</h3>
           </div>
           <p class="caso-descripcion">Desarrollo de marca completo, mascota propia y administración continua de redes.</p>
@@ -184,7 +183,7 @@
         <!-- ARQUETIPO 2 -->
         <article class="caso-card">
           <div class="caso-header">
-            <span class="caso-badge">Arquetipo 2</span>
+            <span class="caso-badge">ArWorks - higiene y seguridad</span>
             <h3 class="caso-titulo">Infraestructura B2B</h3>
           </div>
           <p class="caso-descripcion">Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.</p>
@@ -196,7 +195,7 @@
         <!-- ARQUETIPO 3 (INSÍGNIA) -->
         <article class="caso-card caso-insignia">
           <div class="caso-header">
-            <span class="caso-badge caso-badge-insignia">Arquetipo 3 (Insígnia)</span>
+            <span class="caso-badge caso-badge-insignia">vetta io</span>
             <h3 class="caso-titulo">Ecosistema Digital Completo</h3>
           </div>
           <p class="caso-descripcion">Empresa de Tecnología: Branding + Web a medida + RRSS activas.</p>
@@ -208,7 +207,7 @@
         <!-- ARQUETIPO 4 -->
         <article class="caso-card">
           <div class="caso-header">
-            <span class="caso-badge">Arquetipo 4</span>
+            <span class="caso-badge">ide - consultores</span>
             <h3 class="caso-titulo">Profesionalización de Servicios</h3>
           </div>
           <p class="caso-descripcion">Consultores Independientes: Web a medida + Gestión estratégica de RRSS.</p>

scripts/fluid.js

@@ -11,22 +11,66 @@ const config = {
   SPLAT_RADIUS: 0.003
 };
 
+// ===== COLORES DE MARCA (Modo Claro / Oscuro) =====
+function getBrandColors() {
+  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+  if (isDark) {
+    // Tonos luminiscentes y vibrantes para contrastar sobre #110916
+    return [
+      [0.920, 0.120, 0.420], // Carmesí brillante (#EA1E6B)
+      [0.050, 0.680, 0.780], // Teal cian luminoso (#0DAEC7)
+      [0.850, 0.550, 0.700]  // Rosa suave (#D98CB3)
+    ];
+  } else {
+    // Tonos puros y elegantes para teñir el fondo claro sin ensuciarlo
+    return [
+      [0.729, 0.071, 0.302], // Bordo de marca (#BA124D)
+      [0.000, 0.320, 0.420], // Teal medio (#00526B)
+      [0.780, 0.280, 0.400]  // Rosa carmesí (#C74766)
+    ];
+  }
+}
+
+let brandColors = getBrandColors();
+let currentColor = brandColors[0];
+let targetColor = brandColors[1];
+let transitionProgress = 0;
+const transitionSpeed = 0.008;
+
+// Observar cambios de tema: actualiza paleta y reinicia transición de color.
+// El fondo CSS cambia automáticamente (el canvas es transparente, el fondo del <html> se ve a través).
+const themeObserver = new MutationObserver(() => {
+  brandColors = getBrandColors();
+  currentColor = brandColors[0];
+  targetColor = brandColors[1];
+  transitionProgress = 0;
+});
+themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+function lerpColor(colorA, colorB, t) {
+  return [
+    colorA[0] + (colorB[0] - colorA[0]) * t,
+    colorA[1] + (colorB[1] - colorA[1]) * t,
+    colorA[2] + (colorB[2] - colorA[2]) * t
+  ];
+}
+
 // ===== INICIALIZAR CANVAS =====
 let canvas = document.getElementById("fluidCanvas");
-console.log("Canvas encontrado:", canvas);
 if (!canvas) {
   console.error("ERROR: No se encontró el canvas con id 'fluidCanvas'");
-}
+} else {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
+}
 
 // ===== CONTEXTO WEBGL =====
 let pointers = [];
-let splatStack = [];
 
 function getWebGLContext(canvas) {
   let params = {
-    alpha: false,
+    alpha: true,           // Canvas transparente: el fondo CSS se ve a través
+    premultipliedAlpha: false, // CLAVE: colores sin premultiplicar para composición correcta
     depth: false,
     stencil: false,
     antialias: false
@@ -34,20 +78,23 @@ function getWebGLContext(canvas) {
   let gl = canvas.getContext("webgl2", params);
   let isWebGL2 = !!gl;
   if (!isWebGL2)
-    gl =
-      canvas.getContext("webgl", params) ||
-      canvas.getContext("experimental-webgl", params);
+    gl = canvas.getContext("webgl", params) || canvas.getContext("experimental-webgl", params);
+  
   let halfFloat = gl.getExtension("OES_texture_half_float");
   let support_linear_float = gl.getExtension("OES_texture_half_float_linear");
   if (isWebGL2) {
     gl.getExtension("EXT_color_buffer_float");
     support_linear_float = gl.getExtension("OES_texture_float_linear");
   }
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  
+  // ✅ CLAVE: Fondo transparente para que se vea el color del body
+  gl.clearColor(0.0, 0.0, 0.0, 0.0); 
+  
   let internalFormat = isWebGL2 ? gl.RGBA16F : gl.RGBA;
   let internalFormatRG = isWebGL2 ? gl.RG16F : gl.RGBA;
   let formatRG = isWebGL2 ? gl.RG : gl.RGBA;
   let texType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
+  
   return {
     gl: gl,
     ext: {
@@ -74,29 +121,24 @@ function pointerPrototype() {
   this.dy = 0;
   this.down = false;
   this.moved = false;
-  this.color = [30, 0, 300];
+  this.color = [0.729, 0.071, 0.302];
 }
 pointers.push(new pointerPrototype());
 
 // ===== SHADERS =====
 let GLProgram = (function () {
   function GLProgram(vertexShader, fragmentShader) {
-    if (!(this instanceof GLProgram))
-      throw new TypeError("Cannot call a class as a function");
+    if (!(this instanceof GLProgram)) throw new TypeError("Cannot call a class as a function");
     this.uniforms = {};
     this.program = gl.createProgram();
     gl.attachShader(this.program, vertexShader);
     gl.attachShader(this.program, fragmentShader);
     gl.linkProgram(this.program);
-    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
-      throw gl.getProgramInfoLog(this.program);
+    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) throw gl.getProgramInfoLog(this.program);
     let uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
     for (let i = 0; i < uniformCount; i++) {
       let uniformName = gl.getActiveUniform(this.program, i).name;
-      this.uniforms[uniformName] = gl.getUniformLocation(
-        this.program,
-        uniformName
-      );
+      this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);
     }
   }
   GLProgram.prototype.bind = function bind() {
@@ -109,18 +151,15 @@ function compileShader(type, source) {
   let shader = gl.createShader(type);
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
-    throw gl.getShaderInfoLog(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader);
   return shader;
 }
 
-// ===== VERTEX SHADER =====
 let baseVertexShader = compileShader(
   gl.VERTEX_SHADER,
   "precision highp float; precision mediump sampler2D; attribute vec2 aPosition; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform vec2 texelSize; void main () { vUv = aPosition * 0.5 + 0.5; vL = vUv - vec2(texelSize.x, 0.0); vR = vUv + vec2(texelSize.x, 0.0); vT = vUv + vec2(0.0, texelSize.y); vB = vUv - vec2(0.0, texelSize.y); gl_Position = vec4(aPosition, 0.0, 1.0); }"
 );
 
-// ===== FRAGMENT SHADERS =====
 let clearShader = compileShader(
   gl.FRAGMENT_SHADER,
   "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; uniform float value; void main () { gl_FragColor = value * texture2D(uTexture, vUv); }"
@@ -128,7 +167,34 @@ let clearShader = compileShader(
 
 let displayShader = compileShader(
   gl.FRAGMENT_SHADER,
-  "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; void main () {     gl_FragColor = texture2D(uTexture, vUv); }"
+  `precision highp float;
+   precision mediump sampler2D;
+   varying vec2 vUv;
+   uniform sampler2D uTexture;
+   uniform float uIsDark;
+
+   void main () {
+     vec4 c = texture2D(uTexture, vUv);
+     float maxC = max(c.r, max(c.g, c.b));
+     if (maxC < 0.001) {
+       gl_FragColor = vec4(0.0);
+       return;
+     }
+
+     // Normalizamos el tono cromático para conservar la saturación original
+     vec3 nColor = c.rgb / maxC;
+
+     if (uIsDark > 0.5) {
+       // MODO OSCURO: fluido con mayor presencia y brillo
+       float alpha = clamp(maxC * 2.5, 0.0, 0.70);
+       vec3 glow = clamp(nColor * 1.2, 0.0, 1.0);
+       gl_FragColor = vec4(glow, alpha);
+     } else {
+       // MODO CLARO: tinte traslúcido suave que no satura el fondo sage-light
+       float alpha = clamp(maxC * 1.5, 0.0, 0.35);
+       gl_FragColor = vec4(nColor, alpha);
+     }
+   }`
 );
 
 let splatShader = compileShader(
@@ -182,51 +248,11 @@ function initFramebuffers() {
   let iFormatRG = ext.internalFormatRG;
   let formatRG = ext.formatRG;
   let texType = ext.texType;
-  density = createDoubleFBO(
-    0,
-    textureWidth,
-    textureHeight,
-    iFormat,
-    gl.RGBA,
-    texType,
-    support_linear_float ? gl.LINEAR : gl.NEAREST
-  );
-  velocity = createDoubleFBO(
-    2,
-    textureWidth,
-    textureHeight,
-    iFormatRG,
-    formatRG,
-    texType,
-    support_linear_float ? gl.LINEAR : gl.NEAREST
-  );
-  divergence = createFBO(
-    4,
-    textureWidth,
-    textureHeight,
-    iFormatRG,
-    formatRG,
-    texType,
-    gl.NEAREST
-  );
-  curl = createFBO(
-    5,
-    textureWidth,
-    textureHeight,
-    iFormatRG,
-    formatRG,
-    texType,
-    gl.NEAREST
-  );
-  pressure = createDoubleFBO(
-    6,
-    textureWidth,
-    textureHeight,
-    iFormatRG,
-    formatRG,
-    texType,
-    gl.NEAREST
-  );
+  density = createDoubleFBO(0, textureWidth, textureHeight, iFormat, gl.RGBA, texType, support_linear_float ? gl.LINEAR : gl.NEAREST);
+  velocity = createDoubleFBO(2, textureWidth, textureHeight, iFormatRG, formatRG, texType, support_linear_float ? gl.LINEAR : gl.NEAREST);
+  divergence = createFBO(4, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST);
+  curl = createFBO(5, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST);
+  pressure = createDoubleFBO(6, textureWidth, textureHeight, iFormatRG, formatRG, texType, gl.NEAREST);
 }
 
 function createFBO(texId, w, h, internalFormat, format, type, param) {
@@ -240,13 +266,7 @@ function createFBO(texId, w, h, internalFormat, format, type, param) {
   gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);
   let fbo = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
-  gl.framebufferTexture2D(
-    gl.FRAMEBUFFER,
-    gl.COLOR_ATTACHMENT0,
-    gl.TEXTURE_2D,
-    texture,
-    0
-  );
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
   gl.viewport(0, 0, w, h);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return [texture, fbo, texId];
@@ -256,17 +276,9 @@ function createDoubleFBO(texId, w, h, internalFormat, format, type, param) {
   let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);
   let fbo2 = createFBO(texId + 1, w, h, internalFormat, format, type, param);
   return {
-    get first() {
-      return fbo1;
-    },
-    get second() {
-      return fbo2;
-    },
-    swap: function swap() {
-      let temp = fbo1;
-      fbo1 = fbo2;
-      fbo2 = temp;
-    }
+    get first() { return fbo1; },
+    get second() { return fbo2; },
+    swap: function swap() { let temp = fbo1; fbo1 = fbo2; fbo2 = temp; }
   };
 }
 
@@ -276,33 +288,19 @@ initFramebuffers();
 let clearProgram = new GLProgram(baseVertexShader, clearShader);
 let displayProgram = new GLProgram(baseVertexShader, displayShader);
 let splatProgram = new GLProgram(baseVertexShader, splatShader);
-let advectionProgram = new GLProgram(
-  baseVertexShader,
-  support_linear_float ? advectionShader : advectionManualFilteringShader
-);
+let advectionProgram = new GLProgram(baseVertexShader, support_linear_float ? advectionShader : advectionManualFilteringShader);
 let divergenceProgram = new GLProgram(baseVertexShader, divergenceShader);
 let curlProgram = new GLProgram(baseVertexShader, curlShader);
 let vorticityProgram = new GLProgram(baseVertexShader, vorticityShader);
 let pressureProgram = new GLProgram(baseVertexShader, pressureShader);
-let gradienSubtractProgram = new GLProgram(
-  baseVertexShader,
-  gradientSubtractShader
-);
+let gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader);
 
 // ===== BLIT =====
 let blit = (function () {
   gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]),
-    gl.STATIC_DRAW
-  );
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
-  gl.bufferData(
-    gl.ELEMENT_ARRAY_BUFFER,
-    new Uint16Array([0, 1, 2, 0, 2, 3]),
-    gl.STATIC_DRAW
-  );
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
   gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
   gl.enableVertexAttribArray(0);
   return function (destination) {
@@ -316,53 +314,27 @@ function splat(x, y, dx, dy, color) {
   splatProgram.bind();
   gl.uniform1i(splatProgram.uniforms.uTarget, velocity.first[2]);
   gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
-  gl.uniform2f(
-    splatProgram.uniforms.point,
-    x / canvas.width,
-    1.0 - y / canvas.height
-  );
+  gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);
   gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
   gl.uniform1f(splatProgram.uniforms.radius, config.SPLAT_RADIUS);
   blit(velocity.second[1]);
   velocity.swap();
+  
   gl.uniform1i(splatProgram.uniforms.uTarget, density.first[2]);
-  gl.uniform3f(
-    splatProgram.uniforms.color,
-    color[0] * 0.3,
-    color[1] * 0.3,
-    color[2] * 0.3
-  );
+  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+  const densityIntensity = isDark ? 0.65 : 0.45;
+  gl.uniform3f(splatProgram.uniforms.color, color[0] * densityIntensity, color[1] * densityIntensity, color[2] * densityIntensity);
   blit(density.second[1]);
   density.swap();
 }
 
 // ===== RESIZE =====
 function resizeCanvas() {
-  (canvas.width !== canvas.clientWidth ||
-    canvas.height !== canvas.clientHeight) &&
-    ((canvas.width = canvas.clientWidth),
-    (canvas.height = canvas.clientHeight),
-    initFramebuffers());
+  if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    initFramebuffers();
   }
-
-// ===== COLORES DE LA MARCA CON TRANSICIÓN =====
-const brandColors = [
-  //[0.874, 0.741, 0.725], // Rosa (#DFBDB9)
-  [0.729, 0.071, 0.302], // Bordo (#BA124D)
-  [0.000, 0.247, 0.322]  // Teal (#003F52)
-];
-
-let currentColor = brandColors[0];
-let targetColor = brandColors[1];
-let transitionProgress = 0;
-const transitionSpeed = 0.008;
-
-function lerpColor(colorA, colorB, t) {
-  return [
-    colorA[0] + (colorB[0] - colorA[0]) * t,
-    colorA[1] + (colorB[1] - colorA[1]) * t,
-    colorA[2] + (colorB[2] - colorA[2]) * t
-  ];
 }
 
 let colorArr = currentColor;
@@ -370,25 +342,17 @@ let count = 0;
 
 // ===== DETECTAR ELEMENTOS DE TEXTO =====
 function isMouseOverTextElement(target) {
-  // Listado de selectores que necesitan "modo apaciguado"
   const textSelectors = [
-    'p', '.hero-content p','h1', 'h2', 'h3', 'h4', 'h5', '.hero-content h1',
-    '.hero-content h2', '.eyebrow', 'a.sheet-link', '.sheet-link span',
-    '.menu-btn', '.sheet-link-desc', '.sheet-link-main'
+    'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'span', 'button', '.btn', '.card-content', '.hero-content'
   ];
-  
-  // Verificar si el target o sus ancestros coinciden con algún selector
   for (const selector of textSelectors) {
-    if (target.closest(selector)) {
-      return true;
-    }
+    if (target.closest(selector)) return true;
   }
   return false;
 }
 
 // ===== EVENTOS CON COLORES DE MARCA =====
 document.addEventListener("mousemove", function (e) {
-  // Detectar si estamos sobre un elemento de texto
   const overText = isMouseOverTextElement(e.target);
   
   count++;
@@ -409,18 +373,16 @@ document.addEventListener("mousemove", function (e) {
   pointers[0].color = colorArr;
   pointers[0].moved = pointers[0].down;
   
-  // Aplicar multiplicador diferente según si estamos sobre texto o no
-  const multiplier = overText ? 8 : 10.0; // Reducido a 4x sobre texto (vs 10x)
+  // ✅ CLAVE: Reducir la fuerza del fluido sobre texto para no dificultar la lectura
+  const multiplier = overText ? 4.0 : 10.0; 
   
-  pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * multiplier;
-  pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * multiplier;
-  pointers[0].x = e.clientX - canvas.offsetLeft;
-  pointers[0].y = e.clientY - canvas.offsetTop;
+  pointers[0].dx = (e.clientX - pointers[0].x) * multiplier;
+  pointers[0].dy = (e.clientY - pointers[0].y) * multiplier;
+  pointers[0].x = e.clientX;
+  pointers[0].y = e.clientY;
 });
 
-canvas.addEventListener(
-  "touchmove",
-  function (e) {
+canvas.addEventListener("touchmove", function (e) {
   e.preventDefault();
   let touches = e.targetTouches;
   count++;
@@ -439,21 +401,17 @@ canvas.addEventListener(
   
   for (let i = 0, len = touches.length; i < len; i++) {
     if (i >= pointers.length) pointers.push(new pointerPrototype());
-      pointers[i].id = touches[i].identifier;
-      pointers[i].down = true;
-      pointers[i].x = touches[i].pageX;
-      pointers[i].y = touches[i].pageY;
-      pointers[i].color = colorArr;
     let pointer = pointers[i];
-      pointer.moved = pointer.down;
+    pointer.id = touches[i].identifier;
+    pointer.down = true;
+    pointer.color = colorArr;
+    pointer.moved = true;
     pointer.dx = (touches[i].pageX - pointer.x) * 10.0;
     pointer.dy = (touches[i].pageY - pointer.y) * 10.0;
     pointer.x = touches[i].pageX;
     pointer.y = touches[i].pageY;
   }
-  },
-  false
-);
+}, { passive: false });
 
 // ===== LOOP PRINCIPAL =====
 let lastTime = Date.now();
@@ -465,27 +423,17 @@ function update() {
   gl.viewport(0, 0, textureWidth, textureHeight);
 
   advectionProgram.bind();
-  gl.uniform2f(
-    advectionProgram.uniforms.texelSize,
-    1.0 / textureWidth,
-    1.0 / textureHeight
-  );
+  gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
   gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.first[2]);
   gl.uniform1i(advectionProgram.uniforms.uSource, velocity.first[2]);
   gl.uniform1f(advectionProgram.uniforms.dt, dt);
-  gl.uniform1f(
-    advectionProgram.uniforms.dissipation,
-    config.VELOCITY_DISSIPATION
-  );
+  gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
   blit(velocity.second[1]);
   velocity.swap();
 
   gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.first[2]);
   gl.uniform1i(advectionProgram.uniforms.uSource, density.first[2]);
-  gl.uniform1f(
-    advectionProgram.uniforms.dissipation,
-    config.DENSITY_DISSIPATION
-  );
+  gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
   blit(density.second[1]);
   density.swap();
 
@@ -498,20 +446,12 @@ function update() {
   }
 
   curlProgram.bind();
-  gl.uniform2f(
-    curlProgram.uniforms.texelSize,
-    1.0 / textureWidth,
-    1.0 / textureHeight
-  );
+  gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
   gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.first[2]);
   blit(curl[1]);
 
   vorticityProgram.bind();
-  gl.uniform2f(
-    vorticityProgram.uniforms.texelSize,
-    1.0 / textureWidth,
-    1.0 / textureHeight
-  );
+  gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
   gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.first[2]);
   gl.uniform1i(vorticityProgram.uniforms.uCurl, curl[2]);
   gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
@@ -520,11 +460,7 @@ function update() {
   velocity.swap();
 
   divergenceProgram.bind();
-  gl.uniform2f(
-    divergenceProgram.uniforms.texelSize,
-    1.0 / textureWidth,
-    1.0 / textureHeight
-  );
+  gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
   gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.first[2]);
   blit(divergence[1]);
 
@@ -538,11 +474,7 @@ function update() {
   pressure.swap();
 
   pressureProgram.bind();
-  gl.uniform2f(
-    pressureProgram.uniforms.texelSize,
-    1.0 / textureWidth,
-    1.0 / textureHeight
-  );
+  gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
   gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence[2]);
   pressureTexId = pressure.first[2];
   gl.activeTexture(gl.TEXTURE0 + pressureTexId);
@@ -554,11 +486,7 @@ function update() {
   }
 
   gradienSubtractProgram.bind();
-  gl.uniform2f(
-    gradienSubtractProgram.uniforms.texelSize,
-    1.0 / textureWidth,
-    1.0 / textureHeight
-  );
+  gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
   gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.first[2]);
   gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.first[2]);
   blit(velocity.second[1]);
@@ -567,6 +495,10 @@ function update() {
   gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   displayProgram.bind();
   gl.uniform1i(displayProgram.uniforms.uTexture, density.first[2]);
+  const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark';
+  if (displayProgram.uniforms.uIsDark !== undefined) {
+    gl.uniform1f(displayProgram.uniforms.uIsDark, isDarkTheme ? 1.0 : 0.0);
+  }
   blit(null);
 
   requestAnimationFrame(update);
@@ -574,6 +506,52 @@ function update() {
 
 update();
 
+
+/* captura del movimiento del mouse*/
+let isFirstMove = true;
+
+document.addEventListener("mousemove", function (e) {
+  if (isFirstMove) {
+    pointers[0].x = e.clientX;
+    pointers[0].y = e.clientY;
+    isFirstMove = false;
+    return;
+  }
+
+  const overText = isMouseOverTextElement(e.target);
+  
+  count++;
+  if (count > 1) {
+    transitionProgress += transitionSpeed;
+    if (transitionProgress >= 1) {
+      transitionProgress = 0;
+      let currentIndex = brandColors.indexOf(currentColor);
+      let nextIndex = (currentIndex + 1) % brandColors.length;
+      currentColor = targetColor;
+      targetColor = brandColors[nextIndex];
+    }
+    colorArr = lerpColor(currentColor, targetColor, transitionProgress);
+    count = 0;
+  }
+
+  pointers[0].down = true;
+  pointers[0].color = colorArr;
+  pointers[0].moved = true;
+  
+  // Fuerza balanceada sobre el texto y sobre el fondo
+  const multiplier = overText ? 4.0 : 8.0; 
+  
+  pointers[0].dx = (e.clientX - pointers[0].x) * multiplier;
+  pointers[0].dy = (e.clientY - pointers[0].y) * multiplier;
+  pointers[0].x = e.clientX;
+  pointers[0].y = e.clientY;
+});
+
+window.addEventListener("mouseleave", function () {
+  isFirstMove = true;
+  pointers[0].moved = false;
+});
+
 // ===== REDIMENSIONAR AL CAMBIAR TAMAÑO DE VENTANA =====
 window.addEventListener("resize", function() {
   canvas.width = window.innerWidth;

style/main.css

@@ -108,11 +108,13 @@
 html {
   font-size: var(--font-size-base);
   scroll-behavior: smooth;
+  background-color: var(--bg-base);
 }
 
 body {
   font-family: var(--font-family-base);
-  background-color: var(--bg-base);
+  /*background-color: var(--bg-base);*/
+  background-color: transparent;
   color: var(--text-primary);
   line-height: 1.5;
   min-height: 100vh;
@@ -514,7 +516,8 @@ body.menu-open .site-header {
    ============================================ */
 main section {
   padding: var(--spacing-md) var(--spacing-sm);
-  border-bottom: 1px dashed var(--border);
+  background-color: transparent;
+  /*border-bottom: 1px dashed var(--border);*/
 }
 main section h2 { margin-bottom: var(--spacing-sm); font-size: 1.5rem; }
 
@@ -1681,56 +1684,250 @@ RESPONSIVE DIAGNÓSTICO
 /* ============================================
    SECCIÓN CTA FINAL
    ============================================ */
-.cta-section { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); }
+.cta-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
 
 .cta-card {
-  max-width: 900px; margin: 0 auto; background-color: var(--brand-teal);
-  border-radius: 24px; padding: var(--spacing-lg) var(--spacing-md);
-  text-align: center; position: relative; overflow: hidden;
-  box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.4);
+  max-width: 900px;
+  margin: 0 auto;
+  /* Fondo teal sólido y oscuro para máximo contraste */
+  background-color: var(--brand-teal);
+  border-radius: 24px;
+  padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  /* Sombra más pronunciada */
+  box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.5);
+  /* Borde sutil para definir mejor */
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.cta-card::before, .cta-card::after {
-  content: ""; position: absolute; width: 300px; height: 300px;
-  border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none;
+/* Glows decorativos con degradé crimson-teal */
+.cta-card::before,
+.cta-card::after {
+  content: "";
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  filter: blur(100px);
+  opacity: 0.4;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Glow superior izquierdo - Crimson/Rosa */
+.cta-card::before {
+  top: -150px;
+  left: -150px;
+  background: radial-gradient(
+    circle,
+    rgba(186, 18, 77, 0.6) 0%,
+    rgba(186, 18, 77, 0.3) 40%,
+    transparent 70%
+  );
+  animation: glowPulse 8s ease-in-out infinite;
+}
+
+/* Glow inferior derecho - Teal/Rose */
+.cta-card::after {
+  bottom: -150px;
+  right: -150px;
+  background: radial-gradient(
+    circle,
+    rgba(0, 168, 140, 0.5) 0%,
+    rgba(223, 189, 185, 0.3) 40%,
+    transparent 70%
+  );
+  animation: glowPulse 8s ease-in-out infinite reverse;
+}
+
+/* Animación sutil de los glows */
+@keyframes glowPulse {
+  0%, 100% {
+    transform: scale(1) translate(0, 0);
+    opacity: 0.4;
+  }
+  50% {
+    transform: scale(1.1) translate(20px, -20px);
+    opacity: 0.5;
+  }
 }
-.cta-card::before { top: -100px; left: -100px; background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); }
-.cta-card::after { bottom: -100px; right: -100px; background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); }
 
 .cta-title {
-  font-family: var(--font-title); font-style: italic;
-  font-size: clamp(2rem, 4vw, 3rem); color: #ffffff;
-  margin-bottom: var(--spacing-sm); line-height: 1.15; position: relative; z-index: 1;
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: clamp(2rem, 4vw, 3rem);
+  color: #ffffff;
+  margin-bottom: var(--spacing-sm);
+  line-height: 1.15;
+  position: relative;
+  z-index: 1;
+  /* Sombra de texto para mejorar legibilidad */
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
+
 .cta-subtitle {
-  font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.15rem);
-  color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto var(--spacing-md);
-  line-height: 1.6; position: relative; z-index: 1;
+  font-family: var(--font-body);
+  font-size: clamp(1rem, 2vw, 1.15rem);
+  color: rgba(255, 255, 255, 0.9);
+  max-width: 600px;
+  margin: 0 auto var(--spacing-md);
+  line-height: 1.6;
+  position: relative;
+  z-index: 1;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }
 
 .cta-buttons {
-  display: flex; justify-content: center; gap: var(--spacing-sm);
-  flex-wrap: wrap; position: relative; z-index: 1;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 1;
 }
 
+/* Botón primario - Blanco con hover crimson */
 .btn-cta-primary {
-  background-color: #ffffff; color: var(--brand-teal); border: 1.5px solid #ffffff;
-  padding: 0.85rem 2rem; border-radius: 999px; font-family: var(--font-small);
-  font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
-  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2);
-}
-.btn-cta-primary:hover {
-  background-color: var(--brand-crimson); color: #ffffff; border-color: var(--brand-crimson);
-  transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45);
+  background-color: #ffffff;
+  color: var(--brand-teal);
+  border: 2px solid #ffffff;
+  padding: 0.85rem 2.2rem;
+  border-radius: 999px;
+  font-family: var(--font-small);
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.25);
+  text-decoration: none;
+  display: inline-block;
 }
 
-.btn-cta-secondary {
-  background-color: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.6);
-  padding: 0.85rem 2rem; border-radius: 999px; font-family: var(--font-small);
-  font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
+.btn-cta-primary:hover {
+  background-color: var(--brand-crimson);
+  color: #ffffff;
+  border-color: var(--brand-crimson);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px -4px rgba(186, 18, 77, 0.5);
 }
+
+/* Botón secundario - Transparente con borde blanco */
+.btn-cta-secondary {
+  background-color: transparent;
+  color: #ffffff;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  padding: 0.85rem 2.2rem;
+  border-radius: 999px;
+  font-family: var(--font-small);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  text-decoration: none;
+  display: inline-block;
+}
+
 .btn-cta-secondary:hover {
-  background-color: rgba(255, 255, 255, 0.1); border-color: #ffffff; transform: translateY(-2px);
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: #ffffff;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px -4px rgba(255, 255, 255, 0.2);
+}
+
+/* ===== CANVAS FLUIDO Y APILAMIENTO ===== */
+main {
+  position: relative;
+  z-index: 1;
+}
+
+#footer-container {
+  position: relative;
+  z-index: 2;
+}
+
+#fluid-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+#fluidCanvas {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  background: transparent;
+}
+
+.hero-section,
+.servicios-section,
+.diagnostico-section,
+.metodologia-section,
+.planes-section,
+.portfolio-section,
+.cta-section {
+  background-color: transparent !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .cta-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  
+  .cta-card {
+    padding: var(--spacing-lg) var(--spacing-md);
+    border-radius: 20px;
+  }
+  
+  .cta-card::before,
+  .cta-card::after {
+    width: 250px;
+    height: 250px;
+    filter: blur(60px);
+  }
+  
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn-cta-primary,
+  .btn-cta-secondary {
+    width: 100%;
+    max-width: 320px;
+  }
+}
+
+@media (max-width: 480px) {
+  .cta-card {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  
+  .cta-title {
+    font-size: 1.8rem;
+  }
+  
+  .cta-subtitle {
+    font-size: 1rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cta-card::before,
+  .cta-card::after {
+    animation: none;
+  }
+  
+  .btn-cta-primary,
+  .btn-cta-secondary {
+    transition: none;
+  }
 }
 
 @media (max-width: 768px) {