cambios postproduccion

articulos/automatizaciones-instagram.html

@@ -9,6 +9,7 @@
   <meta property="og:description" content="Responder el mismo mensaje 50 veces al día no es escalable. Las automatizaciones bien hechas te permiten captar prospectos.">
   <meta property="og:image" content="../assets/blog/automatizacion.jpg">
   <title>Automatizaciones en Instagram | Blog Amor y Roma</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/blog.css">
 </head>

articulos/landing-pages-que-convierten.html

@@ -9,6 +9,7 @@
   <meta property="og:description" content="No es magia, es método. Una landing page efectiva no depende de la suerte ni de tendencias pasajeras.">
   <meta property="og:image" content="../assets/blog/landing-page.jpg">
   <title>Landing pages que convierten | Blog Amor y Roma</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/blog.css">
 </head>

articulos/to-logo-no-es-tu-marca.html

@@ -9,6 +9,7 @@
   <meta property="og:description" content="Muchos emprendedores confunden el símbolo con la sustancia. Tener un logo bonito no es tener una marca.">
   <meta property="og:image" content="../assets/blog/logo-marca.jpg">
   <title>Tu logo no es tu marca | Blog Amor y Roma</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/blog.css">
 </head>

biolink.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Enlaces oficiales de Estudio Creativo. Transformando ideas en experiencias visuales extraordinarias.">
     <title>Estudio Creativo - Enlaces</title>
-    
+    <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
     <link rel="icon" href="images/icons/favicon.png" type="image/x-icon">
     
     <!-- Fuentes sincronizadas con main.css -->

blog.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Blog de Amor y Roma. Estrategia, branding, desarrollo web y marketing digital con esencia y solidez.">
   <title>Blog | Amor y Roma — Recursos y Estrategias</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="style/main.css">
   <link rel="stylesheet" href="style/blog.css">
 </head>

contacto.html

@@ -6,6 +6,7 @@
   <meta name="description" content="Contactá a Amor y Roma. Contanos sobre tu proyecto y coordinemos un diagnóstico estratégico sin compromiso.">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
   <title>Contacto | Amor y Roma — Agencia Boutique</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="style/main.css">
   <link rel="stylesheet" href="style/contacto.css">
   <link rel="stylesheet" href="style/modal.css">
@@ -51,14 +52,14 @@
               <span class="canal-icono canal-email"></span>
               <div class="canal-contenido">
                 <strong>Email</strong>
-                <a href="mailto:contacto@amoryroma.com">hola@amoryroma.com</a>
+                <a href="mailto:contacto@amoryroma.com">contacto@amoryroma.com</a>
               </div>
             </li>
             <li class="canal-item">
               <span class="canal-icono canal-whatsapp"></span>
               <div class="canal-contenido">
                 <strong>WhatsApp</strong>
-                <a href="https://wa.me/543886118304" target="_blank" rel="noopener">+54 9 11 0000-0000</a>
+                <a href="https://wa.me/543886118304" target="_blank" rel="noopener">+54 9 388 6118304</a>
               </div>
             </li>
             <li class="canal-item">

includes/menu.html

@@ -69,7 +69,13 @@
 
         <p class="contact-item">
           <span class="contact-icon icon-phone" aria-hidden="true"></span>
-          <span><a href="https://wa.me/543886118304">Whatsapp</a></span>
+          <span>
+            <a href="https://wa.me/543886118304?text=Hola!%20Quiero%20m%C3%A1s%20informaci%C3%B3n."
+              target="_blank"
+              rel="noopener noreferrer">
+              Whatsapp
+            </a>
+          </span>
         </p>
         
         <div class="menu-social">

index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="">
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <title>Inicio - A&R</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
   <link rel="stylesheet" href="style/main.css">
@@ -22,7 +23,7 @@
         <h1 class="hero-title">En un mundo de ruido, solo lo auténtico resuena</h1>
         <p class="hero-subtitle">Combinamos el instinto creativo con la ingeniería de procesos para desarrollar tu identidad, sitio web y automatizaciones. <br>Porque lo auténtico, cuando está bien construido, siempre deja eco.</p>
         <div class="hero-cta-group">
-          <a href="#" class="btn btn-primary hero-cta-primary">Hablemos</a>
+          <a href="contacto.html" class="btn btn-primary hero-cta-primary">Hablemos</a>
           <a href="index.html#servicios" class="btn btn-secondary hero-cta-secondary">Conocé más</a>
         </div>
       </div>

