mejoras en menu

FLUID_APACIGUAR_PLAN.md

@@ -0,0 +1,143 @@
+# Plan para "Apaciguar" el Efecto Fluid sobre Textos
+
+## Comportamiento Actual
+- El efecto de fluid responde al movimiento del mouse en toda la página (gracias a EventListener en document)
+- Cuando el mouse está sobre texto, el efecto es tan intenso que dificulta la lectura
+- La dinámica del efecto (color transition, fuerza, etc.) sigue funcionando bien
+
+## Objetivo
+"Apaciguar" el efecto cuando el mouse está sobre áreas de texto - reducir su impacto visual sin eliminar la interacción.
+
+## Opciones viables:
+
+### Opción 1: Reducir intensidad basado en elementos (Recomendado)
+**Enfoque:** Detectar cuándo el mouse está sobre elementos de texto/lectura y reducir la intensidad
+
+#### Implementación:
+```javascript
+// En fluid.js, modificar el event listener
+document.addEventListener("mousemove", function(e) {
+  //Verificar si está sobre elementos que no deben tener efecto fuerte
+  const overText = isMouseOverTextElements(e.target);
+  
+  if (overText) {
+    //Modo "apaciguado" - reducir intensidad
+    pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 2.0; //Reducido (<10.0)
+    pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 2.0;
+    
+    //Opcional: reducir el color también
+    const mutedColor = [colorArr[0]*0.7, colorArr[1]*0.7, colorArr[2]*0.7];
+    pointers[0].color = mutedColor;
+  } else {
+    //Modo normal - comportamiento actual
+    pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 10.0;
+    pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 10.0;
+    pointers[0].color = colorArr;
+  }
+  
+  pointers[0].x = e.clientX - canvas.offsetLeft;
+  pointers[0].y = e.clientY - canvas.offsetTop;
+});
+
+function isMouseOverTextElements(target) {
+  //Listar selectores de elementos donde NO queremos efecto fuerte
+  const textSelectors = [
+    'p', '.hero-content p','h1', '.hero-content h1',
+    'h2', 'h3', 'a.sheet-link', '.sheet-link span',
+    '.menu-btn', '.eyebrow'
+  ];
+  
+  for (const selector of textSelectors) {
+    if (target.closest(selector)) {
+      return true;
+    }
+  }
+  return false;
+}
+```
+
+**Ventajas:**
+- Automático y contextual
+- No cambia la dinámica original en áreas no-textuales  
+- Conserva completa interacción
+- Personalizable qué elementos "apacigar"
+
+---
+
+### Opción 2: Transparencia condicional (Alternativa simple)
+**Enfoque:** Reducir opacidad del canvas cuando está sobre texto
+
+#### Implementación:
+```css
+/* En styles.css */
+p, h1, h2, h3,
+.sheet-link span,
+.eyebrow {
+  position: relative;
+}
+
+p::after, h1::after, h2::after, h3::after,
+.sheet-link span::after,
+.eyebrow::after {
+  content: '';
+  position: absolute; 
+  top: -10px; right: -10px; bottom: -10px; left: -10px;
+  z-index: 2;
+}
+```
+
+**Ventajas:**
+- Solución CSS-only (no requiere JS)
+- Simple implementación
+
+**Desventajas:**
+- No control fino, solo todo o nada
+- Puede afectar capas y layout existing
+
+---
+
+### Opción 3: Efecto "follow" más suave para texto
+**Enfoque:** Reducir la intensidad (dx/dy multiplier) pero mantener color full
+
+#### Implementación:
+```javascript
+document.addEventListener("mousemove", function(e) {
+  const isOverReadableText = /(p|h[1-6]|.eyebrow|.sheet-link)/i.test(e.target.className || e.target.tagName);
+  
+  const multiplier = isOverReadableText ? 3.0 : 10.0; // Reducido de 10 a 3 sobre texto
+  
+  pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * multiplier;
+  pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * multiplier;
+  //Restante del código...
+});
+```
+
+**Ventajas:**
+- Muy sutil, difícil de notas
+- Conserva dinámica del efecto
+
+---
+
+## Recomendación Final: Implementar Opción 1 con refinamientos
+
+### Cambios específicos:
+1. **En fluid.js** (líneas ~372):
+   - Modificar el `mousemove` handler para detectar elementos de texto
+   - Aplicar multiplicador reducido (*2 o *3) y color más tenue en esos casos
+   
+2. **Lista de selectores** para "modo apaciguado":
+   ```javascript
+   ['p', 'h1', 'h2', 'h3', '.hero-content h1', '.eyebrow', 
+    'a.sheet-link', '.sheet-link span', '.menu-btn']
+   ```
+
+### Beneficios clave:
+- 📖 Facilita la lectura al reducir ruido visual sobre texto
+- ✨ Conserva el efecto completo en áreas no-textuales (fondo, logos)
+- 🎨 Mantiene las transiciones de color entre marcas
+- 🚀 Sin cambios en la dinámica del sistema fluid (solo intensidad)
+
+### Prueba y ajuste:
+- Probar con diferentes multiplicadores (2.0 vs 3.0) para encontrar el balance ideal
+- Ajustar selectores CSS según qué elementos necesitan "apaciguamiento"
+- Verificar que botones/menu sigan siendo interactivos

FLUID_EFFECT_ANALYSIS.md

@@ -0,0 +1,69 @@
+# Fluid Effect Debugging Analysis
+
+## Problem Statement
+The fluid effect (WebGL canvas with mouse interaction) was not working properly over text areas and other HTML elements on the page.
+
+## Root Cause Analysis
+
+### How Canvas Events Work
+Canvas elements only capture mouse events when:
+1. The mouse pointer is directly over the canvas element itself, OR
+2. The canvas has `pointer-events: none` CSS property (allowing events to pass through), OR
+3. Event listeners are attached at a higher level (document/body) and manually checked for intersection with canvas bounds.
+
+### Current Implementation Issue
+```javascript
+// OLD CODE -only works when mouse is over canvas
+canvas.addEventListener("mousemove", function(e) {
+  // Uses e.offsetX and e.offsetY - only available on canvas element
+});
+```
+
+### Expected Behavior
+The fluid effect should respond to mouse movement anywhere on the page, including over text elements.
+
+## Solution Implemented
+
+### Key Changes Made in `fluid.js`:
+
+1. **Changed event listener target** from canvas to document:
+   ```javascript
+   // NEW CODE - works globally
+   document.addEventListener("mousemove", function(e) {
+     // Manually calculate position relative to canvas
+   });
+   ```
+
+2. **Updated coordinate calculation** to account for canvas position:
+   ```javascript
+   // OLD: Uses offsetX/Y (canvas-relative)
+   pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
+   
+   // NEW: Uses clientX/Y plus manual canvas positioning
+   pointers[0].x = e.clientX - canvas.offsetLeft;
+   pointers[0].y = e.clientY - canvas.offsetTop;
+   ```
+
+## Verification Steps
+
+After implementing the fix, verify that:
+1. ✅ Fluid effect works when mouse is over the background/text areas
+2. ✅ Color transitions between brand colors still function correctly
+3. ✅ No JavaScript errors in browser console
+4. ✅ Mobile touch events continue to work (already implemented)
+
+## Files Modified
+- `fluid.js:372-395` - Updated mousemove event listener
+
+## Technical Details
+
+### Event Propagation Model
+The solution leverages event bubbling:
+1. Mouse move events bubble up from target element to document root
+2. By attaching the listener at the `document` level, we capture ALL mouse movements
+3. We manually check if coordinates intersect with canvas bounds (via canvas.offsetLeft/Top)
+
+### Coordinate Transformation
+- `clientX/clientY`: Absolute page coordinates 
+- `canvas.offsetLeft/canvas.offsetTop`: Canvas position relative to viewport
+- Result: Accurate positioning within canvas regardless of mouse location on page

