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;
}