nosotros.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Conoce la filosofía, metodología y principios de Amor y Roma, agencia boutique de marketing digital. Marcas con esencia, construidas con estrategia.">
   <title>Nosotros | Amor y Roma — Agencia Boutique</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
   <link rel="stylesheet" href="style/main.css">
   <link rel="stylesheet" href="style/nosotros.css">

planes.html

@@ -6,6 +6,7 @@
   <meta name="description" content="Planes de gestión de redes sociales de Amor y Roma. Soluciones escalables desde $250.000/mes.">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
   <title>Planes - Amor y Roma</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="style/main.css">
   <link rel="stylesheet" href="style/planes.css">
   <!-- Font Awesome -->

scripts/contacto.js

@@ -1,19 +1,21 @@
 /**
- * Envío AJAX del formulario de contacto + modal de éxito.
+ * Envío de formulario de contacto con Formspree + modal de éxito.
  */
 (function () {
   'use strict';
-
+  
-  const form   = document.getElementById('form-contacto');
+  const form = document.getElementById('form-contacto');
-  const modal  = document.getElementById('modal-contacto');
+  const modal = document.getElementById('modal-contacto');
   const btnCerrar = modal ? modal.querySelector('.modal-cerrar') : null;
   const btnEnviar = form ? form.querySelector('button[type="submit"]') : null;
-
+  
   if (!form || !modal) return;
-
+  
+  const FORMSPREE_URL = 'https://formspree.io/f/xkjgjzpn';
+  
   let redirectTimer = null;
-
+  
-  // ── Helpers ────────────────────────────────────────────────────────
+  // ── Helpers ───────────────────────────────────────────────────────
   function abrirModal(mensaje) {
     const texto = modal.querySelector('.modal-mensaje');
     if (texto && mensaje) texto.textContent = mensaje;
@@ -21,7 +23,7 @@
     modal.setAttribute('aria-hidden', 'false');
     document.body.style.overflow = 'hidden';
   }
-
+  
   function cerrarModal(redirigir = false) {
     modal.classList.remove('is-visible');
     modal.setAttribute('aria-hidden', 'true');
@@ -29,67 +31,67 @@
     if (redirectTimer) clearTimeout(redirectTimer);
     if (redirigir) window.location.href = 'index.html';
   }
-
+  
   function mostrarError(mensaje) {
-    // Reutilizamos el modal con estética distinta
     modal.classList.add('is-error');
     abrirModal(mensaje);
   }
-
+  
   // ── Cerrar modal ───────────────────────────────────────────────────
   if (btnCerrar) {
     btnCerrar.addEventListener('click', () => cerrarModal(true));
   }
+  
   modal.addEventListener('click', (e) => {
     if (e.target === modal) cerrarModal(true);
   });
+  
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && modal.classList.contains('is-visible')) {
       cerrarModal(true);
     }
   });