docker-compose.yml

@@ -6,6 +6,6 @@ services:
     build: .
     # Mapeamos el puerto 80 del contenedor a un puerto de tu VM (ej. 8080)
     ports:
-      - "8080:80"
+      - "8081:80"
     # Para que el contenedor se reinicie solo si se cae
     restart: unless-stopped

fluid.js

@@ -347,7 +347,7 @@ function resizeCanvas() {
 
 // ===== COLORES DE LA MARCA CON TRANSICIÓN =====
 const brandColors = [
-  [0.874, 0.741, 0.725], // Rosa (#DFBDB9)
+  //[0.874, 0.741, 0.725], // Rosa (#DFBDB9)
   [0.729, 0.071, 0.302], // Bordo (#BA124D)
   [0.000, 0.247, 0.322]  // Teal (#003F52)
 ];
@@ -368,9 +368,29 @@ function lerpColor(colorA, colorB, t) {
 let colorArr = currentColor;
 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'
+  ];
+  
+  // Verificar si el target o sus ancestros coinciden con algún selector
+  for (const selector of textSelectors) {
+    if (target.closest(selector)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 // ===== EVENTOS CON COLORES DE MARCA =====
-canvas.addEventListener("mousemove", function (e) {
-  console.log("Mouse moviéndose:", e.clientX, e.clientY);
+document.addEventListener("mousemove", function (e) {
+  // Detectar si estamos sobre un elemento de texto
+  const overText = isMouseOverTextElement(e.target);
+  
   count++;
   if (count > 1) {
     transitionProgress += transitionSpeed;
@@ -384,14 +404,18 @@ canvas.addEventListener("mousemove", function (e) {
     colorArr = lerpColor(currentColor, targetColor, transitionProgress);
     count = 0;
   }
-  
+
   pointers[0].down = true;
   pointers[0].color = colorArr;
   pointers[0].moved = pointers[0].down;
-  pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
-  pointers[0].dy = (e.offsetY - pointers[0].y) * 10.0;
-  pointers[0].x = e.offsetX;
-  pointers[0].y = e.offsetY;
+  
+  // Aplicar multiplicador diferente según si estamos sobre texto o no
+  const multiplier = overText ? 8 : 10.0; // Reducido a 4x sobre texto (vs 10x)
+  
+  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;
 });
 
 canvas.addEventListener(

index.html

@@ -7,7 +7,6 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-
   <!-- ===== CANVAS PARA EFECTO DE HUMO ===== -->
   <canvas id="fluidCanvas"></canvas>
 
@@ -86,7 +85,9 @@
   <!-- ===== HEADER ===== -->
   <header>
     <div class="logo">
-      <img src="logo_frio.png" alt="Amor & Roma" class="logo-img">
+      <a href="#inicio">
+        <img src="logo_frio.png" alt="Amor & Roma" class="logo-img">
+      </a>
     </div>
     <button class="menu-btn" onclick="toggleMenu()" aria-label="Abrir menú">
       <span class="bars"><span></span><span></span><span></span></span>
@@ -105,7 +106,6 @@
         <a href="#contacto" class="btn btn-outline">Contactanos</a>
       </div>
     </div>
-    <a href="#servicios" class="home-btn" aria-label="Ir a servicios">✦</a>
     <div class="scroll-hint"><div class="line"></div>Scroll</div>
   </section>
 
@@ -172,7 +172,6 @@
         <div class="item"><span class="icon-min">✦</span> Consultoría en IA aplicada a tu negocio</div>
       </div>
     </div>
-    <a href="#planes" class="home-btn" aria-label="Ir a planes">✦</a>
   </section>
 
   <!-- ===== PLANES ===== -->
@@ -237,12 +236,11 @@
       </div>
     </div>
     <a href="#cotizador" class="btn btn-outline plan-main-cta">Consulta tu plan ideal</a>
-    <a href="#proceso" class="home-btn" aria-label="Ir a proceso">✦</a>
   </section>
 
-  <!-- ===== SERVICIOS A LA CARTA ===== -->
+  <!-- ===== POTENCIADORES DE NEGOCIO ===== -->
   <section class="servicios-carta" id="servicios-carta">
-    <div class="eyebrow">Servicios a la carta</div>
+    <div class="eyebrow">Potenciadores de negocio</div>
     <h2>Para complementar cualquier <span class="grad-word">plan,</span><br>o contratar de forma <span class="grad-word">independiente.</span></h2>
     <p class="lede">Elegí los servicios que necesitás, sin compromiso mensual. Todo lo que tu marca necesita, a tu ritmo.</p>
     <div class="acc" id="acc">
@@ -313,7 +311,6 @@
         </div>
       </div>
     </div>
-    <a href="#cifras" class="home-btn" aria-label="Ir a cifras">✦</a>
   </section>
 
   <!-- ===== PROCESO ===== -->
@@ -359,7 +356,6 @@
         <div class="step-desc">Accesos y capacitación completa.</div>
       </div>
     </div>
-    <a href="#cifras" class="home-btn" aria-label="Ir a cifras">✦</a>
   </section>
 
   <!-- ===== CIFRAS ===== -->
@@ -387,7 +383,6 @@
         <div class="cifra-desc">Compromiso mínimo de <b>3 meses</b> para que la estrategia tome forma, luego renovación mensual. Cancelación <b>con 30 días de aviso</b>.</div>
       </div>
     </div>
-    <a href="#cotizador" class="home-btn" aria-label="Ir a cotizador">✦</a>
   </section>
 
   <!-- ===== COTIZADOR ===== -->
@@ -445,14 +440,13 @@
         </div>
       </div>
     </div>
-    <a href="#nosotros" class="home-btn" aria-label="Ir a nosotros">✦</a>
   </section>
 
   <!-- ===== NOSOTROS ===== -->
   <section class="quienes" id="nosotros">
     <div class="eyebrow">Nosotros</div>
-    <h2>Un equipo chico, con <span class="grad-word">mucha energía.</span></h2>
-    <p class="lede">Creemos que las marcas se construyen con escucha, estrategia y mucho amor por lo que hacemos.</p>
+    <h2>Mentes creativas, con <span class="grad-word">mucha energía.</span></h2>
+    <p class="lede"> Combinamos el arte del Marketing con la Ciencia de los datos.</p>
     <div class="team-grid team-grid-simple">
       <div class="team-card-simple">
         <div class="team-name">Patricia Pugliese</div>
@@ -466,9 +460,8 @@
       </div>
     </div>
     <div class="team-footer">
-      <p class="team-footer-text">Y como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.</p>
+      <p class="team-footer-text">Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.</p>
     </div>
-    <a href="#faq" class="home-btn" aria-label="Ir a FAQ">✦</a>
   </section>
 
   <!-- ===== FAQ ===== -->
@@ -479,55 +472,54 @@
     <div class="faq-grid">
       <div class="faq-item open">
         <div class="faq-head" onclick="toggleFaq(this)">
-          <span class="faq-q">¿Cómo funciona el proceso de trabajo?</span>
+          <span class="faq-q"> <em>¿Cómo funciona el proceso de trabajo?</em></span>
           <span class="faq-toggle">−</span>
         </div>
         <div class="faq-body"><p>Empezamos con una llamada de descubrimiento para conocer tu negocio, objetivos y desafíos. Luego armamos una propuesta a medida, la ejecutamos con entregas parciales y ajustamos hasta que estés 100% conforme. Todo con comunicación clara y tiempos acordados.</p></div>
       </div>
       <div class="faq-item">
         <div class="faq-head" onclick="toggleFaq(this)">
-          <span class="faq-q">¿Qué incluye exactamente cada plan?</span>
+          <span class="faq-q"> <em>¿Qué incluye exactamente cada plan?</em></span>
           <span class="faq-toggle">+</span>
         </div>
         <div class="faq-body"><p>Cada plan tiene un desglose detallado en la sección de Planes. Pero en resumen: incluyen gestión de redes, diseño de marca, publicidad digital, automatizaciones y reportes. Si necesitás algo específico que no esté listado, lo sumamos a medida.</p></div>
       </div>
       <div class="faq-item">
         <div class="faq-head" onclick="toggleFaq(this)">
-          <span class="faq-q">¿Puedo contratar servicios sueltos sin un plan mensual?</span>
+          <span class="faq-q"> <em>¿Puedo contratar servicios sueltos sin un plan mensual?</em></span>
           <span class="faq-toggle">+</span>
         </div>
         <div class="faq-body"><p>¡Sí! En la sección "Servicios a la carta" tenés disponibles branding, diseño web, campañas puntuales y producción de contenido. Podés contratarlos de forma independiente, sin compromiso mensual.</p></div>
       </div>
       <div class="faq-item">
         <div class="faq-head" onclick="toggleFaq(this)">
-          <span class="faq-q">¿Qué resultados puedo esperar?</span>
+          <span class="faq-q"> <em>¿Qué resultados puedo esperar?</em></span>
           <span class="faq-toggle">+</span>
         </div>
         <div class="faq-body"><p>Depende del punto de partida, pero nuestros clientes suelen ver aumento en alcance, engagement y generación de leads en los primeros 3 meses. Compartimos reportes mensuales para que siempre sepas cómo evoluciona tu marca.</p></div>
       </div>
       <div class="faq-item">
         <div class="faq-head" onclick="toggleFaq(this)">
-          <span class="faq-q">¿Trabajan con negocios de cualquier rubro?</span>
+          <span class="faq-q"> <em>¿Trabajan con negocios de cualquier rubro?</em></span>
           <span class="faq-toggle">+</span>
         </div>
         <div class="faq-body"><p>Trabajamos con marcas de moda, gastronomía, tecnología, salud, educación y más. Lo importante es que tengas claros tus valores y quieras construir una marca con identidad propia — el rubro es secundario.</p></div>
       </div>
       <div class="faq-item">
         <div class="faq-head" onclick="toggleFaq(this)">
-          <span class="faq-q">¿Cómo facturan? ¿Hay algún costo de inicio?</span>
+          <span class="faq-q"> <em>¿Cómo facturan? ¿Hay algún costo de inicio?</em></span>
           <span class="faq-toggle">+</span>
         </div>
         <div class="faq-body"><p>Facturamos con factura electrónica tipo C o E. No hay costo de inicio: los planes se abonan mes a mes, con un 50% de anticipo en proyectos puntuales (como diseño web o branding completo).</p></div>
       </div>
       <div class="faq-item">
         <div class="faq-head" onclick="toggleFaq(this)">
-          <span class="faq-q">¿Puedo cambiar de plan o cancelar cuando quiera?</span>
+          <span class="faq-q"> <em>¿Puedo cambiar de plan o cancelar cuando quiera?</em></span>
           <span class="faq-toggle">+</span>
         </div>
         <div class="faq-body"><p>Por supuesto. Podés subir o bajar de plan con 15 días de aviso. Si querés cancelar, también con 15 días de anticipación. Sin letra chica ni permanencias forzadas.</p></div>
       </div>
     </div>
-    <a href="#contacto" class="home-btn" aria-label="Ir a contacto">✦</a>
   </section>
 
   <!-- ===== CONTACTO ===== -->
@@ -621,7 +613,6 @@
         </div>
       </div>
     </div>
-    <a href="#inicio" class="home-btn" aria-label="Volver arriba">✦</a>
   </section>
 
   <!-- ===== FOOTER ===== -->

markdown/deepseek_text_20260827_5097ea.txt

@@ -0,0 +1,195 @@
+Aplicado a palabras destacadas con `background-clip: text`.
+
+---
+
+## 🔤 Tipografía
+
+| Uso | Fuente | Peso |
+|-----|--------|------|
+| Títulos y display | **Literata** (serif) | 300–800, itálica |
+| UI y navegación | **Raleway** (sans-serif) | 300–700 |
+| Cuerpo de texto | **Jost** (sans-serif) | 300–700 |
+| Nombre de equipo | *Kaleagnetta* (handwriting) | 500 |
+
+---
+
+## 🧭 Estructura de Navegación
+
+### Header (fijo)
+- Logo (izquierda) → link a inicio
+- Botón "Menú" (derecha) → abre *bottom sheet*
+
+### Bottom Sheet (menú móvil/overlay)
+- Logo + botón cerrar
+- Columnas organizadas por servicio:
+  - **Soluciones Web**: Diseño Web, E-commerce, Google Ads
+  - **Redes Sociales**: Community Manager, Creación de Contenido, Meta Ads
+  - **Branding**: Diseño de Logos, Identidad de Marca, Contacto
+
+---
+
+## 📄 Secciones de la Página
+
+### 1. Hero
+- Tagline: "Estudio Creativo · Agencia Boutique"
+- Título principal: "Marcas con esencia, construidas con estrategia."
+- Subtítulo descriptivo
+- CTA: "Ver servicios" (sólido) y "Contactanos" (outline)
+- Scroll hint animado
+
+### 2. Servicios
+- Tabs con número y nombre:
+  - 01 Branding
+  - 02 Diseño Web
+  - 03 Marketing Digital
+  - 04 IA & Automatización
+- Cada panel incluye:
+  - Título descriptivo
+  - Párrafo
+  - Lista de features con ícono ✦
+  - CTA a contacto
+
+### 3. Planes
+- Grid de 4 tarjetas (Esencial, Impulso, Premium ★, Elite)
+- Cada tarjeta incluye:
+  - Nombre
+  - Estrellas (★)
+  - Objetivo principal
+  - Lista de features
+  - Botón "+Info"
+- "Premium" destacado con badge "Más Popular"
+- CTA global: "Consulta tu plan ideal"
+
+### 4. Servicios a la Carta
+- Accordion con 5 categorías:
+  1. Diseño Web & Desarrollo
+  2. Branding e Identidad Visual
+  3. Publicidad Digital Avanzada
+  4. Diseño Digital & Gráfico
+  5. Producción Audiovisual
+- Cada ítem despliega servicios con precios
+
+### 5. Proceso de Trabajo
+- Grid horizontal con 6 pasos:
+  01 Contacto → 02 Propuesta → 03 Diseño → 04 Producción → 05 Revisión → 06 Lanzamiento
+- Cada paso: número, categoría, título y descripción
+
+### 6. Cifras (Inversión & Tiempos)
+- 3 tarjetas:
+  - **Inversión**: Desde $250.000/mes
+  - **Tiempos**: 15–30 días
+  - **Contrato**: 3 meses · luego mensual
+
+### 7. Cotizador
+- Cuestionario de 3 pasos:
+  1. Momento del negocio (4 opciones)
+  2. Necesidad principal (4 opciones)
+  3. Presupuesto mensual (4 rangos)
+- Barra de progreso
+- Resultado: recomienda uno de los 4 planes
+
+### 8. Nosotros
+- 2 tarjetas:
+  - Patricia Pugliese — Estrategia & Creatividad
+  - Francisco Anfuso — Desarrollo & Tecnología
+- Texto de cierre sobre colaboradores externos
+
+### 9. FAQ
+- 7 preguntas desplegables (accordion)
+- Formato: pregunta + toggle (+ / −)
+
+### 10. Contacto
+- Formulario con:
+  - Nombre, Email, Empresa, Teléfono
+  - Filtro de servicio (tabs)
+  - Mensaje
+  - Checkbox de privacidad
+- Datos de contacto:
+  - Email
+  - WhatsApp
+  - Redes sociales (Instagram, LinkedIn, Facebook)
+  - Ubicación: Argentina (remoto)
+
+### 11. Footer
+- Logo + descripción
+- Columnas: Navegación, Servicios, Contacto
+- Redes sociales (IG, IN, FB)
+- Copyright y enlaces legales
+
+---
+
+## 🎨 Componentes UI/UX
+
+| Componente | Descripción |
+|------------|-------------|
+| **Canvas fluid** | Simulación de humo/fluido interactivo (WebGL) |
+| **Overlay** | Fondo oscuro al abrir el menú |
+| **Bottom Sheet** | Menú deslizable desde abajo |
+| **Tabs** | Navegación entre servicios |
+| **Accordion** | Despliegue de contenido (servicios a la carta, FAQ) |
+| **Cotizador** | Cuestionario paso a paso con progreso |
+| **Filtros** | Tabs para seleccionar servicio en contacto |
+| **Scroll hint** | Indicador sutil para hacer scroll |
+
+---
+
+## ✨ Interacciones y Animaciones
+
+- **Efecto de humo**: Fluid simulation con colores que transicionan entre los colores de marca (Rosa → Bordo → Teal)
+- **Menú**: Transición suave `cubic-bezier(.2,.8,.2,1)`
+- **Tabs y paneles**: Fade-in con desplazamiento
+- **Accordion**: Expansión suave `max-height`
+- **Cotizador**: Barra de progreso animada, desbloqueo de botones al seleccionar
+- **Hover**: Cambios de color y borde en elementos interactivos
+
+---
+
+## 🖥️ Componentes Técnicos
+
+### Archivos incluidos
+- `index.html` — Estructura HTML
+- `styles.css` — Estilos y variables CSS
+- `scripts.js` — Interacciones (menú, tabs, accordion, cotizador, formulario)
+- `fluid.js` — Efecto de humo con WebGL
+
+### Dependencias externas
+- Google Fonts: Literata, Raleway, Jost (y Kaleagnetta local)
+
+### Canvas Fluid
+- Renderizado con WebGL (fallback a WebGL1)
+- Simulación de densidad, velocidad, presión y vorticidad
+- Colores de la marca con transición gradual
+- Interacción con mouse y touch
+
+---
+
+## 📱 Responsive
+
+| Breakpoint | Ajustes |
+|------------|---------|
+| `≤ 980px` | Planes 2 columnas, Proceso 3 columnas, Cifras 1 columna |
+| `≤ 820px` | Sheet 2 columnas, Contacto 1 columna, Footer 1 columna, Equipo 1 columna |
+| `≤ 720px` | Hero padding reducido, Paneles 1 columna, Planes 1 columna, Proceso 2 columnas, Cotizador padding reducido, Footer 2 columnas |
+| `≤ 520px` | Sheet max-height 70vh, padding reducido, Sheet 1 columna |
+
+---
+
+## 🧩 Paleta de Marcas (Brand Colors)
+
+| Nombre | Hex | Uso |
+|--------|-----|-----|
+| Teal | `#003F52` | Acento secundario |
+| Bordo | `#BA124D` | Acento primario, botones |
+| Rosa | `#DFBDB9` | Detalles, hover |
+| Oscuro | `#110916` | Fondo |
+| Claro | `#EAF0EE` | Texto principal |
+| Dusty | `#a79bab` | Texto secundario |
+
+### Gradiente de palabras destacadas
+```css
+.grad-word {
+  background: linear-gradient(100deg, #DFBDB9 0%, #BA124D 70%, #006d8f 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}

styles.css

@@ -7,9 +7,9 @@
   --ligth-teal: #006d8f;
   --bordo: #BA124D;
   --oscuro: #110916;
-  --dusty: #a79bab;
+  --casi-negro: #0B060E;
+  --dusty: #cec7d1;
   --claro: #EAF0EE;
-  --rosa: #DFBDB9;
   --rose-gold-1: #DFBDB9;
   --rose-gold-2: #BA8B7A;
   --rose-gold-3: #C89A82;
@@ -46,7 +46,7 @@ body {
 }
 
 /* Asegurar que el contenido esté por encima */
-.hero, section {
+.hero, section, .footer {
   position: relative;
   z-index: 1;
 }
@@ -66,13 +66,13 @@ header {
   letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
   cursor: pointer; transition: .25s;
 }
-.menu-btn:hover { border-color: var(--rosa); color: var(--rosa); }
+.menu-btn:hover { border-color: var(--claro); color: var(--claro); }
 .menu-btn .bars { display: flex; flex-direction: column; gap: 3px; }
 .menu-btn .bars span { width: 14px; height: 1.4px; background: currentColor; display: block; }
 
 /* ===== OVERLAY & SHEET ===== */
 .overlay {
-  position: fixed; inset: 0; background: rgba(0,0,0,.6);
+  position: fixed; inset: 0; background: rgba(0,0,0,1);
   opacity: 0; pointer-events: none; transition: .35s; z-index: 90;
 }
 .overlay.open { opacity: 1; pointer-events: auto; }
@@ -103,7 +103,7 @@ header {
 .sheet-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: start; }
 .sheet-col { display: flex; flex-direction: column; gap: 2px; }
 .sheet-col-title {
-  font-family: var(--font-ui); font-size: 16px; font-weight: 500;
+  font-family: var(--font-ui); font-size: 18px; font-weight: 500;
   letter-spacing: .12em; text-transform: uppercase;
   color: var(--bordo); margin-bottom: 8px; padding-right: 12px; text-align: right;
 }
@@ -114,13 +114,13 @@ header {
   background: transparent; text-align: right;
 }
 .sheet-link:hover { background: rgba(186,18,77,.06); }
-.sheet-link-icon { font-size: 12px; color: var(--bordo); opacity: .4; text-align: center; grid-row: 1/3; grid-column: 2; }
+.sheet-link-icon { font-size: 16px; color: var(--bordo); opacity: .4; text-align: center; grid-row: 1/3; grid-column: 2; }
 .sheet-link-main {
   font-family: var(--font-display); font-style: italic; font-weight: 600;
-  font-size: 16px; color: var(--oscuro); line-height: 1.2; grid-column: 1;
+  font-size: 18px; color: var(--oscuro); line-height: 1.2; grid-column: 1;
 }
 .sheet-link-desc {
-  font-family: var(--font-ui); font-size: 13px; color: var(--dusty);
+  font-family: var(--font-ui); font-size: 14px; color: var(--oscuro);
   font-weight: 500; opacity: .8; grid-column: 1; margin-top: -2px;
 }
 .sheet-link.highlight {
@@ -163,8 +163,10 @@ header {
   background: linear-gradient(90deg, var(--rose-gold-3), var(--rose-gold-1));
 }
 h1, h2 {
-  font-family: var(--font-display); font-weight: 300; font-style: italic;
-  font-size: clamp(40px, 6vw, 72px); line-height: 1.05;
+  font-family: var(--font-display); font-weight: 500; font-style: italic;
+  font-size: clamp(40px, 6vw, 72px); 
+  max-width: 900px;
+  line-height: 1.05;
   margin-bottom: 16px;
 }
 .grad-word {
@@ -172,9 +174,9 @@ h1, h2 {
   -webkit-background-clip: text; background-clip: text; color: transparent;
 }
 p, .lede {
-  font-family: var(--font-ui); font-size: 18px; line-height: 1.7;
-  color: var(--claro); max-width: 560px; margin: 0 auto 26px; opacity: 0.8;
-  font-weight: 300;
+  font-family: var(--font-ui); font-size: 22px; line-height: 1.7;
+  color: var(--claro); max-width: 600px; margin: 0 auto 16px; opacity: 0.8;
+  font-weight: 400;
 }
 .lede { font-size: 18px; opacity: 0.7; max-width: 640px; }
 
@@ -194,7 +196,7 @@ p, .lede {
   background: transparent; color: var(--claro);
   border: 1px solid rgba(234,240,238,.2);
 }
-.btn-outline:hover { border-color: var(--rosa); color: var(--rosa); }
+.btn-outline:hover { border-color: var(--claro); color: var(--claro); }
 .hero-actions { display: flex; gap: 16px; justify-content: center; margin-top: 40px; }
 .hero-actions .btn {
   pointer-events: auto;
@@ -213,11 +215,11 @@ p, .lede {
 .scroll-hint {
   position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
   font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .2em;
-  text-transform: uppercase; color: rgba(234,240,238,.3);
+  text-transform: uppercase; color: rgba(234,240,238,.7);
   display: flex; flex-direction: column; align-items: center; gap: 8px;
   pointer-events: auto;
 }
-.scroll-hint .line { width: 1px; height: 36px; background: rgba(234,240,238,.2); }
+.scroll-hint .line { width: 1px; height: 36px; background: rgba(234,240,238,.5); }
 
 /* ===== SECCIONES GENERALES ===== */
 section { padding: 80px 48px; max-width: 1200px; margin: 0 auto; position: relative; }
@@ -232,13 +234,13 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 }
 .tab {
   font-family: var(--font-ui); font-size: 20px; font-weight: 400;
-  letter-spacing: .03em; color: rgba(234,240,238,.4);
+  letter-spacing: .03em; color: var(--claro);
   background: none; border: none; cursor: pointer;
   padding: 14px 22px; position: relative; transition: .2s;
 }
 .tab .num {
   font-family: var(--font-display); font-style: italic; font-size: 13px;
-  color: var(--rosa); margin-right: 8px;
+  color: var(--claro); margin-right: 8px;
 }
 .tab.active { color: var(--claro); }
 .tab.active::after {
@@ -272,14 +274,19 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px;
 }
 .plan-card {
-  background: rgba(234,240,238,.03); border: 1px solid rgba(234,240,238,.06);
-  border-radius: 10px; padding: 30px 24px; display: flex; flex-direction: column;
+  background: rgba(22, 22, 9, 0.85); /* Antes era rgba(234,240,238,.03) */
+  border: 1px solid rgba(234,240,238,.1);
+  border-radius: 10px;
+  padding: 30px 24px;
+  display: flex;
+  flex-direction: column;
   text-align: center;
+  backdrop-filter: blur(4px); /* Opcional: agrega desenfoque al fondo */
 }
 .plan-card.reco {
   border: 1px solid rgba(223,189,185,.2);
   background: rgba(234,240,238,.04);
-  box-shadow: 0 0 30px rgba(186,18,77,.05);
+  box-shadow: 0 0 30px rgba(186,18,77,.2);
 }
 .badge {
   align-self: center; font-family: var(--font-ui); font-size: 9px; font-weight: 700;
@@ -289,21 +296,21 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 }
 .plan-name {
   font-family: var(--font-display); font-style: italic; font-weight: 500;
-  font-size: 24px; margin-bottom: 4px;
+  font-size: 28px; margin-bottom: 4px;
 }
-.plan-stars { color: var(--rosa); font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
+.plan-stars { color: var(--claro); font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
 .plan-obj {
-  font-family: var(--font-ui); font-size: 12px; line-height: 1.5;
-  color: rgba(234,240,238,.5); margin-bottom: 22px; min-height: 52px;
+  font-family: var(--font-ui); font-size: 18px; line-height: 1.5;
+  color: var(--claro); margin-bottom: 22px; min-height: 52px;
 }
 .plan-feats { list-style: none; flex: 1; margin-bottom: 24px; text-align: left; }
 .plan-feats li {
-  font-family: var(--font-ui); font-size: 12px; line-height: 1.5;
-  padding: 8px 0; border-top: 1px solid rgba(234,240,238,.06);
+  font-family: var(--font-body); font-size: 18px; line-height: 1.5;
+  padding: 8px 0; border-top: 1px solid rgba(234,240,238,.08);
   color: rgba(234,240,238,.7);
 }
 .plan-feats li:first-child { border-top: none; }
-.plan-feats li::before { content: '— '; color: var(--rosa); opacity: 0.5; }
+.plan-feats li::before { content: '— '; color: var(--claro); opacity: 1; }
 .plan-cta {
   font-family: var(--font-ui); font-size: 12px; font-weight: 500;
   letter-spacing: .04em; text-align: center; padding: 12px;
@@ -311,88 +318,129 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   border: 1px solid rgba(234,240,238,.15); color: var(--claro);
   transition: .25s;
 }
-.plan-cta:hover { border-color: var(--rosa); color: var(--rosa); }
+.plan-cta:hover { border-color: var(--claro); color: var(--claro); }
 .plan-main-cta { display: block; max-width: 300px; margin: 0 auto; text-align: center; }
 
 /* ===== ACCORDION ===== */
 .acc { border-top: 1px solid rgba(234,240,238,.06); }
-.acc-item { border-bottom: 1px solid rgba(234,240,238,.06); }
+.acc-item {
+  border-bottom: 1px solid rgba(234,240,238,.06);
+  background: rgba(17, 9, 22, 0.7); /* Fondo sutil para cada item */
+  border-radius: 10px;
+  padding: 2px 0
+
+}
 .acc-head {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 20px 4px; cursor: pointer;
+  display: flex; 
+  align-items: center; 
+  justify-content: space-between;
+  padding: 20px 24px; 
+  cursor: pointer;
 }
 .acc-head-left { display: flex; align-items: center; gap: 16px; }
-.acc-num { font-family: var(--font-display); font-style: italic; color: var(--dusty); font-size: 14px; opacity: 0.5; }
+.acc-num { font-family: var(--font-display); font-style: italic; color: var(--dusty); font-size: 14px; opacity: 1; }
 .acc-name { font-family: var(--font-ui); font-size: 26px; font-weight: 400; }
 .acc-toggle {
-  width: 26px; height: 26px; border-radius: 100px;
+  width: 26px; 
+  height: 26px; 
+  border-radius: 100px;
   border: 1px solid rgba(234,240,238,.15);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 14px; color: var(--rosa); transition: .25s;
+  display: flex; 
+  align-items: center; 
+  justify-content: center;
+  font-size: 14px; 
+  color: var(--claro); 
+  transition: .25s; 
+  line-height: 1; 
+  position: relative;
+}
+.acc-toggle::before {
+  content: '+';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .acc-item.open .acc-toggle { transform: rotate(45deg); border-color: var(--bordo); color: var(--bordo); }
 .acc-body { max-height: 0; overflow: hidden; transition: .35s ease; }
 .acc-item.open .acc-body { max-height: 600px; }
-.acc-body-inner { padding: 0 4px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.acc-body-inner { 
+  padding: 0 24px 24px 24px; 
+  display: grid; 
+  grid-template-columns: 1fr 1fr; 
+  gap: 16px; 
+}
 .service-row {
-  font-family: var(--font-ui); font-size: 16px; color: rgba(234,240,238,.6);
+  font-family: var(--font-ui); font-size: 14px; color: rgba(234,240,238,.8);
   padding: 12px 0; border-top: 1px solid rgba(234,240,238,.04);
 }
-.service-row b { display: block; color: var(--claro); font-size: 14px; margin-bottom: 3px; font-weight: 500; }
-.service-row .price { color: var(--rosa); font-family: var(--font-display); font-style: italic; font-size: 13px; }
+.service-row b { 
+  display: block; 
+  color: var(--claro);
+  font-family: var(--font-display); 
+  font-style: italic; 
+  font-size: 20px; 
+  margin-bottom: 3px; 
+  font-weight: 400; 
+}
+.service-row .price { color: var(--dusty); font-family: var(--font-display); font-style: italic; font-size: 13px; }
 
 /* ===== PROCESO ===== */
 .arcade-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
 .column { position: relative; padding: 0 6px; text-align: center; }
 .column:not(:last-child)::after {
   content: ''; position: absolute; right: -7px; top: 14%; bottom: 44px;
-  width: 1px; background: rgba(234,240,238,.06);
+  width: 1px; background: rgba(234,240,238,0.4);
 }
 .arch {
   width: 100%; aspect-ratio: 1/1; max-height: 100px;
-  border: 2px solid rgba(234,240,238,.06); border-bottom: none;
+  border: 2px solid rgba(234,240,238,0.4); border-bottom: none;
   border-radius: 100px 100px 0 0;
   display: flex; align-items: flex-end; justify-content: center;
   padding-bottom: 16px; margin-bottom: 16px;
   transition: .3s;
 }
 .column:hover .arch { border-color: rgba(223,189,185,.3); }
-.arch .num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--rosa); opacity: 0.5; }
+.arch .num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--claro); opacity: 0.5; }
 .arch.final { background: var(--bordo); border-color: var(--bordo); }
 .arch.final svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
 .cat {
   font-family: var(--font-ui); font-size: 10px; letter-spacing: .14em;
-  text-transform: uppercase; color: var(--ligth-teal); font-weight: 500;
+  text-transform: uppercase; color: var(--ligth-teal); font-weight: 900;
   margin-bottom: 6px;
 }
 .column:nth-child(even) .cat { color: var(--bordo); }
 .step-title {
-  font-family: var(--font-display); font-style: italic; font-weight: 500;
+  font-family: var(--font-display); font-style: italic; font-weight: 600;
   font-size: 15px; margin-bottom: 6px;
 }
 .step-desc {
   font-family: var(--font-ui); font-size: 12px; line-height: 1.5;
-  color: var(--dusty);
+  color: var(--claro);
 }
 
 /* ===== CIFRAS ===== */
 .cifras-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
 .cifra-card {
-  background: rgba(234,240,238,.02); border: 1px solid rgba(234,240,238,.06);
-  border-radius: 10px; padding: 34px 30px; text-align: center;
+  background: rgba(17, 9, 22, 0.85);
+  border: 1px solid rgba(234,240,238,.1);
+  border-radius: 10px;
+  padding: 34px 30px;
+  text-align: center;
+  backdrop-filter: blur(4px);
 }
 .cifra-icon {
   width: 44px; height: 56px; margin: 0 auto 20px;
-  border: 2px solid rgba(234,240,238,.06); border-bottom: none;
+  border: 2px solid rgba(234,240,238,0.87); border-bottom: none;
   border-radius: 22px 22px 0 0;
 }
 .cifra-label {
-  font-family: var(--font-ui); font-size: 16px; letter-spacing: .18em;
-  text-transform: uppercase; color: var(--ligth-teal); font-weight: 500; margin-bottom: 12px;
+  font-family: var(--font-body); font-size: 20px; letter-spacing: .18em;
+  text-transform: uppercase; color: var(--claro); font-weight: 500; margin-bottom: 12px;
 }
 .cifra-value {
   font-family: var(--font-display); font-style: italic; font-weight: 500;
-  font-size: 24px; color: var(--claro); margin-bottom: 14px;
+  font-size: 24px; color: var(--ligth-teal); margin-bottom: 14px;
 }
 .cifra-desc {
   font-family: var(--font-body); font-size: 16px; line-height: 1.6;
@@ -402,25 +450,38 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 
 /* ===== COTIZADOR ===== */
 .card {
-  background: rgba(234,240,238,.03); border: 1px solid rgba(234,240,238,.06);
-  border-radius: 14px; padding: 48px 52px; max-width: 800px; margin: 0 auto;
+  background: rgba(17, 9, 22, 0.85);
+  border: 1px solid rgba(234,240,238,.1);
+  border-radius: 14px;
+  padding: 48px 52px;
+  max-width: 800px;
+  margin: 0 auto;
+  backdrop-filter: blur(4px);
 }
 .progress { display: flex; gap: 6px; margin-bottom: 36px; }
 .progress .seg { height: 3px; flex: 1; background: rgba(234,240,238,.1); border-radius: 100px; overflow: hidden; }
-.progress .seg i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--rose-gold-3), var(--bordo)); transition: .4s; }
+.progress .seg i { display: block; height: 100%; width: 0%; background: -gradient(90deg, var(--rose-gold-3), var(--bordo)linear); transition: .4s; }
 .step { display: none; }
 .step.active { display: block; animation: fade .35s ease; }
-.q-num { font-family: var(--font-display); font-style: italic; color: var(--rosa); font-size: 14px; margin-bottom: 10px; }
-.q-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; margin-bottom: 28px; }
+.q-num { font-family: var(--font-display); font-style: italic; color: var(--dusty); font-size: 18px; margin-bottom: 10px; }
+.q-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 26px; margin-bottom: 28px; }
 .options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
 .opt {
-  border: 1px solid rgba(234,240,238,.1); border-radius: 8px; padding: 18px 20px;
-  cursor: pointer; transition: .2s; font-family: var(--font-ui);
+  border: 1px solid rgba(234,240,238,.15);
+  border-radius: 8px;
+  padding: 18px 20px;
+  cursor: pointer;
+  transition: .2s;
+  font-family: var(--font-ui);
+  background: rgba(17, 9, 22, 0.7); /* Fondo semi-transparente para opciones */
 }
 .opt:hover { border-color: rgba(223,189,185,.3); }
-.opt.selected { border-color: var(--bordo); background: rgba(186,18,77,.05); }
-.opt-title { font-size: 14px; font-weight: 500; color: var(--claro); margin-bottom: 3px; }
-.opt-sub { font-size: 12px; color: var(--dusty); }
+.opt.selected {
+  border-color: var(--bordo);
+  background: rgba(186, 18, 77, 0.2);
+}
+.opt-title { font-size: 18px; font-weight: 500; color: var(--claro); margin-bottom: 3px; }
+.opt-sub { font-size: 16px; color: var(--dusty); }
 .nav-row { display: flex; justify-content: space-between; align-items: center; }
 .btn-cotizador {
   font-family: var(--font-ui); font-size: 13px; font-weight: 500;
@@ -455,20 +516,27 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 /* ===== NOSOTROS ===== */
 .team-grid-simple { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 800px; margin: 0 auto; }
 .team-card-simple {
-  background: rgba(234,240,238,.02); border: 1px solid rgba(234,240,238,.06);
-  border-radius: 12px; padding: 40px 32px; text-align: center;
+  background: rgba(17, 9, 22, 0.85);
+  border: 1px solid rgba(234,240,238,.1);
+  border-radius: 12px;
+  padding: 40px 32px;
+  text-align: center;
+  backdrop-filter: blur(4px);
 }
 .team-name {
   font-family: var(--font-name); font-weight: 500;
-  font-size: 30px; margin-bottom: 8px;
+  font-size: 50px; margin-bottom: 8px;
 }
 .team-role {
-  font-family: var(--font-ui); font-size: 13px; font-weight: 400;
-  letter-spacing: .06em; text-transform: uppercase; color: var(--rosa);
+  font-family: var(--font-ui); font-size: 16px; font-weight: 400;
+  letter-spacing: .06em; text-transform: uppercase; color: var(--dusty);
   margin-bottom: 12px; opacity: 0.6;
 }
 .team-detail {
-  font-family: var(--font-ui); font-size: 13px; line-height: 1.6;
+  font-family: var(--font-display); 
+  font-weight: 200;
+  font-size: 16px; 
+  line-height: 1.6;
   color: var(--claro);
 }
 .team-footer {
@@ -488,9 +556,9 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   display: flex; justify-content: space-between; align-items: center;
   padding: 20px 4px; cursor: pointer; transition: .2s;
 }
-.faq-head:hover .faq-q { color: var(--rosa); }
+.faq-head:hover .faq-q { color: var(--claro); }
 .faq-q {
-  font-family: var(--font-ui); font-weight: 400;
+  font-family: var(--font-display); font-weight: 200;
   font-size: 20px; transition: .2s;
 }
 .faq-toggle {
@@ -504,27 +572,30 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 .faq-body { max-height: 0; overflow: hidden; transition: .4s ease; }
 .faq-item.open .faq-body { max-height: 100px; }
 .faq-body p {
-  font-family: var(--font-body); font-size: 15px; line-height: 1.7;
+  font-family: var(--font-ui); font-size: 16px; line-height: 1.7;
   color: var(--claro); padding: 0 4px 14px; max-width: 800px;
 }
 
 /* ===== CONTACTO ===== */
 .contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
 .contact-form-wrap {
-  background: rgba(234,240,238,.02); border: 1px solid rgba(234,240,238,.06);
-  border-radius: 12px; padding: 40px 36px;
+  background: rgba(17, 9, 22, 0.85);
+  border: 1px solid rgba(234,240,238,.1);
+  border-radius: 12px;
+  padding: 40px 36px;
+  backdrop-filter: blur(4px);
 }
 .contact-form { display: flex; flex-direction: column; gap: 18px; }
 .form-row { display: flex; gap: 18px; }
 .form-group { flex: 1; display: flex; flex-direction: column; gap: 4px; }
 .form-group.full { flex: 0 0 100%; }
 .form-group label {
-  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
-  letter-spacing: .04em; text-transform: uppercase; color: rgba(234,240,238,.5);
+  font-family: var(--font-ui); font-size: 16px; font-weight: 500;
+  letter-spacing: .04em; text-transform: uppercase; color: rgba(234,240,238,0.8);
 }
 .form-group .req { color: var(--bordo); }
 .form-group input, .form-group textarea {
-  font-family: var(--font-body); font-size: 14px; font-weight: 300;
+  font-family: var(--font-body); font-size: 16px; font-weight: 300;
   padding: 12px 14px; border-radius: 6px;
   border: 1px solid rgba(234,240,238,.08);
   background: rgba(234,240,238,.03); color: var(--claro);
@@ -536,12 +607,12 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 }
 .filter-tags { display: flex; flex-wrap: wrap; gap: 8px; }
 .filter-tag {
-  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
+  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
   padding: 6px 16px; border-radius: 100px;
-  border: 1px solid rgba(234,240,238,.1); background: transparent;
+  border: 1px solid rgba(234,240,238,.5); background: transparent;
   color: rgba(234,240,238,.4); cursor: pointer; transition: .2s;
 }
-.filter-tag:hover { border-color: var(--rosa); color: var(--claro); }
+.filter-tag:hover { border-color: var(--claro); color: var(--claro); }
 .filter-tag.active { background: var(--bordo); border-color: var(--bordo); color: #fff; }
 .checkbox-label {
   display: flex; align-items: center; gap: 10px;
@@ -552,9 +623,14 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 
 .contact-direct { display: flex; flex-direction: column; gap: 16px; }
 .contact-card {
-  display: flex; align-items: flex-start; gap: 16px;
-  padding: 18px 20px; background: rgba(234,240,238,.02);
-  border: 1px solid rgba(234,240,238,.04); border-radius: 10px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 20px;
+  background: rgba(17, 9, 22, 0.85);
+  border: 1px solid rgba(234,240,238,.08);
+  border-radius: 10px;
+  backdrop-filter: blur(4px);
 }
 .contact-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; margin-top: 2px; }
 .contact-label {
@@ -562,7 +638,7 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   letter-spacing: .08em; text-transform: uppercase; color: var(--claro); opacity: 0.5;
 }
 .contact-info a { font-family: var(--font-body); font-size: 14px; color: var(--claro); text-decoration: none; }
-.contact-info a:hover { color: var(--rosa); }
+.contact-info a:hover { color: var(--claro); }
 .contact-info span { font-family: var(--font-body); font-size: 13px; color: var(--claro); }
 .contact-socials { display: flex; gap: 12px; }
 .contact-socials a {
@@ -573,7 +649,7 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 
 /* ===== FOOTER ===== */
 .footer {
-  background: rgba(0,0,0,.2); border-top: 1px solid rgba(234,240,238,.04);
+  background: rgba(0,0,0,.7); border-top: 1px solid rgba(234,240,238,.04);
   padding: 60px 48px 20px;
 }
 .footer-inner {
@@ -582,11 +658,11 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   border-bottom: 1px solid rgba(234,240,238,.04);
 }
 .footer-brand { display: flex; flex-direction: column; gap: 12px; }
-.footer-desc { font-family: var(--font-display); font-size: 16px; line-height: 1.6; color: var(--dusty); max-width: 320px; }
+.footer-desc { font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: var(--claro); max-width: 320px; }
 .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
 .footer-col h4 {
-  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
-  letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); opacity: 0.4;
+  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
+  letter-spacing: .1em; text-transform: uppercase; color: var(--dusty); opacity: 1;
   margin-bottom: 12px;
 }
 .footer-col a {
@@ -602,7 +678,7 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   border: 1px solid rgba(234,240,238,.08); border-radius: 100px;
   transition: .2s;
 }
-.footer-socials a:hover { border-color: var(--rosa); color: var(--rosa); }
+.footer-socials a:hover { border-color: var(--claro); color: var(--claro); }
 .footer-bottom {
   max-width: 1200px; margin: 0 auto; padding-top: 20px;
   display: flex; justify-content: space-between; align-items: center;
@@ -613,6 +689,27 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 .footer-legal a { font-family: var(--font-body); font-size: 12px; color: rgba(234,240,238,.2); text-decoration: none; }
 .footer-legal a:hover { color: rgba(234,240,238,.5); }
 
+/* Todas las cards con fondo oscuro y blur */
+.plan-card,
+.cifra-card,
+.team-card-simple,
+.contact-card,
+.contact-form-wrap,
+.card {
+  background: rgba(11, 5, 14, 0.85) !important;
+  backdrop-filter: blur(8px) !important;
+  -webkit-backdrop-filter: blur(8px) !important;
+  border: 1px solid rgba(234,240,238,0.08);
+}
+
+/* ===== MENU (fondo claro) ===== */
+.sheet {
+  background: rgba(234, 240, 238, 0.95) !important;
+  backdrop-filter: blur(8px) !important;
+  -webkit-backdrop-filter: blur(8px) !important;
+  border: 1px solid rgba(34,23,40,0.08) !important;
+}
+
 /* ===== RESPONSIVE ===== */
 @media (max-width: 980px) {
   .plans-grid { grid-template-columns: 1fr 1fr; }
@@ -643,7 +740,22 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   .footer-bottom { flex-direction: column; text-align: center; }
 }
 @media (max-width: 520px) {
-  .sheet { max-height: 70vh; padding: 10px 16px 20px; border-radius: 16px 16px 0 0; }
+  .sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  background: rgba(234, 240, 238, 0.95); /* Más opaco */
+  border-radius: 22px 22px 0 0;
+  padding: 10px 36px 30px;
+  transform: translateY(102%);
+  transition: transform .4s cubic-bezier(.2,.8,.2,1);
+  max-height: 55vh;
+  overflow-y: auto;
+  color: var(--oscuro);
+  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
+  backdrop-filter: blur(8px); }
   .sheet-body { grid-template-columns: 1fr; gap: 16px; }
   .sheet-col:last-child { grid-column: auto; }
   .home-btn { right: 12px; bottom: 12px; font-size: 10px; }