cambios menu

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)
 ];

index.html

@@ -238,9 +238,9 @@
     <a href="#cotizador" class="btn btn-outline plan-main-cta">Consulta tu plan ideal</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">
@@ -445,8 +445,8 @@
   <!-- ===== 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">Creemos que las marcas se construyen con escucha, estrategia y mucho amor por lo que hacemos. 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>

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;
+  --casi-negro: #0B060E;
   --dusty: #a79bab;
   --claro: #EAF0EE;
-  --rosa: #DFBDB9;
   --rose-gold-1: #DFBDB9;
   --rose-gold-2: #BA8B7A;
   --rose-gold-3: #C89A82;
@@ -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; }
@@ -120,7 +120,7 @@ header {
   font-size: 16px; 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: 13px; color: var(--claro);
   font-weight: 500; opacity: .8; grid-column: 1; margin-top: -2px;
 }
 .sheet-link.highlight {
@@ -194,7 +194,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;
@@ -232,13 +232,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 +272,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;
@@ -291,19 +296,19 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   font-family: var(--font-display); font-style: italic; font-weight: 500;
   font-size: 24px; 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: 14px; 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;
+  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
   padding: 8px 0; border-top: 1px solid rgba(234,240,238,.06);
   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,75 +316,116 @@ 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;
@@ -402,23 +448,36 @@ 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; }
 .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-num { font-family: var(--font-display); font-style: italic; color: var(--claro); 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; }
 .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.selected {
+  border-color: var(--bordo);
+  background: rgba(186, 18, 77, 0.2);
+}
 .opt-title { font-size: 14px; font-weight: 500; color: var(--claro); margin-bottom: 3px; }
 .opt-sub { font-size: 12px; color: var(--dusty); }
 .nav-row { display: flex; justify-content: space-between; align-items: center; }
@@ -455,8 +514,12 @@ 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;
@@ -464,7 +527,7 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 }
 .team-role {
   font-family: var(--font-ui); font-size: 13px; font-weight: 400;
-  letter-spacing: .06em; text-transform: uppercase; color: var(--rosa);
+  letter-spacing: .06em; text-transform: uppercase; color: var(--claro);
   margin-bottom: 12px; opacity: 0.6;
 }
 .team-detail {
@@ -488,7 +551,7 @@ 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-size: 20px; transition: .2s;
@@ -511,8 +574,11 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
 /* ===== 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; }
@@ -541,7 +607,7 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
   border: 1px solid rgba(234,240,238,.1); 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 +618,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 +633,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 +644,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 +653,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 +673,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 +684,20 @@ 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,
+.sheet {
+  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);
+}
+
 /* ===== RESPONSIVE ===== */
 @media (max-width: 980px) {
   .plans-grid { grid-template-columns: 1fr 1fr; }
@@ -643,7 +728,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; }