-
+  
   // ── Submit ─────────────────────────────────────────────────────────
   form.addEventListener('submit', async (e) => {
     e.preventDefault();
-
+    
     // Validación nativa HTML5
     if (!form.checkValidity()) {
       form.reportValidity();
       return;
     }
-
+    
     // Estado de carga
     const textoOriginal = btnEnviar ? btnEnviar.innerHTML : '';
     if (btnEnviar) {
       btnEnviar.disabled = true;
       btnEnviar.innerHTML = 'Enviando…';
     }
-
+    
     try {
       const data = new FormData(form);
-      const res  = await fetch('enviar.php', {
+      
+      const res = await fetch(FORMSPREE_URL, {
         method: 'POST',
         body: data,
-        headers: { 'X-Requested-With': 'XMLHttpRequest' },
+        headers: {
+          'Accept': 'application/json'
+        }
       });
-
+      
-      const json = await res.json().catch(() => ({
+      if (res.ok) {
-        status: 'error',
-        message: 'Respuesta inválida del servidor.',
-      }));
-
-      if (json.status === 'success') {
         modal.classList.remove('is-error');
-        abrirModal(json.message || '¡Gracias! Te contactaremos en breve.');
+        abrirModal('¡Mensaje enviado! Te contactaremos en menos de 48 horas hábiles.');
         form.reset();
-
+        
-        const delay = Number(json.delay) || 4000;
+        // Redirección automática después de 4 segundos
         redirectTimer = setTimeout(() => {
-          window.location.href = json.redirect || 'index.html';
+          window.location.href = 'index.html';
-        }, delay);
+        }, 4000);
       } else {
-        mostrarError(json.message || 'No pudimos enviar tu mensaje.');
+        const json = await res.json().catch(() => ({}));
+        mostrarError(json.error || 'No pudimos enviar tu mensaje. Intentá nuevamente.');
       }
     } catch (err) {
       mostrarError('Hubo un problema de conexión. Probá nuevamente.');

scripts/fluid.js

@@ -1,6 +1,6 @@
 "use strict";
 
-// ===== CONFIGURACIÓN DEL EFECTO (Idéntica a fluid - copia.js) =====
+// ===== CONFIGURACIÓN DEL EFECTO (Parámetros calibrados de fluid - copia.js) =====
 const config = {
   TEXTURE_DOWNSAMPLE: 1,
   DENSITY_DISSIPATION: 0.975,
@@ -16,15 +16,15 @@ function getBrandColors() {
   const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
   if (isDark) {
     return [
-      [0.920, 0.120, 0.420], // Carmesí / Fucsia luminoso (#EA1E6B)
+      [0.850, 0.080, 0.380], // Carmesí / Fucsia vivo de marca
-      [0.080, 0.650, 0.780], // Teal cian luminoso (#14A6C7)
+      [0.050, 0.450, 0.550], // Teal profundo
-      [0.850, 0.500, 0.720]  // Rosa suave (#D980B8)
+      [0.650, 0.200, 0.450]  // Plum medio
     ];
   } else {
     return [
       [0.729, 0.071, 0.302], // Bordo de marca (#BA124D)
       [0.000, 0.247, 0.322], // Teal de marca (#003F52)
-      [0.780, 0.280, 0.420]  // Carmesí (#C7476B)
+      [0.550, 0.150, 0.280]  // Plum suave
     ];
   }
 }
@@ -35,7 +35,7 @@ let targetColor = brandColors[1];
 let transitionProgress = 0;
 const transitionSpeed = 0.008;
 
-// Observador para detectar el switch de tema en tiempo real
+// Observador para detectar cambios en data-theme
 const themeObserver = new MutationObserver(() => {
   brandColors = getBrandColors();
   currentColor = brandColors[0];
@@ -66,7 +66,7 @@ let pointers = [];
 function getWebGLContext(canvas) {
   let params = {
     alpha: true,                 // Transparente para respetar el fondo CSS
-    premultipliedAlpha: false,   // Clave para composición limpia sobre el fondo
+    premultipliedAlpha: false,   // Clave para evitar bordes oscuros o quemados
     depth: false,
     stencil: false,
     antialias: false
@@ -120,7 +120,7 @@ function pointerPrototype() {
 }
 pointers.push(new pointerPrototype());
 
-// ===== SHADERS BASE =====
+// ===== SHADERS =====
 let GLProgram = (function () {
   function GLProgram(vertexShader, fragmentShader) {
     if (!(this instanceof GLProgram)) throw new TypeError("Cannot call a class as a function");
@@ -160,7 +160,7 @@ let clearShader = compileShader(
   "precision highp float; precision mediump sampler2D; varying vec2 vUv; uniform sampler2D uTexture; uniform float value; void main () { gl_FragColor = value * texture2D(uTexture, vUv); }"
 );
 
-// SHADER DE VISUALIZACIÓN ADAPTATIVO AL FONDO Y TEMA
+// SHADER DE VISUALIZACIÓN: compatible con GLSL ES 1.0 y libre de blanqueo
 let displayShader = compileShader(
   gl.FRAGMENT_SHADER,
   `precision highp float;
@@ -171,22 +171,25 @@ let displayShader = compileShader(
 
    void main () {
      vec4 c = texture2D(uTexture, vUv);
-     float density = max(c.r, max(c.g, c.b));
+     float len = length(c.rgb);
 
-     if (density < 0.001) {
+     // Sintaxis 100% compatible con WebGL 1 y 2 (4 componentes)
-       gl_FragColor = vec4(0.0);
+     if (len < 0.001) {
+       gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
        return;
      }
 
+     // Normalización cromática: conserva el matiz puro de la marca y previene el blanco
+     vec3 pureColor = c.rgb / len;
+
      if (uIsDark > 0.5) {
-       // MODO OSCURO: Núcleo luminoso y bordes de humo orgánico
+       // MODO OSCURO: color rico con presencia viva sin deslumbrar
-       float alpha = clamp(density * 2.2, 0.0, 0.90);
+       float alpha = clamp(len * 1.8, 0.0, 0.80);
-       vec3 rgb = c.rgb * (1.15 + density * 1.3);
+       gl_FragColor = vec4(pureColor, alpha);
-       gl_FragColor = vec4(clamp(rgb, 0.0, 1.0), alpha);
      } else {
-       // MODO CLARO: Tinte de acuarela suave que no ensucia el fondo claro
+       // MODO CLARO: tinte traslúcido tipo acuarela
-       float alpha = clamp(density * 1.35, 0.0, 0.45);
+       float alpha = clamp(len * 1.2, 0.0, 0.38);
-       gl_FragColor = vec4(c.rgb, alpha);
+       gl_FragColor = vec4(pureColor, alpha);
      }
    }`
 );
@@ -211,7 +214,6 @@ let divergenceShader = compileShader(
   "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); }"
 );
 
-// RESTAURACIÓN EXACTA DE LA FÍSICA DE COPIA (Sin inversión de ejes)
 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); }"
@@ -316,12 +318,13 @@ function splat(x, y, dx, dy, color) {
   velocity.swap();
   
   gl.uniform1i(splatProgram.uniforms.uTarget, density.first[2]);
-  gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.35, color[1] * 0.35, color[2] * 0.35);
+  // Inyección equilibrada
+  gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.28, color[1] * 0.28, color[2] * 0.28);
   blit(density.second[1]);
   density.swap();
 }
 
-// ===== RESIZE SIN DESFASES =====
+// ===== RESIZE =====
 function resizeCanvas() {
   if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
     canvas.width = canvas.clientWidth;
@@ -345,7 +348,7 @@ function isMouseOverTextElement(target) {
   return false;
 }
 
-// ===== CONTROL DE MOUSE CENTRADO Y SIMÉTRICO =====
+// ===== CAPTURA DE MOUSE SIMÉTRICA Y CENTRADA =====
 let isFirstMove = true;
 
 document.addEventListener("mousemove", function (e) {
@@ -353,7 +356,6 @@ document.addEventListener("mousemove", function (e) {
   const currentX = e.clientX - rect.left;
   const currentY = e.clientY - rect.top;
 
-  // Evita el salto o raya diagonal al entrar por primera vez
   if (isFirstMove) {
     pointers[0].x = currentX;
     pointers[0].y = currentY;
@@ -381,7 +383,6 @@ document.addEventListener("mousemove", function (e) {
   pointers[0].color = colorArr;
   pointers[0].moved = true;
 
-  // Multiplicador simétrico de fluid - copia.js (10.0 en fondo, 8.0 en texto)
   const multiplier = overText ? 8.0 : 10.0;
 
   pointers[0].dx = (currentX - pointers[0].x) * multiplier;
@@ -513,7 +514,6 @@ function update() {
   displayProgram.bind();
   gl.uniform1i(displayProgram.uniforms.uTexture, density.first[2]);
 
-  // Informar al shader si estamos en modo oscuro
   const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark';
   if (displayProgram.uniforms.uIsDark !== undefined) {
     gl.uniform1f(displayProgram.uniforms.uIsDark, isDarkTheme ? 1.0 : 0.0);

servicios.html

@@ -6,6 +6,7 @@
   <meta name="description" content="Servicios de Amor y Roma: gestión de redes, branding, desarrollo web, automatizaciones y paid media.">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
   <title>Servicios - Amor y Roma</title>
+  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="style/main.css">
   <link rel="stylesheet" href="style/servicios.css">
 </head>
@@ -266,8 +267,8 @@
       </div>
     </section>
 
-    <!-- Sección 4: Separador visual -->
+    <!-- Sección 4: Separador visual 
-    <section class="servicios-separador"></section>
+    <section class="servicios-separador"></section>-->
 
     <!-- Sección 5: Casos de éxito -->
     <section class="servicios-casos">

style/blog.css

@@ -3,7 +3,7 @@
    ============================================ */
 .blog-hero-compact {
   padding: calc(var(--spacing-lg) + 2rem) var(--spacing-md) var(--spacing-lg);
-  background-color: var(--bg-base);
+  background-color: transparent;
   text-align: center;
   position: relative;
 }
@@ -58,7 +58,7 @@
    ============================================ */
 .blog-filters-section {
   padding: var(--spacing-md) var(--spacing-md);
-  background-color: var(--bg-surface);
+  background-color: var(--bg-surface-t0);
   border-bottom: 1px solid var(--border);
   position: relative; /* Sin sticky, fluye normal */
   z-index: 1;
@@ -387,7 +387,7 @@
    ============================================ */
 .featured-posts {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t3);
   position: relative;
 }
 
@@ -758,7 +758,7 @@
    ============================================ */
 .newsletter-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
 }
 
 .newsletter-card {

style/contacto.css

@@ -33,7 +33,7 @@
    ============================================ */
 .contacto-grid-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-surface);
+  background-color: var(--bg-surface-t2);
 }
 
 .contacto-grid {
@@ -311,7 +311,7 @@
    ============================================ */
 .proceso-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t3);
 }
 
 .proceso-grid {
@@ -388,7 +388,7 @@
    ============================================ */
 .notas-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-surface);
+  background-color: var(--bg-surface-t1);
 }
 
 .notas-container {

style/main.css

@@ -31,6 +31,14 @@
   --bg-surface-elevated: #f5f9f8;
   --bg-icon-contrast: var(--brand-teal);
 
+  --bg-base-t0:rgba(234,240,238, 0.98);
+  --bg-base-t1:rgba(234,240,238, 0.95);
+  --bg-base-t2:rgba(234,240,238, 0.7);
+  --bg-base-t3:rgba(234,240,238, 0.5);
+  --bg-surface-t0:rgb(255, 255, 255, 0.98);
+  --bg-surface-t1:rgb(255, 255, 255, 0.95);
+  --bg-surface-t2: rgb(255, 255, 255, 0.7);
+
   --text-primary: var(--brand-plum);
   --text-secondary: var(--brand-teal);
   --text-muted: rgba(34, 23, 40, 0.65);
@@ -77,6 +85,14 @@
   --brand-teal-contraste: #116c88;
   --brand-crimson-contraste: #d81a5c;
 
+  --bg-base-t0:rgba(17,9,22, 0.98);
+  --bg-base-t1:rgba(17,9,22, 0.95);
+  --bg-base-t2:rgba(17,9,22, 0.7);
+  --bg-base-t3:rgba(17,9,22, 0.5);
+  --bg-surface-t0:rgb(23,12,29, 0.98);
+  --bg-surface-t1:rgb(23,12,29, 0.95);
+  --bg-surface-t2: rgb(23,12,29, 0.7);
+
   --text-primary: var(--brand-sage-light);
   --text-secondary: var(--brand-rose-muted);
   --text-muted: rgba(234, 240, 238, 0.65);
@@ -525,7 +541,7 @@ main section h2 { margin-bottom: var(--spacing-sm); font-size: 1.5rem; }
   border-top: 1px solid var(--border);
   padding-top: var(--spacing-lg);
   margin-top: auto;
-  background-color: var(--bg-surface);
+  background-color: var(--bg-surface-t0);
   position: relative;
 }
 
@@ -582,7 +598,7 @@ main section h2 { margin-bottom: var(--spacing-sm); font-size: 1.5rem; }
    ============================================ */
 .hero-section {
   min-height: calc(100vh - var(--header-height));
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t3);
   display: flex; align-items: center; justify-content: center;
   padding: var(--spacing-lg) var(--spacing-md);
   text-align: center;
@@ -682,7 +698,7 @@ main section h2 { margin-bottom: var(--spacing-sm); font-size: 1.5rem; }
    ============================================ */
 .servicios-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t3);
 }
 
 .servicios-container {
@@ -806,7 +822,7 @@ SECCIÓN DIAGNÓSTICO
 ============================================ */
 .diagnostico-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
 }
 
 .diagnostico-header {
@@ -1381,7 +1397,7 @@ RESPONSIVE DIAGNÓSTICO
    SECCIÓN METODOLOGÍA
    ============================================ */
 .metodologia-section {
-  padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base);
+  padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base-t2);
 }
 
 .metodologia-header {
@@ -1491,7 +1507,7 @@ RESPONSIVE DIAGNÓSTICO
    SECCIÓN PLANES DESTACADOS
    ============================================ */
 .planes-section {
-  padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base);
+  padding: var(--spacing-lg) var(--spacing-md); background-color: transparent;
 }
 
 .planes-header { text-align: center; max-width: 700px; margin: 0 auto var(--spacing-lg); }
@@ -1567,7 +1583,7 @@ RESPONSIVE DIAGNÓSTICO
 /* ============================================
    SECCIÓN PORTFOLIO
    ============================================ */
-.portfolio-section { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); }
+.portfolio-section { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base-t2); }
 .portfolio-container {
   display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-lg);
   max-width: 1400px; margin: 0 auto; align-items: center;
@@ -1686,7 +1702,7 @@ RESPONSIVE DIAGNÓSTICO
    ============================================ */
 .cta-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
 }
 
 .cta-card {
@@ -1865,15 +1881,6 @@ main {
 
 }
 
-.hero-section,
-.servicios-section,
-.diagnostico-section,
-.metodologia-section,
-.planes-section,
-.portfolio-section,
-.cta-section {
-  background-color: transparent !important;
-}
 
 /* Responsive */
 @media (max-width: 768px) {

style/nosotros.css

@@ -18,24 +18,7 @@
 [data-theme="dark"] .logo-light { display: none; }
 [data-theme="dark"] .logo-dark { display: block; }
 
-/* (Se omiten estilos intermedios del menú por brevedad, asumo que ya los tienes en tu archivo original. 
-   Si necesitas el bloque completo del menú, avísame, pero se mantiene intacto tu CSS original aquí). */
 
-.site-footer {
-  border-top: 1px solid var(--border);
-  padding-top: var(--spacing-lg);
-  margin-top: auto;
-  background-color: var(--bg-surface);
-}
-.footer-bottom {
-  border-top: 1px solid var(--border);
-  padding: var(--spacing-sm);
-  text-align: center;
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  background-color: var(--bg-surface);
-  font-family: 'Jost', sans-serif;
-}
 
 /* ============================================
    COMPONENTES REUTILIZABLES
@@ -133,7 +116,7 @@
 /* --- DUALIDAD --- */
 .dualidad-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-surface);
+  background-color: var(--bg-surface-t2);
 }
 .dualidad-grid {
   display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md);
@@ -191,7 +174,7 @@
 /* --- PRINCIPIOS --- */
 .principios-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t2);
 }
 .principios-grid {
   display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md);
@@ -228,7 +211,7 @@
    ============================================ */
 .casos-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t3);
 }
 
 .casos-grid-simetrico {
@@ -452,7 +435,7 @@
    ============================================ */
 .transparencia-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t2);
 }
 
 .transparencia-grid {
@@ -580,7 +563,7 @@
    ============================================ */
 .equipo-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
 }
 
 /* Título con gradiente en la palabra destacada */

style/planes.css

@@ -3,7 +3,7 @@
    ============================================ */
 .planes-hero {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t2);
   min-height: 70vh;
   display: flex;
   align-items: center;
@@ -71,7 +71,7 @@
    ============================================ */
 .planes-selector-section {
   padding: var(--spacing-sm) var(--spacing-xs);
-  background-color: var(--bg-surface);
+  background-color: var(--bg-surface-t1);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }
@@ -174,7 +174,7 @@
    ============================================ */
 .planes-panel-section {
   padding: var(--spacing-md) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
   min-height: 600px;
 }
 
@@ -419,7 +419,7 @@
    ============================================ */
 .planes-comparativa-section {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
 }
 
 .comparativa-container {
@@ -517,7 +517,7 @@
    ============================================ */
 .planes-cta {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
 }
 
 .planes-cta-card {

style/servicios.css

@@ -3,7 +3,7 @@
    ============================================ */
 .servicios-hero {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
   min-height: 70vh;
   display: flex;
   align-items: center;
@@ -71,14 +71,12 @@
    ============================================ */
 .servicios-selector-section {
   padding: var(--spacing-md) var(--spacing-sm);
-  background-color: var(--bg-surface);
+  background-color: var(--bg-base-t1);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }
 
-[data-theme="dark"] .servicios-selector-section {
+
-  background-color: rgba(45, 32, 52, 0.95);
-}
 
 .servicios-selector-container {
   max-width: 1200px;
@@ -195,7 +193,7 @@
    ============================================ */
 .servicios-panel-section {
   padding: var(--spacing-md) var(--spacing-xs);
-  background-color: var(--bg-base);
+  background-color: transparent;
   min-height: 400px;
 }
 
@@ -462,7 +460,7 @@
    ============================================ */
 .servicios-casos {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: var(--bg-base-t2);
 }
 
 .servicios-casos-container {
@@ -537,7 +535,7 @@
    ============================================ */
 .servicios-cta {
   padding: var(--spacing-lg) var(--spacing-md);
-  background-color: var(--bg-base);
+  background-color: transparent;
 }
 
 .servicios-cta-card {