No somos una agencia tradicional.
Combinamos el arte del marketing digital con la ciencia de los datos.
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.
+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.
Es el alma y la identidad de cada marca.
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.
+Representa la arquitectura, el método, 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.
- Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta. -
+ Trabajamos en equipo ayudando a las PyMEs a competir y crecer. @@ -172,7 +171,7 @@Desarrollo de marca completo, mascota propia y administración continua de redes.
@@ -184,7 +183,7 @@Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.
@@ -196,7 +195,7 @@Empresa de Tecnología: Branding + Web a medida + RRSS activas.
@@ -208,7 +207,7 @@Consultores Independientes: Web a medida + Gestión estratégica de RRSS.
diff --git a/scripts/fluid.js b/scripts/fluid.js index 85c8be7..69ccdc3 100644 --- a/scripts/fluid.js +++ b/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 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; } -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,66 +151,90 @@ 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); }" + "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); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; uniform float value; void main () { gl_FragColor = value * texture2D(uTexture, vUv); }" ); 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( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTarget; uniform float aspectRatio; uniform vec3 color; uniform vec2 point; uniform float radius; void main () { vec2 p = vUv - point.xy; p.x *= aspectRatio; vec3 splat = exp(-dot(p, p) / radius) * color; vec3 base = texture2D(uTarget, vUv).xyz; gl_FragColor = vec4(base + splat, 1.0); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTarget; uniform float aspectRatio; uniform vec3 color; uniform vec2 point; uniform float radius; void main () { vec2 p = vUv - point.xy; p.x *= aspectRatio; vec3 splat = exp(-dot(p, p) / radius) * color; vec3 base = texture2D(uTarget, vUv).xyz; gl_FragColor = vec4(base + splat, 1.0); }" ); let advectionManualFilteringShader = compileShader( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; vec4 bilerp (in sampler2D sam, in vec2 p) { vec4 st; st.xy = floor(p - 0.5) + 0.5; st.zw = st.xy + 1.0; vec4 uv = st * texelSize.xyxy; vec4 a = texture2D(sam, uv.xy); vec4 b = texture2D(sam, uv.zy); vec4 c = texture2D(sam, uv.xw); vec4 d = texture2D(sam, uv.zw); vec2 f = p - st.xy; return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); } void main () { vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy; gl_FragColor = dissipation * bilerp(uSource, coord); gl_FragColor.a = 1.0; }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; vec4 bilerp (in sampler2D sam, in vec2 p) { vec4 st; st.xy = floor(p - 0.5) + 0.5; st.zw = st.xy + 1.0; vec4 uv = st * texelSize.xyxy; vec4 a = texture2D(sam, uv.xy); vec4 b = texture2D(sam, uv.zy); vec4 c = texture2D(sam, uv.xw); vec4 d = texture2D(sam, uv.zw); vec2 f = p - st.xy; return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); } void main () { vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy; gl_FragColor = dissipation * bilerp(uSource, coord); gl_FragColor.a = 1.0; }" ); let advectionShader = compileShader( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; void main () { vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize; gl_FragColor = dissipation * texture2D(uSource, coord); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 texelSize; uniform float dt; uniform float dissipation; void main () { vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize; gl_FragColor = dissipation * texture2D(uSource, coord); }" ); let divergenceShader = compileShader( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; vec2 sampleVelocity (in vec2 uv) { vec2 multiplier = vec2(1.0, 1.0); if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; } if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; } if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; } if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; } return multiplier * texture2D(uVelocity, uv).xy; } void main () { float L = sampleVelocity(vL).x; float R = sampleVelocity(vR).x; float T = sampleVelocity(vT).y; float B = sampleVelocity(vB).y; float div = 0.5 * (R - L + T - B); gl_FragColor = vec4(div, 0.0, 0.0, 1.0); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; vec2 sampleVelocity (in vec2 uv) { vec2 multiplier = vec2(1.0, 1.0); if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; } if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; } if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; } if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; } return multiplier * texture2D(uVelocity, uv).xy; } void main () { float L = sampleVelocity(vL).x; float R = sampleVelocity(vR).x; float T = sampleVelocity(vT).y; float B = sampleVelocity(vB).y; float div = 0.5 * (R - L + T - B); gl_FragColor = vec4(div, 0.0, 0.0, 1.0); }" ); let curlShader = compileShader( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; void main () { float L = texture2D(uVelocity, vL).y; float R = texture2D(uVelocity, vR).y; float T = texture2D(uVelocity, vT).x; float B = texture2D(uVelocity, vB).x; float vorticity = R - L - T + B; gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; void main () { float L = texture2D(uVelocity, vL).y; float R = texture2D(uVelocity, vR).y; float T = texture2D(uVelocity, vT).x; float B = texture2D(uVelocity, vB).x; float vorticity = R - L - T + B; gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0); }" ); let vorticityShader = compileShader( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; uniform sampler2D uCurl; uniform float curl; uniform float dt; void main () { float L = texture2D(uCurl, vL).y; float R = texture2D(uCurl, vR).y; float T = texture2D(uCurl, vT).x; float B = texture2D(uCurl, vB).x; float C = texture2D(uCurl, vUv).x; vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L)); force *= 1.0 / length(force + 0.00001) * curl * C; vec2 vel = texture2D(uVelocity, vUv).xy; gl_FragColor = vec4(vel + force * dt, 0.0, 1.0); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uVelocity; uniform sampler2D uCurl; uniform float curl; uniform float dt; void main () { float L = texture2D(uCurl, vL).y; float R = texture2D(uCurl, vR).y; float T = texture2D(uCurl, vT).x; float B = texture2D(uCurl, vB).x; float C = texture2D(uCurl, vUv).x; vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L)); force *= 1.0 / length(force + 0.00001) * curl * C; vec2 vel = texture2D(uVelocity, vUv).xy; gl_FragColor = vec4(vel + force * dt, 0.0, 1.0); }" ); let pressureShader = compileShader( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uDivergence; vec2 boundary (in vec2 uv) { uv = min(max(uv, 0.0), 1.0); return uv; } void main () { float L = texture2D(uPressure, boundary(vL)).x; float R = texture2D(uPressure, boundary(vR)).x; float T = texture2D(uPressure, boundary(vT)).x; float B = texture2D(uPressure, boundary(vB)).x; float C = texture2D(uPressure, vUv).x; float divergence = texture2D(uDivergence, vUv).x; float pressure = (L + R + B + T - divergence) * 0.25; gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uDivergence; vec2 boundary (in vec2 uv) { uv = min(max(uv, 0.0), 1.0); return uv; } void main () { float L = texture2D(uPressure, boundary(vL)).x; float R = texture2D(uPressure, boundary(vR)).x; float T = texture2D(uPressure, boundary(vT)).x; float B = texture2D(uPressure, boundary(vB)).x; float C = texture2D(uPressure, vUv).x; float divergence = texture2D(uDivergence, vUv).x; float pressure = (L + R + B + T - divergence) * 0.25; gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); }" ); let gradientSubtractShader = compileShader( gl.FRAGMENT_SHADER, - "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uVelocity; vec2 boundary (in vec2 uv) { uv = min(max(uv, 0.0), 1.0); return uv; } void main () { float L = texture2D(uPressure, boundary(vL)).x; float R = texture2D(uPressure, boundary(vR)).x; float T = texture2D(uPressure, boundary(vT)).x; float B = texture2D(uPressure, boundary(vB)).x; vec2 velocity = texture2D(uVelocity, vUv).xy; velocity.xy -= vec2(R - L, T - B); gl_FragColor = vec4(velocity, 0.0, 1.0); }" + "precision highp float; precision mediump sampler2D; varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform sampler2D uPressure; uniform sampler2D uVelocity; vec2 boundary (in vec2 uv) { uv = min(max(uv, 0.0), 1.0); return uv; } void main () { float L = texture2D(uPressure, boundary(vL)).x; float R = texture2D(uPressure, boundary(vR)).x; float T = texture2D(uPressure, boundary(vT)).x; float B = texture2D(uPressure, boundary(vB)).x; vec2 velocity = texture2D(uVelocity, vUv).xy; velocity.xy -= vec2(R - L, T - B); gl_FragColor = vec4(velocity, 0.0, 1.0); }" ); // ===== FRAMEBUFFERS ===== @@ -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()); -} - -// ===== 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 - ]; + if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + initFramebuffers(); + } } 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,51 +373,45 @@ 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) { - e.preventDefault(); - let touches = e.targetTouches; - count++; - if (count > 20) { - 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; +canvas.addEventListener("touchmove", function (e) { + e.preventDefault(); + let touches = e.targetTouches; + count++; + if (count > 20) { + transitionProgress += transitionSpeed; + if (transitionProgress >= 1) { + transitionProgress = 0; + let currentIndex = brandColors.indexOf(currentColor); + let nextIndex = (currentIndex + 1) % brandColors.length; + currentColor = targetColor; + targetColor = brandColors[nextIndex]; } - - 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.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 -); + colorArr = lerpColor(currentColor, targetColor, transitionProgress); + count = 0; + } + + for (let i = 0, len = touches.length; i < len; i++) { + if (i >= pointers.length) pointers.push(new pointerPrototype()); + let pointer = pointers[i]; + 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; + } +}, { 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; diff --git a/scripts/main.js b/scripts/main.js index ebdfa29..92bdb6a 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -734,4 +734,4 @@ document.addEventListener('DOMContentLoaded', () => { initPlanesFocusEffect(); initPortfolioCarousel(); initMarqueeHover(); // ← además, esta NUNCA se está llamando -}); \ No newline at end of file +}); diff --git a/style/main-PatriPad.css b/style/main-PatriPad.css new file mode 100644 index 0000000..0ef25b6 --- /dev/null +++ b/style/main-PatriPad.css @@ -0,0 +1,1815 @@ +/* ============================================ + FUENTES DE MARCA + ============================================ */ +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=WindSong&display=swap'); + +@font-face { + font-family: 'Kaleagnetta'; + src: url(../assets/fonts/Kaleagnetta.woff2); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +/* ============================================ + VARIABLES DE TEMA (modo claro por defecto) + ============================================ */ +:root { + /* Paleta Base / Primitivas de Marca */ + --brand-plum: #170c1d; + --brand-crimson: #ba124d; + --brand-teal: #003f52; + --brand-sage-light: #eaf0ee; + --brand-rose-muted: #dfbdb9; + --bg-dark-web: #110916; + --brand-teal-contraste: var(--brand-teal); + --brand-crimson-contraste: var(--brand-crimson); + + /* Tema Claro (Por Defecto) */ + --bg-base: var(--brand-sage-light); + --bg-surface: #ffffff; + --bg-surface-elevated: #f5f9f8; + --bg-icon-contrast: var(--brand-teal); + + --text-primary: var(--brand-plum); + --text-secondary: var(--brand-teal); + --text-muted: rgba(34, 23, 40, 0.65); + --text-on-accent: #ffffff; + + --btn-primary-bg: var(--brand-crimson); + --btn-primary-hover: #9c0f40; + --btn-secondary-bg: var(--brand-teal); + --btn-secondary-hover: #002c3a; + + --badge-bg: var(--brand-rose-muted); + --badge-text: var(--brand-plum); + + --border: rgba(0, 63, 82, 0.12); + --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08); + --glow-animation: rgba(186, 18, 77, 0.25); + --bg-contraste-teal: rgba(0,63,82, 1); + + /* Tipografía de Marca */ + --font-title: 'Literata', serif; + --font-subtitle: 'Literata', serif; + --font-body: 'Raleway', sans-serif; + --font-small: 'Jost', sans-serif; + --font-signature: 'Windsong', cursive; + --font-signature2: 'Kaleagnetta', cursive; + + --font-family-base: var(--font-body); + --font-size-base: 16px; + + /* Espaciados */ + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 2rem; + --spacing-lg: 4rem; + --header-height: 72px; +} + +/* Modo oscuro */ +[data-theme="dark"] { + --bg-base: var(--bg-dark-web); + --bg-surface: #170c1d; + --bg-surface-elevated: #221728; + --bg-icon-contrast: var(--brand-sage-light); + --brand-teal-contraste: #116c88; + --brand-crimson-contraste: #d81a5c; + + --text-primary: var(--brand-sage-light); + --text-secondary: var(--brand-rose-muted); + --text-muted: rgba(234, 240, 238, 0.65); + --text-on-accent: #ffffff; + + --btn-primary-bg: var(--brand-crimson); + --btn-primary-hover: #d81a5c; + --btn-secondary-bg: #0b5066; + --btn-secondary-hover: #10637d; + + --badge-bg: rgba(223, 189, 185, 0.18); + --badge-text: var(--brand-rose-muted); + + --border: rgba(234, 240, 238, 0.12); + --shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45); + --glow-animation: rgba(186, 18, 77, 0.45); + --bg-contraste-teal: rgba(0,63,82, 0.5); +} + +/* ============================================ + RESET BÁSICO + ============================================ */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: var(--font-size-base); + scroll-behavior: smooth; +} + +body { + font-family: var(--font-family-base); + background-color: transparent; + color: var(--text-primary); + line-height: 1.5; + min-height: 100vh; + display: flex; + flex-direction: column; + transition: background-color 0.3s ease, color 0.3s ease; +} + +h1, h2, h3 { + font-family: var(--font-title); + font-style: italic; + font-weight: 700; +} + +h4, h5, h6 { + font-family: var(--font-subtitle); + font-style: italic; + font-weight: 400; +} + +small { font-family: var(--font-small); } +button, .btn, [class*="btn-"] { font-family: var(--font-small); } +.signature, .firma { font-family: var(--font-signature); font-weight: 400; } + +body.menu-open { + overflow: hidden; + padding-right: var(--scrollbar-width, 0px); +} + +main { flex: 1; } +img, video { max-width: 100%; display: block; } +a { color: inherit; text-decoration: none; } +ul { list-style: none; } + +/* ============================================ + HEADER Y LOGOS + ============================================ */ +#menu-container { + position: sticky; + top: 0; + z-index: 100; +} + +.badge-filosofia { + display: inline-block; + padding: 0.4rem 1rem; + border-radius: 999px; + color: var(--badge-text); + font-family: var(--font-small); + font-weight: 400; + font-size: 1rem; + letter-spacing: 0.5px; + text-transform: uppercase; + opacity: 0; + animation: fadeInUp 0.9s ease-out 0s forwards; +} + +.site-header { + background-color: var(--bg-surface); + border-bottom: 1px solid var(--border); + padding: var(--spacing-sm); + box-shadow: var(--shadow); + transition: transform 0.35s ease, box-shadow 0.35s ease; + will-change: transform; +} + +.site-header.is-hidden { + transform: translateY(-100%); + box-shadow: none; +} + +.site-header.is-scrolled { + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); +} + +body.menu-open .site-header { + transform: translateY(0) !important; +} + +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1400px; + margin: 0 auto; +} + +.logo { display: flex; align-items: center; } +.logo img { height: 40px; width: auto; } +.logo-light { display: block; } +.logo-dark { display: none; } + +[data-theme="dark"] .logo-light { display: none; } +[data-theme="dark"] .logo-dark { display: block; } + +/* ============================================ + BOTONES DE NAVEGACIÓN (HEADER) + ============================================ */ +.nav-actions { + display: flex; + gap: var(--spacing-sm); + align-items: center; +} + +.menu-toggle { + background: none; + border: 1px solid var(--border); + color: var(--text-primary); + padding: 0.45rem 1.1rem; + cursor: pointer; + font-size: 0.95rem; + font-weight: 500; + border-radius: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all 0.3s ease; +} + +.menu-toggle:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--text-primary); +} + +.menu-icon { + width: 18px; + height: 18px; + display: block; + flex-shrink: 0; + transition: transform 0.2s ease; +} + +.menu-toggle:hover .menu-icon { transform: scale(1.08); } + +.theme-toggle { + background: none; + border: 1px solid var(--border); + color: var(--text-primary); + padding: 0; + width: 40px; + height: 40px; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + +.theme-toggle:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--text-primary); +} + +.theme-icon { + width: 20px; + height: 20px; + display: block; + position: absolute; + transition: transform 0.5s ease, opacity 0.5s ease; +} + +[data-theme="light"] .icon-sun, :root:not([data-theme="dark"]) .icon-sun { + opacity: 0; transform: rotate(180deg); pointer-events: none; +} +[data-theme="light"] .icon-moon, :root:not([data-theme="dark"]) .icon-moon { + opacity: 1; transform: rotate(0deg); pointer-events: auto; +} +[data-theme="dark"] .icon-sun { + opacity: 1; transform: rotate(0deg); pointer-events: auto; +} +[data-theme="dark"] .icon-moon { + opacity: 0; transform: rotate(-180deg); pointer-events: none; +} + +/* ============================================ + MENÚ DESPLEGABLE (CON EFECTO AURORA) + ============================================ */ +.menu-overlay { + position: fixed; + top: 0; left: 0; + width: 100%; height: 100%; + background-color: rgba(34, 23, 40, 0.55); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + opacity: 0; visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + z-index: 998; +} + +.menu-overlay.is-open { opacity: 1; visibility: visible; } + +.fullscreen-menu { + position: fixed; + bottom: 0; left: 0; + width: 100%; height: 52vh; + background-color: var(--bg-surface); + border-top: 1px solid var(--border); + border-top-left-radius: 20px; + border-top-right-radius: 20px; + transform: translateY(100%); + transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; + z-index: 999; + overflow: hidden; + padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm); + box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2); + isolation: isolate; +} + +.fullscreen-menu.is-open { transform: translateY(0); } + +.fullscreen-menu::before { + content: ""; + position: absolute; + top: -40%; left: -20%; + width: 140%; height: 180%; + pointer-events: none; + z-index: -2; + filter: blur(55px); + border-radius: 50%; + opacity: 0.35; + background: radial-gradient(ellipse at center, rgba(0, 168, 140, 0.32) 0%, rgba(0, 63, 82, 0.12) 45%, transparent 70%); + will-change: transform; +} + +[data-theme="dark"] .fullscreen-menu::before { + opacity: 0.42; + mix-blend-mode: screen; + background: radial-gradient(ellipse at center, rgba(0, 220, 160, 0.35) 0%, rgba(11, 80, 102, 0.28) 45%, transparent 70%); +} + +.menu-close { + position: absolute; + z-index: 3; + top: var(--spacing-sm); right: var(--spacing-md); + background: none; + border: 1px solid var(--border); + color: var(--text-primary); + font-size: 1.1rem; + width: 36px; height: 36px; + cursor: pointer; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + transition: all 0.25s ease; +} + +.menu-close:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--text-primary); + transform: rotate(90deg); +} + +.menu-content { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-lg); + max-width: 1200px; + margin: 0 auto; + padding-top: 0.5rem; + max-height: 100%; + overflow-y: auto; +} + +.menu-column h3 { + font-family: var(--font-small); + font-style: normal; + font-size: 0.85rem; + letter-spacing: 1.2px; + text-transform: uppercase; + margin-bottom: var(--spacing-sm); + color: var(--text-secondary); + font-weight: 700; + border-bottom: 1px solid var(--border); + padding-bottom: 0.4rem; +} + +.menu-column ul { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.menu-column a { + color: var(--text-primary); + font-size: 0.95rem; + padding: 0.25rem 0; + display: inline-block; + transition: transform 0.2s ease, color 0.2s ease; +} + +.menu-column a:hover { + color: var(--btn-primary-bg); + transform: translateX(4px); +} + +.menu-contact-info { margin-bottom: var(--spacing-sm); } +.menu-contact-info p { margin-bottom: 0.35rem; color: var(--text-muted); font-size: 0.9rem; } + +.contact-item { + display: flex; align-items: center; gap: 0.6rem; color: var(--text-primary); +} + +.contact-icon { + width: 20px; height: 16px; + display: inline-block; + background-color: currentColor; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; + -webkit-mask-size: contain; mask-size: contain; +} + +.icon-email { -webkit-mask-image: url("../assets/iconos/buzon.svg"); mask-image: url("../assets/iconos/buzon.svg"); } +.icon-phone { -webkit-mask-image: url("../assets/iconos/contacto.svg"); mask-image: url("../assets/iconos/contacto.svg"); } + +.menu-social { + display: flex; gap: var(--spacing-sm); margin: var(--spacing-xs) 0 var(--spacing-sm); +} +.menu-social a { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); } + +.menu-buttons { + display: flex; flex-direction: column; gap: 0.65rem; +} + +.btn-menu { + display: block; padding: 0.65rem 1.2rem; text-align: center; + border-radius: 999px; font-weight: 600; font-size: 0.9rem; + transition: all 0.25s ease; transform: none !important; +} + +.menu-buttons .btn-menu-primary { + background-color: var(--btn-primary-bg) !important; + color: var(--text-on-accent) !important; + border: 1.5px solid var(--btn-primary-bg); + box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); +} +.menu-buttons .btn-menu-primary:hover { + background-color: var(--btn-primary-hover) !important; + border-color: var(--btn-primary-hover); + color: var(--text-on-accent) !important; + transform: translateY(-1px) !important; +} + +.menu-buttons .btn-menu-secondary { + background-color: transparent !important; + border: 1.5px solid var(--text-secondary); + color: var(--text-primary) !important; +} +.menu-buttons .btn-menu-secondary:hover { + background-color: var(--bg-surface-elevated) !important; + border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg) !important; + transform: translateY(-1px) !important; +} + +.menu-brand { + margin-top: 1.75rem; + display: flex; justify-content: flex-end; align-items: center; + border-top: none; +} +.menu-brand img { height: 36px; width: auto; opacity: 0.95; } +.menu-brand img:hover { opacity: 1; } +.menu-brand a, .menu-brand .logo { transform: none !important; transition: none; } +.menu-brand a:hover, .menu-brand .logo:hover { transform: none !important; color: inherit; } + +/* ============================================ + KEYFRAMES (ONDAS DE AURORA BOREAL) + ============================================ */ +@keyframes aurora-stream-1 { + 0% { transform: translate(0, 0) rotate(0deg) scale(1); } + 50% { transform: translate(7%, 8%) rotate(10deg) scale(1.1); } + 100% { transform: translate(-5%, -6%) rotate(-6deg) scale(0.96); } +} + +@keyframes aurora-stream-2 { + 0% { transform: translate(0, 0) rotate(0deg) scale(1); } + 50% { transform: translate(-8%, -5%) rotate(-12deg) scale(1.14); } + 100% { transform: translate(6%, 7%) rotate(8deg) scale(0.94); } +} + +@media (prefers-reduced-motion: reduce) { + .fullscreen-menu::before, .fullscreen-menu::after { animation: none; } +} + +@media (max-width: 769px) { + .fullscreen-menu { height: 85vh; padding: var(--spacing-md); padding-bottom: var(--spacing-lg); } + .menu-content { grid-template-columns: 1fr; gap: var(--spacing-md); } + .menu-column h3 { font-size: 1.1rem; } + .menu-column a { font-size: 1rem; } +} +@media (max-width: 480px) { .fullscreen-menu { height: 90vh; } } + +/* ============================================ + SECCIONES Y FOOTER + ============================================ */ +main section { + padding: var(--spacing-md) var(--spacing-sm); + background-color: transparent; + /*border-bottom: 1px dashed var(--border);*/ +} +main section h2 { margin-bottom: var(--spacing-sm); font-size: 1.5rem; } + +.site-footer { + border-top: 1px solid var(--border); + padding-top: var(--spacing-lg); + margin-top: auto; + background-color: var(--bg-surface); + position: relative; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--spacing-md); + max-width: 1400px; + margin: 0 auto var(--spacing-md) auto; + padding: 0 var(--spacing-sm); + position: relative; + z-index: 2; +} + +.footer-col h4 { + margin-bottom: var(--spacing-xs); + color: var(--text-secondary); + font-family: 'Literata', serif; + font-style: italic; +} + +.footer-decor-section { + width: 100%; height: 90px; + display: flex; justify-content: center; align-items: center; + margin: var(--spacing-sm) 0; + position: relative; z-index: 1; +} + +.footer-arches-graphic { + width: 1200px; height: 250px; + background-color: currentColor; + color: var(--text-muted); + opacity: 0.15; + -webkit-mask-image: url("../assets/vectores/arcos3.svg"); + mask-image: url("../assets/vectores/arcos3.svg"); + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; + -webkit-mask-size: contain; mask-size: contain; +} + +.footer-bottom { + border-top: 1px solid var(--border); + padding: var(--spacing-sm); + text-align: center; + font-size: 0.875rem; + color: var(--text-muted); + position: relative; z-index: 2; + background-color: var(--bg-surface); + font-family: 'Jost', sans-serif; +} + +/* ============================================ + SECCION HERO + ============================================ */ +.hero-section { + min-height: calc(100vh - var(--header-height)); + background-color: var(--bg-base); + display: flex; align-items: center; justify-content: center; + padding: var(--spacing-lg) var(--spacing-md); + text-align: center; +} + +.hero-content { + max-width: 900px; width: 100%; + display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); +} + +.hero-title { + font-family: var(--font-title); + font-style: italic; font-weight: 700; + font-size: clamp(2rem, 5vw, 3.5rem); + line-height: 1.15; color: var(--text-primary); + opacity: 0; transform: translateY(30px); + animation: fadeInUp 0.9s ease-out 0.2s forwards; +} + +.hero-subtitle { + font-family: var(--font-title); + font-style: italic; font-weight: 400; + font-size: clamp(1rem, 2vw, 1.25rem); + line-height: 1.5; color: var(--text-muted); + max-width: 700px; + opacity: 0; transform: translateY(30px); + animation: fadeInUp 0.9s ease-out 0.5s forwards; +} + +.hero-cta-group { + display: flex; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center; + margin-top: var(--spacing-sm); + opacity: 0; transform: translateY(30px); + animation: fadeInUp 0.9s ease-out 0.8s forwards; +} + +/* ============================================ + BOTONES (reutilizables) + ============================================ */ +.btn { + display: inline-block; padding: 0.85rem 2rem; border-radius: 999px; + font-family: var(--font-small); font-weight: 600; font-size: 0.95rem; + text-align: center; cursor: pointer; transition: all 0.3s ease; + text-decoration: none; +} + +.btn-primary { + background-color: var(--btn-primary-bg); color: var(--text-on-accent); + border: 1.5px solid var(--btn-primary-bg); + box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); +} +.btn-primary:hover { + background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover); + color: var(--text-on-accent); transform: translateY(-2px); + box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45); +} + +.btn-secondary { + background-color: transparent; color: var(--text-primary); + border: 1.5px solid var(--text-secondary); +} +.btn-secondary:hover { + background-color: var(--bg-surface-elevated); border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg); transform: translateY(-2px); +} + +@keyframes fadeInUp { + 0% { opacity: 0; transform: translateY(30px); } + 100% { opacity: 1; transform: translateY(0); } +} + +@keyframes attentionShake { + 0%, 85%, 100% { transform: translateX(0) rotate(0deg); } + 87% { transform: translateX(-4px) rotate(-1deg); } + 89% { transform: translateX(4px) rotate(1deg); } + 91% { transform: translateX(-3px) rotate(-0.5deg); } + 93% { transform: translateX(3px) rotate(0.5deg); } + 95% { transform: translateX(0) rotate(0deg); } +} + +.hero-cta-primary { animation: attentionShake 6s ease-in-out infinite; } +.hero-cta-primary:hover { animation-play-state: paused; } + +@media (prefers-reduced-motion: reduce) { + .hero-title, .hero-subtitle, .hero-cta-group { animation: none; opacity: 1; transform: none; } + .hero-cta-primary { animation: none; } +} + +@media (max-width: 768px) { + .hero-section { padding: var(--spacing-md) var(--spacing-sm); } + .hero-cta-group { flex-direction: column; width: 100%; max-width: 320px; } + .btn { width: 100%; } +} + +/* ============================================ + SECCIÓN SERVICIOS (ACORDEÓN INTERACTIVO) + ============================================ */ +.servicios-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.servicios-container { + display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--spacing-lg); + max-width: 1400px; margin: 0 auto; align-items: center; min-height: 600px; +} + +.servicios-intro { + display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; +} +.servicios-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); line-height: 1.1; } +.servicios-subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 400px; line-height: 1.6; } +.servicios-intro .btn { margin-top: var(--spacing-sm); } + +.servicios-accordion { + position: relative; width: 100%; height: 600px; + background-color: var(--bg-surface); border-radius: 16px; padding: var(--spacing-md); + box-shadow: var(--shadow); border: 1px solid var(--border); + display: flex; flex-direction: column; gap: var(--spacing-xs); overflow: hidden; +} + +.servicio-item { + flex: 1; background-color: var(--bg-surface-elevated); border-radius: 12px; + padding: var(--spacing-sm) var(--spacing-md); display: flex; flex-direction: column; + justify-content: center; align-items: center; text-align: center; cursor: pointer; + border: 1px solid var(--border); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; position: relative; min-height: 0; +} + +.servicio-item:hover:not(.is-active) { + background-color: var(--bg-surface); border-color: var(--text-secondary); transform: translateX(4px); +} + +.servicio-item.is-active { + flex: 10; background-color: var(--bg-surface-elevated); + box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.1); border-color: var(--btn-primary-bg); +} + +.servicios-accordion.has-active .servicio-item:not(.is-active) { + flex: 0; min-height: 0; padding: 0 var(--spacing-md); opacity: 0; pointer-events: none; border-color: transparent; +} + +.servicio-header { + display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); + width: 100%; transition: opacity 0.3s ease; +} + +.servicio-icon { + width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; + display: inline-block; background-color: currentColor; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; + -webkit-mask-size: contain; mask-size: contain; +} + +.icon-branding { -webkit-mask-image: url("../assets/iconos/branding.svg"); mask-image: url("../assets/iconos/branding.svg"); } +.icon-rrss { -webkit-mask-image: url("../assets/iconos/redes_sociales.svg"); mask-image: url("../assets/iconos/redes_sociales.svg"); } +.icon-web { -webkit-mask-image: url("../assets/iconos/web.svg"); mask-image: url("../assets/iconos/web.svg"); } +.icon-auto { -webkit-mask-image: url("../assets/iconos/automatizaciones.svg"); mask-image: url("../assets/iconos/automatizaciones.svg"); } +.icon-paid { -webkit-mask-image: url("../assets/iconos/paid_media.svg"); mask-image: url("../assets/iconos/paid_media.svg"); } +.icon-add { -webkit-mask-image: url("../assets/iconos/ad_hoc.svg"); mask-image: url("../assets/iconos/ad_hoc.svg"); } + +.servicio-title-short { + font-family: var(--font-title); font-style: italic; font-size: 1.1rem; + color: var(--text-primary); font-weight: 700; white-space: nowrap; +} + +.servicio-content { + display: none; flex-direction: column; align-items: center; justify-content: center; + gap: var(--spacing-sm); width: 100%; max-width: 500px; height: 100%; padding: var(--spacing-md); + opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; +} + +.servicio-item.is-active .servicio-header { display: none; } +.servicio-item.is-active .servicio-content { display: flex; opacity: 1; transform: translateY(0); } + +.servicio-icon-large { + width: 64px; height: 64px; object-fit: contain; margin-bottom: var(--spacing-xs); + display: inline-block; background-color: currentColor; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; + -webkit-mask-size: contain; mask-size: contain; +} + +.servicio-title-long { + font-family: var(--font-title); font-style: italic; font-size: clamp(1.5rem, 2.5vw, 2rem); + color: var(--text-primary); font-weight: 700; line-height: 1.2; text-align: center; +} + +.servicio-description { + font-family: var(--font-body); font-size: 1rem; color: var(--text-muted); + line-height: 1.6; text-align: center; max-width: 450px; +} +.servicio-content .btn { margin-top: var(--spacing-xs); } + +.servicio-close { + position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); + background: none; border: 1px solid var(--border); color: var(--text-muted); + font-size: 1.2rem; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; + display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; z-index: 5; +} +.servicio-close:hover { + color: var(--btn-primary-bg); background-color: var(--bg-surface); + border-color: var(--btn-primary-bg); transform: rotate(90deg); +} + +@media (max-width: 968px) { + .servicios-container { grid-template-columns: 1fr; gap: var(--spacing-md); min-height: auto; } + .servicios-accordion { height: 500px; } + .servicios-intro { text-align: center; align-items: center; } +} +@media (max-width: 480px) { + .servicios-accordion { height: 450px; padding: var(--spacing-sm); } + .servicio-title-short { font-size: 0.95rem; } + .servicio-title-long { font-size: 1.3rem; } + .servicio-icon-large { width: 48px; height: 48px; } +} + +/* ============================================ +SECCIÓN DIAGNÓSTICO +============================================ */ +.diagnostico-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.diagnostico-header { + text-align: center; + max-width: 700px; + margin: 0 auto var(--spacing-lg); +} + +.diagnostico-title { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); + color: var(--text-primary); + margin-bottom: var(--spacing-sm); + line-height: 1.15; +} + +.diagnostico-subtitle { + font-family: var(--font-body); + font-size: 1.1rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* Tarjeta contenedora */ +.diagnostico-card { + max-width: 900px; + margin: 0 auto; + background-color: var(--bg-surface); + border-radius: 20px; + padding: var(--spacing-md); + box-shadow: var(--shadow); + border: 1px solid var(--border); + min-height: 420px; + position: relative; + overflow: hidden; +} + +/* ============================================ +PANTALLA DE BIENVENIDA +============================================ */ +.diagnostico-bienvenida { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: var(--spacing-md); + animation: fadeIn 0.5s ease; +} + +.bienvenida-icono { + width: 80px; + height: 80px; + /*border-radius: 50%; + background-color: var(--bg-surface-elevated); + border: 2px solid var(--border);*/ + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--spacing-sm); +} + +.icono-diagnostico { + width: 70px; + height: 70px; + display: block; + background-color: var(--btn-primary-bg); + -webkit-mask-image: url("../assets/iconos/ad_hoc.svg"); + mask-image: url("../assets/iconos/ad_hoc.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; +} + +.bienvenida-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(1.5rem, 3vw, 2rem); + color: var(--text-primary); + margin-bottom: var(--spacing-xs); + font-weight: 700; +} + +.bienvenida-texto { + font-family: var(--font-body); + font-size: 1.05rem; + color: var(--text-muted); + max-width: 500px; + line-height: 1.6; + margin-bottom: var(--spacing-md); +} + +.bienvenida-detalles { + list-style: none; + display: flex; + gap: var(--spacing-md); + margin-bottom: var(--spacing-md); + flex-wrap: wrap; + justify-content: center; +} + +.bienvenida-detalles li { + font-family: var(--font-small); + font-size: 0.9rem; + color: var(--text-secondary); + display: flex; + align-items: center; + gap: 0.4rem; + font-weight: 500; +} + +.detalle-icono { + font-size: 1rem; +} + +.btn-comenzar { + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-size: 1rem; + padding: 1rem 2.2rem; +} + +.btn-arrow { + transition: transform 0.3s ease; + font-size: 1.2rem; +} + +.btn-comenzar:hover .btn-arrow { + transform: translateX(4px); +} + +/* ============================================ +CUESTIONARIO +============================================ */ +.diagnostico-quiz { + animation: fadeIn 0.4s ease; +} + +.progreso-wrapper { + margin-bottom: var(--spacing-md); +} + +.progreso-barra { + width: 100%; + height: 8px; + background-color: var(--border); + border-radius: 4px; + overflow: hidden; + margin-bottom: var(--spacing-xs); +} + +.progreso-barra-completado { + height: 100%; + background-color: var(--btn-primary-bg); + width: 0%; + transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); + border-radius: 4px; +} + +.progreso-texto { + font-family: var(--font-small); + font-size: 0.85rem; + color: var(--text-secondary); + text-align: right; + font-weight: 600; +} + +/* Contenedor de preguntas */ +.cuestionario-contenedor { + animation: fadeIn 0.4s ease; +} + +.pregunta-contenedor { + animation: slideIn 0.4s ease; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.pregunta-titulo { + font-family: var(--font-subtitle); + font-size: clamp(1.2rem, 2.5vw, 1.5rem); + color: var(--text-primary); + margin-bottom: var(--spacing-md); + font-weight: 400; + line-height: 1.3; + font-style: italic; +} + +/* GRID DE OPCIONES EN 3 COLUMNAS */ +.opciones-contenedor { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-sm); +} + +.opcion-tarjeta { + background-color: var(--bg-surface-elevated); + border: 2px solid var(--border); + border-radius: 12px; + padding: var(--spacing-sm); + cursor: pointer; + transition: all 0.25s ease; + font-family: var(--font-body); + font-size: 0.9rem; + color: var(--text-primary); + text-align: left; + width: 100%; + display: flex; + align-items: flex-start; + gap: 10px; + min-height: 110px; + position: relative; + overflow: hidden; +} + +.opcion-tarjeta::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background-color: var(--btn-primary-bg); + transform: scaleY(0); + transform-origin: top; + transition: transform 0.3s ease; +} + +.opcion-tarjeta:hover { + border-color: var(--btn-primary-bg); + background-color: var(--bg-surface); + transform: translateY(-3px); + box-shadow: 0 8px 20px -5px rgba(186, 18, 77, 0.15); +} + +.opcion-tarjeta:hover::before { + transform: scaleY(1); +} + +.opcion-tarjeta:active { + transform: scale(0.98); +} + +.opcion-tarjeta.seleccionada { + border-color: var(--btn-primary-bg); + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + transform: translateY(-3px); + box-shadow: 0 8px 24px -5px rgba(186, 18, 77, 0.35); +} + +.opcion-tarjeta.seleccionada::before { + transform: scaleY(1); + background-color: #ffffff; +} + +/* Indicador de número de opción */ +.opcion-numero { + flex-shrink: 0; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: var(--border); + color: var(--text-secondary); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 700; + transition: all 0.25s ease; +} + +.opcion-tarjeta.seleccionada .opcion-numero { + background-color: #ffffff; + color: var(--btn-primary-bg); +} + +.opcion-texto { + flex: 1; + line-height: 1.45; +} + +/* Navegación entre preguntas */ +.pregunta-navegacion { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--spacing-md); + padding-top: var(--spacing-sm); + border-top: 1px solid var(--border); +} + +.btn-anterior { + background: none; + border: 1.5px solid var(--border); + color: var(--text-secondary); + padding: 0.65rem 1.2rem; + border-radius: 24px; + cursor: pointer; + font-family: var(--font-small); + font-size: 0.9rem; + font-weight: 600; + transition: all 0.25s ease; + display: inline-flex; + align-items: center; + gap: 0.4rem; +} + +.btn-anterior:hover { + border-color: var(--text-primary); + color: var(--text-primary); +} + +.btn-siguiente { + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + border: 1.5px solid var(--btn-primary-bg); + padding: 0.65rem 1.5rem; + border-radius: 24px; + cursor: pointer; + font-family: var(--font-small); + font-size: 0.9rem; + font-weight: 600; + transition: all 0.25s ease; + display: inline-flex; + align-items: center; + gap: 0.4rem; + box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); +} + +.btn-siguiente:hover:not(:disabled) { + background-color: var(--btn-primary-hover); + border-color: var(--btn-primary-hover); + transform: translateY(-2px); +} + +.btn-siguiente:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +/* ============================================ +RESULTADO +============================================ */ +.resultado-contenedor { + animation: fadeIn 0.6s ease; + background-color: var(--bg-surface-elevated); + border: 2px solid var(--btn-primary-bg); + border-radius: 16px; + padding: var(--spacing-md); + text-align: center; +} + +.resultado-encabezado { + margin-bottom: var(--spacing-sm); +} + +.resultado-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(1.5rem, 3vw, 2rem); + color: var(--btn-primary-bg); + margin-bottom: var(--spacing-xs); + font-weight: 700; + line-height: 1.2; +} + +.resultado-subtitulo { + font-family: var(--font-body); + font-size: 1rem; + color: var(--text-muted); + margin-bottom: var(--spacing-sm); +} + +.resultado-diagnostico { + font-size: 1.05rem; + color: var(--text-primary); + margin-bottom: var(--spacing-sm); + line-height: 1.6; +} + +.resultado-solucion { + background-color: var(--bg-surface); + border-left: 4px solid var(--btn-primary-bg); + padding: var(--spacing-sm); + margin: var(--spacing-sm) 0 var(--spacing-md); + text-align: left; + font-size: 0.95rem; + color: var(--text-primary); + border-radius: 0 8px 8px 0; +} + +.resultado-solucion strong { + color: var(--btn-primary-bg); + font-family: var(--font-title); + font-style: italic; +} + +.resultado-acciones { + display: flex; + gap: var(--spacing-sm); + justify-content: center; + flex-wrap: wrap; + margin-top: var(--spacing-md); +} + +.resultado-cta { + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + border: none; + padding: 0.85rem 2rem; + border-radius: 24px; + font-family: var(--font-small); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + transition: all 0.25s ease; + box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); + display: inline-flex; + align-items: center; + gap: 0.5rem; + text-decoration: none; +} + +.resultado-cta:hover { + background-color: var(--btn-primary-hover); + transform: translateY(-2px); + box-shadow: 0 6px 18px -4px rgba(186, 18, 77, 0.45); +} + +.btn-reiniciar { + background: none; + border: 1.5px solid var(--border); + color: var(--text-secondary); + padding: 0.65rem 1.2rem; + border-radius: 24px; + cursor: pointer; + font-family: var(--font-small); + font-size: 0.9rem; + font-weight: 600; + transition: all 0.25s ease; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.btn-reiniciar:hover { + border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg); + transform: translateY(-2px); +} + +/* Animación fade */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ============================================ +RESPONSIVE DIAGNÓSTICO +============================================ */ +@media (max-width: 768px) { + .diagnostico-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .diagnostico-card { + padding: var(--spacing-sm); + border-radius: 16px; + } + + .diagnostico-title { + font-size: 1.75rem; + } + + .diagnostico-subtitle { + font-size: 1rem; + } + + /* En mobile, las opciones pasan a 2 columnas */ + .opciones-contenedor { + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-xs); + } + + .opcion-tarjeta { + min-height: 90px; + padding: var(--spacing-xs); + font-size: 0.85rem; + } + + .pregunta-titulo { + font-size: 1.15rem; + } + + .resultado-titulo { + font-size: 1.4rem; + } + + .resultado-solucion { + font-size: 0.9rem; + } + + .bienvenida-detalles { + flex-direction: column; + gap: var(--spacing-xs); + } + + .resultado-acciones { + flex-direction: column; + align-items: center; + } + + .resultado-cta, + .btn-reiniciar { + width: 100%; + max-width: 300px; + justify-content: center; + } +} + +@media (max-width: 480px) { + .diagnostico-card { + padding: var(--spacing-sm); + border-radius: 12px; + } + + /* En pantallas muy chicas, 1 columna */ + .opciones-contenedor { + grid-template-columns: 1fr; + } + + .opcion-tarjeta { + min-height: auto; + padding: var(--spacing-xs); + font-size: 0.85rem; + } + + .bienvenida-icono { + width: 64px; + height: 64px; + } + + .icono-diagnostico { + width: 32px; + height: 32px; + } +} + +/* ============================================ + SECCIÓN METODOLOGÍA + ============================================ */ +.metodologia-section { + padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); +} + +.metodologia-header { + text-align: center; max-width: 700px; margin: 0 auto var(--spacing-lg); +} + +.metodologia-title { + font-family: var(--font-title); font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); + margin-bottom: var(--spacing-sm); line-height: 1.15; +} + +.metodologia-subtitle { + font-family: var(--font-body); font-size: 1.1rem; + color: var(--text-muted); line-height: 1.6; +} + +.metodologia-grid { + display: grid; grid-template-columns: repeat(6, 1fr); + gap: var(--spacing-md); max-width: 1400px; margin: 0 auto; +} + +.paso-item { + display: flex; flex-direction: column; align-items: center; text-align: center; + transition: all 0.5s ease; opacity: 0.5; transform: scale(0.95); +} + +.paso-arco { + position: relative; width: 100%; max-width: 120px; height: 100px; + margin-bottom: var(--spacing-sm); display: flex; justify-content: center; align-items: flex-end; +} + +.arco-svg { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; + background-color: currentColor; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center top; mask-position: center top; + -webkit-mask-size: contain; mask-size: contain; + -webkit-mask-image: url("../assets/vectores/arco.svg"); mask-image: url("../assets/vectores/arco.svg"); + transition: all 0.5s ease; filter: grayscale(100%) opacity(0.3); color: var(--text-muted); +} + +.paso-icono { + position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); + width: 40px; height: 40px; display: block; background-color: currentColor; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; + -webkit-mask-size: contain; mask-size: contain; + transition: all 0.5s ease; filter: grayscale(100%) opacity(0.4); color: var(--text-muted); +} + +.icon-contacto { -webkit-mask-image: url("../assets/iconos/contacto.svg"); mask-image: url("../assets/iconos/contacto.svg"); } +.icon-propuesta { -webkit-mask-image: url("../assets/iconos/propuesta.svg"); mask-image: url("../assets/iconos/propuesta.svg"); } +.icon-diseno { -webkit-mask-image: url("../assets/iconos/diseno.svg"); mask-image: url("../assets/iconos/diseno.svg"); } +.icon-produccion { -webkit-mask-image: url("../assets/iconos/produccion.svg"); mask-image: url("../assets/iconos/produccion.svg"); } +.icon-revision { -webkit-mask-image: url("../assets/iconos/revision.svg"); mask-image: url("../assets/iconos/revision.svg"); } +.icon-lanzamiento { -webkit-mask-image: url("../assets/iconos/lanzamiento.svg"); mask-image: url("../assets/iconos/lanzamiento.svg"); } + +.paso-info { display: flex; flex-direction: column; gap: 0.25rem; } + +.paso-titulo { + font-family: var(--font-title); font-style: italic; font-size: 1.2rem; + color: var(--text-primary); font-weight: 700; transition: all 0.5s ease; +} +.paso-subtitulo { + font-family: var(--font-body); font-size: 1rem; + color: var(--text-muted); transition: all 0.5s ease; +} +.paso-body { + font-family: var(--font-small); font-size: 0.85rem; + color: var(--text-muted); transition: all 0.5s ease; +} + +.paso-item.active { opacity: 1; transform: scale(1.05); } +.paso-item.active .arco-svg { filter: grayscale(0%) opacity(1); stroke: var(--brand-crimson); } +.paso-item.active .paso-icono { filter: grayscale(0%) opacity(1); transform: translateX(-50%) scale(1.1); color: var(--brand-crimson); } +.paso-item.active .paso-titulo { color: var(--brand-crimson); font-weight: 700; } +.paso-item.active .paso-subtitulo { color: var(--text-primary); font-weight: 500; } + +.paso-item.previous { opacity: 0.75; transform: scale(1); } +.paso-item.previous .arco-svg { filter: grayscale(0%) opacity(0.7); stroke: var(--brand-rose-muted); } +.paso-item.previous .paso-icono { filter: grayscale(0%) opacity(0.8); } +.paso-item.previous .paso-titulo { color: var(--text-muted); } +.paso-item.previous .paso-subtitulo { color: var(--text-muted); } + +@media (max-width: 1024px) { + .metodologia-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } +} +@media (max-width: 768px) { + .metodologia-section { padding: var(--spacing-md) var(--spacing-sm); } + .metodologia-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } + .metodologia-title { font-size: 1.75rem; } + .metodologia-subtitle { font-size: 1rem; } + .paso-arco { max-width: 100px; } + .paso-icono { width: 32px; height: 32px; } + .paso-titulo { font-size: 1rem; } + .paso-subtitulo { font-size: 0.8rem; } +} +@media (max-width: 480px) { + .metodologia-grid { grid-template-columns: 1fr; max-width: 300px; } +} +@media (prefers-reduced-motion: reduce) { + .paso-item, .arco-svg, .paso-icono, .paso-titulo, .paso-subtitulo { transition: none; } +} + +/* ============================================ + SECCIÓN PLANES DESTACADOS + ============================================ */ +.planes-section { + padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); +} + +.planes-header { text-align: center; max-width: 700px; margin: 0 auto var(--spacing-lg); } +.planes-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); margin-bottom: var(--spacing-sm); line-height: 1.15; } +.planes-subtitle { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; } + +.planes-grid { + display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); + max-width: 1200px; margin: 0 auto; align-items: stretch; +} + +.plan-card { + position: relative; background-color: var(--bg-surface); + border: 1.5px solid var(--border); border-radius: 16px; padding: var(--spacing-md); + display: flex; flex-direction: column; gap: var(--spacing-sm); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; +} + +.planes-grid.is-hovering .plan-card { opacity: 0.45; transform: scale(0.97); filter: grayscale(30%); } +.planes-grid.is-hovering .plan-card.is-focused { + opacity: 1; transform: scale(1.03); filter: grayscale(0%); + border-color: var(--btn-primary-bg); box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); z-index: 2; +} +.plan-card:hover { + border-color: var(--btn-primary-bg); box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); transform: translateY(-4px); +} + +.plan-header { margin-bottom: var(--spacing-xs); } +.plan-title { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 0.25rem; line-height: 1.2; } +.plan-subtitle { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); font-style: normal; font-weight: 400; } + +.plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } +.plan-features li { + font-size: 0.95rem; color: var(--text-primary); padding-left: 1.5rem; + position: relative; line-height: 1.4; +} +.plan-features li::before { + content: ""; position: absolute; left: 0; top: 0.45rem; + width: 8px; height: 8px; background-color: var(--btn-primary-bg); border-radius: 50%; +} + +.plan-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--spacing-xs); } +.plan-tag { + font-family: var(--font-small); font-size: 0.75rem; font-weight: 600; + padding: 0.3rem 0.7rem; border-radius: 999px; background-color: var(--badge-bg); + color: var(--badge-text); letter-spacing: 0.3px; +} +.plan-cta { margin-top: var(--spacing-sm); align-self: flex-start; } + +.plan-featured { border-color: var(--brand-rose-muted); background-color: var(--bg-surface-elevated); } + +.plan-badge { + position: absolute; top: -12px; left: 50%; transform: translateX(-50%); + display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.9rem; + background-color: var(--bg-surface); border: 1px solid var(--brand-rose-muted); + border-radius: 999px; color: var(--brand-crimson); font-family: var(--font-small); + font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; + box-shadow: 0 2px 8px -2px rgba(186, 18, 77, 0.15); +} +.laurel-icon { width: 14px; height: 14px; stroke: var(--brand-crimson); } + +@media (max-width: 968px) { + .planes-grid { grid-template-columns: 1fr; max-width: 500px; } + .plan-featured { order: -1; } + .plan-badge { top: -10px; } +} +@media (max-width: 480px) { + .planes-section { padding: var(--spacing-md) var(--spacing-sm); } + .plan-card { padding: var(--spacing-sm); } + .plan-title { font-size: 1.3rem; } +} + +/* ============================================ + SECCIÓN PORTFOLIO + ============================================ */ +.portfolio-section { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); } +.portfolio-container { + display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-lg); + max-width: 1400px; margin: 0 auto; align-items: center; +} +.portfolio-text { display: flex; flex-direction: column; gap: var(--spacing-sm); } +.portfolio-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); line-height: 1.15; } +.portfolio-subtitle { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; max-width: 450px; } +.portfolio-text .btn { margin-top: var(--spacing-sm); align-self: flex-start; } + +.portfolio-carousel { position: relative; width: 100%; } +.carousel-container { + position: relative; width: 100%; min-height: 420px; overflow: hidden; + border-radius: 16px; box-shadow: var(--shadow); background-color: var(--bg-surface); +} + +.carousel-slide { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; + opacity: 0; transition: opacity 0.8s ease-in-out; + display: flex; flex-direction: column; padding: var(--spacing-sm); gap: var(--spacing-sm); +} +.carousel-slide.active { opacity: 1; } + +.slide-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; flex-shrink: 0; } +.slide-tag { + font-family: var(--font-small); font-size: 0.75rem; font-weight: 600; + padding: 0.3rem 0.75rem; border-radius: 999px; background-color: var(--btn-primary-bg); + color: var(--text-on-accent); letter-spacing: 0.3px; line-height: 1.2; +} + +.slide-image-wrapper { + flex: 1; width: 100%; border-radius: 12px; overflow: hidden; + position: relative; background-color: var(--bg-surface-elevated); +} +.slide-image-wrapper::before { content: ""; display: block; padding-top: 75%; } +.carousel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } + +.carousel-indicators { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--spacing-sm); } +.indicator { + width: 10px; height: 10px; border-radius: 50%; background-color: var(--border); + cursor: pointer; transition: all 0.3s ease; +} +.indicator.active { background-color: var(--btn-primary-bg); transform: scale(1.2); } +.indicator:hover { background-color: var(--btn-primary-hover); } + +@media (max-width: 968px) { + .portfolio-container { grid-template-columns: 1fr; gap: var(--spacing-md); } + .portfolio-text { text-align: center; align-items: center; } + .portfolio-subtitle { max-width: 100%; } + .portfolio-text .btn { align-self: center; } + .carousel-container { min-height: 380px; } +} +@media (max-width: 768px) { + .portfolio-section { padding: var(--spacing-md) var(--spacing-sm); } + .carousel-container { min-height: 340px; } + .slide-tag { font-size: 0.7rem; padding: 0.25rem 0.6rem; } +} +@media (max-width: 480px) { + .carousel-container { min-height: 300px; } + .carousel-slide { padding: var(--spacing-xs); gap: var(--spacing-xs); } +} + +/* ============================================ + TIRA MARQUEE (ICONOS INFINITOS CON FADE) + ============================================ */ +.marquee-section { + margin-top: var(--spacing-lg); overflow: hidden; padding: var(--spacing-md) 0; + border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); + -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); + mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); +} + +.marquee-track { + display: flex; gap: var(--spacing-md); + animation: marquee-scroll 35s linear infinite; will-change: transform; +} + +@keyframes marquee-scroll { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +.marquee-item { + flex-shrink: 0; display: flex; align-items: center; justify-content: center; + width: 160px; height: 60px; +} + +.marquee-icon { + width: 100%; height: 100%; display: block; background-color: currentColor; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; + -webkit-mask-size: contain; mask-size: contain; + filter: grayscale(100%) opacity(0.5); color: var(--text-muted); transition: all 0.3s ease; +} +.marquee-icon:hover { filter: grayscale(0%) opacity(1); color: var(--brand-crimson); transform: scale(1.1); } + +.icon-analytics { -webkit-mask-image: url("../assets/vectores/analytics.svg"); mask-image: url("../assets/vectores/analytics.svg"); } +.icon-face { -webkit-mask-image: url("../assets/vectores/face.svg"); mask-image: url("../assets/vectores/face.svg"); } +.icon-google { -webkit-mask-image: url("../assets/vectores/google.svg"); mask-image: url("../assets/vectores/google.svg"); } +.icon-googleads { -webkit-mask-image: url("../assets/vectores/googleads.svg"); mask-image: url("../assets/vectores/googleads.svg"); } +.icon-insta { -webkit-mask-image: url("../assets/vectores/insta.svg"); mask-image: url("../assets/vectores/insta.svg"); } +.icon-meta { -webkit-mask-image: url("../assets/vectores/meta.svg"); mask-image: url("../assets/vectores/meta.svg"); } +.icon-openai { -webkit-mask-image: url("../assets/vectores/openai.svg"); mask-image: url("../assets/vectores/openai.svg"); } +.icon-tiktok { -webkit-mask-image: url("../assets/vectores/tiktok.svg"); mask-image: url("../assets/vectores/tiktok.svg"); } +.icon-whatsapp { -webkit-mask-image: url("../assets/vectores/whatsapp.svg"); mask-image: url("../assets/vectores/whatsapp.svg"); } +.icon-wordpress { -webkit-mask-image: url("../assets/vectores/wordpress.svg"); mask-image: url("../assets/vectores/wordpress.svg"); } + +@media (max-width: 768px) { .marquee-item { width: 90px; height: 50px; } } +@media (max-width: 480px) { + .marquee-item { width: 75px; height: 40px; } + .marquee-track { gap: var(--spacing-sm); } +} +@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } + + + +/* 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) { + .cta-section { padding: var(--spacing-md) var(--spacing-sm); } + .cta-card { padding: var(--spacing-md) var(--spacing-sm); border-radius: 20px; } + .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::before, .cta-card::after { width: 200px; height: 200px; } +} +@media (prefers-reduced-motion: reduce) { + .btn-cta-primary, .btn-cta-secondary { transition: none; } +} + +/* ============================================ + FONDO FLUIDO WEBGL GLOBAL + ============================================ */ +#fluid-canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; /* Detrás de todo el contenido */ + pointer-events: none; /* Permite hacer clic a través del canvas */ + background-color: var(--bg-base); /* Color base de respaldo */ +} + +/* ============================================ + EFECTO VIDRIO (GLASSMORPHISM) SUAVIZADO + ============================================ */ +.glass-panel, +.plan-card, +.dimension-card, +.servicio-panel, +.blog-card, +.featured-card, +.newsletter-card, +.cta-card, +.servicios-cta-card, +.planes-cta-card, +.diagnostico-card { + /* Opacidad un poco más baja para ver el fluido */ + background-color: rgba(255, 255, 255, 0.65) !important; + /* Blur reducido: 12px era demasiado y creaba las "manchas ovaladas" */ + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border: 1px solid rgba(255, 255, 255, 0.4); +} + +/* Ajuste para modo oscuro */ +[data-theme="dark"] .glass-panel, +[data-theme="dark"] .plan-card, +[data-theme="dark"] .dimension-card, +[data-theme="dark"] .servicio-panel, +[data-theme="dark"] .blog-card, +[data-theme="dark"] .featured-card, +[data-theme="dark"] .newsletter-card, +[data-theme="dark"] .cta-card, +[data-theme="dark"] .servicios-cta-card, +[data-theme="dark"] .planes-cta-card, +[data-theme="dark"] .diagnostico-card { + background-color: rgba(34, 23, 40, 0.65) !important; + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border: 1px solid rgba(234, 240, 238, 0.1); +} + +.hero-section, +.servicios-section, +.diagnostico-section, +.metodologia-section, +.planes-section, +.portfolio-section, +.cta-section { + background-color: transparent !important; /* <-- AGREGAR ESTA LÍNEA */ +} \ No newline at end of file diff --git a/style/main.css b/style/main.css index 5be3380..8abf210 100644 --- a/style/main.css +++ b/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) {