commit a29340ecb12bdde497dabc2608908e502fa277b5 Author: Patricia Pugliese Date: Sun Sep 6 17:49:30 2026 -0300 inicio diff --git a/Arquitectura.md b/Arquitectura.md new file mode 100644 index 0000000..85a9b6b --- /dev/null +++ b/Arquitectura.md @@ -0,0 +1,1325 @@ +Perfecto. Con tus respuestas, la arquitectura debe posicionar a **Amor y Roma** como una agencia boutique híbrida —creatividad + estrategia + tecnología—, pero con una experiencia principalmente orientada a **conversión**. + +El sitio no debería funcionar simplemente como un catálogo de servicios. La idea central debería ser llevar al visitante desde **“necesito mejorar mi negocio” → “Amor y Roma entiende mi problema” → “esta es la solución que necesito” → “quiero hablar con ellos”**. + +La estructura propuesta se apoya directamente en el manual: posicionamiento boutique, servicios recurrentes y proyectos cerrados, los cuatro arquetipos de solución, el workflow de cinco etapas y la dualidad Amor/Roma. + +1. Arquitectura general del multisitio + ====================================== + +### Dominio + + / + ├── Home + ├── Servicios + ├── Planes + ├── Portfolio + ├── Nosotros + ├── Método + ├── Contacto + └── Diagnóstico + +### Estructura interna + + HOME + │ + ├── SERVICIOS + │ ├── Branding & Identidad + │ ├── Desarrollo Web + │ ├── Redes Sociales & Contenido + │ ├── Automatizaciones + │ └── Paid Media + │ + ├── PLANES + │ ├── Plan Esencial + │ ├── Plan Impulso + │ ├── Plan Premium + │ └── Plan Élite + │ + ├── PORTFOLIO + │ ├── Caso 1 — Identidad + RRSS + │ ├── Caso 2 — Web Corporativa + │ ├── Caso 3 — Ecosistema Digital + │ └── Caso 4 — Profesionalización + │ + ├── NOSOTROS + │ + ├── MÉTODO + │ + ├── DIAGNÓSTICO + │ + └── CONTACTO + +**Importante:** aunque los servicios individuales aparecen dentro de `/servicios`, recomiendo que cada uno pueda tener una **URL propia**. No serían necesariamente páginas independientes dentro de la navegación principal, sino landing pages específicas para campañas, SEO y conversión. + +* * * + +2. Navegación principal + ======================= + +La navegación debería ser deliberadamente corta: + +**Logo | Servicios | Planes | Portfolio | Nosotros | Método | Contacto** + +Y como CTA destacado: + +**"Encontrá tu solución"** + +Este CTA debería conducir al **Diagnóstico**, que funcionaría como herramienta de cualificación. + +Como CTA secundario recurrente: + +**"Hablemos de tu proyecto"** + +→ Contacto / WhatsApp. + +* * * + +3. HOME + ======= + +Objetivo +-------- + +La Home debe vender la propuesta de valor completa y derivar al visitante hacia una de tres acciones: + +1. conocer servicios; + +2. explorar casos; + +3. iniciar un diagnóstico. + +No debería intentar explicar absolutamente todo. + +* * * + +Bloque 01 — Hero +---------------- + +### Contenido + +**Propuesta principal** + +> Marcas con esencia, construidas con estrategia. + +Es el eslogan oficial definido en el manual. + +Debajo: + +Una explicación breve de la combinación entre creatividad, estrategia y estructura digital. + +### CTA principal + +**Encontrá tu solución** + +→ Diagnóstico + +### CTA secundario + +**Ver nuestros servicios** + +→ Servicios + +* * * + +Bloque 02 — El concepto Amor + Roma +----------------------------------- + +Dos columnas: + +### AMOR + +Pasión · Arte · Identidad · Dirección creativa + +### ROMA + +Estrategia · Arquitectura · Tecnología · Procesos + +Mensaje central: + +**La creatividad atrae. La estrategia la convierte en crecimiento.** + +### Objetivo + +Diferenciación. + +No presentar a la agencia simplemente como "otra agencia de marketing". + +* * * + +Bloque 03 — Problemas que resolvemos +------------------------------------ + +En lugar de empezar inmediatamente hablando de servicios, presentar situaciones reconocibles: + +* "Mi marca no refleja el valor de mi negocio." + +* "Tengo redes, pero no generan resultados." + +* "Necesito una web que realmente venda." + +* "Estoy perdiendo oportunidades por procesos manuales." + +* "Necesito atraer clientes con publicidad." + +* "Mi negocio creció y mi presencia digital quedó atrás." + +### CTA + +**Quiero descubrir qué necesito** + +→ Diagnóstico + +* * * + +4. HOME — Servicios + =================== + +Bloque 04 — Ecosistema de soluciones +------------------------------------ + +Presentación resumida de los cinco grandes servicios: + +### Branding & Identidad + +Construcción de identidad, universo visual y posicionamiento. + +### Redes Sociales & Contenido + +Contenido, dirección de arte, estrategia y gestión. + +### Desarrollo Web + +Activos digitales diseñados alrededor del negocio y el embudo. + +### Automatizaciones + +Conversaciones, captación y cualificación de prospectos. + +### Paid Media + +Publicidad, campañas, optimización y adquisición. + +Estos servicios están respaldados por el portafolio interno. + +### CTA + +**Explorar servicios** + +→ `/servicios` + +* * * + +5. HOME — Planes + ================ + +Bloque 05 — Planes de crecimiento +--------------------------------- + +Introducción a los cuatro niveles: + +**Esencial → Impulso → Premium → Élite** + +No mostrar toda la tabla del manual en Home. + +Mostrar: + +* para quién es; + +* objetivo; + +* nivel de acompañamiento; + +* CTA. + +Los cuatro planes están diseñados para acompañar diferentes niveles de madurez del cliente. + +### CTA + +**Comparar planes** + +→ `/planes` + +### CTA secundario + +**No sé cuál necesito** + +→ `/diagnostico` + +* * * + +6. HOME — Portfolio + =================== + +Bloque 06 — Trabajo que habla por nosotros +------------------------------------------ + +Mostrar 3–4 proyectos destacados. + +Cada tarjeta: + +* imagen; + +* cliente/proyecto; + +* problema; + +* solución; + +* resultado o transformación; + +* servicios involucrados. + +La selección debería representar los cuatro arquetipos definidos internamente. + +### CTA + +**Ver portfolio completo** + +→ `/portfolio` + +* * * + +7. HOME — Método + ================ + +Bloque 07 — No improvisamos +--------------------------- + +Presentar las cinco etapas: + +**01 Diagnóstico → 02 Estrategia → 03 Producción → 04 Validación → 05 Medición** + +Es exactamente la lógica operativa definida por la agencia. + +### CTA + +**Conocé nuestro método** + +→ `/metodo` + +* * * + +8. HOME — CTA final + =================== + +Bloque 08 — Conversión +---------------------- + +Mensaje fuerte: + +> **Tu próximo paso no tiene que ser otra publicación. Tiene que ser una estrategia.** + +CTA principal: + +**Empezar diagnóstico** + +CTA secundario: + +**Hablar con Amor y Roma** + +* * * + +9. PÁGINA SERVICIOS + =================== + +Esta será una de las páginas **más importantes del sitio**. + +No debe ser simplemente un listado. + +Debe explicar **qué problema resuelve cada solución**. + +* * * + +Hero +---- + +### Título + +**Soluciones digitales diseñadas para hacer crecer tu marca.** + +Texto introductorio. + +CTA: + +**Encontrá tu solución** + +* * * + +Bloque 01 — Selector de necesidades +----------------------------------- + +Antes de presentar servicios: + +> ¿Qué necesita hoy tu negocio? + +Opciones: + +* Construir una marca. + +* Mejorar mi presencia digital. + +* Generar contenido. + +* Crear una web. + +* Conseguir clientes. + +* Automatizar procesos. + +* Escalar campañas. + +Esto puede alimentar el diagnóstico. + +* * * + +Bloque 02 — Branding & Identidad +-------------------------------- + +Contenido: + +* diagnóstico de marca; + +* propuesta de valor; + +* personalidad; + +* identidad visual; + +* logotipo; + +* sistema cromático; + +* tipografía; + +* personajes/mascotas; + +* manual de identidad; + +* plantillas. + +El manual define este servicio como construcción de la esencia visual y conceptual de la marca. + +CTA: + +**Construir mi marca** + +* * * + +Bloque 03 — Redes Sociales & Contenido +-------------------------------------- + +Mostrar: + +* estrategia; + +* contenido; + +* copywriting; + +* dirección de arte; + +* Reels/TikTok; + +* historias; + +* moderación; + +* reporting; + +* automatizaciones; + +* Paid Media según plan. + +CTA: + +**Ver planes** + +* * * + +Bloque 04 — Desarrollo Web +-------------------------- + +Subbloques: + +### Landing Pages + +Para campañas y lanzamientos. + +### Sitios corporativos + +Para empresas y organizaciones B2B. + +### Catálogos / E-commerce + +Para comercialización digital. + +Además: + +* Mobile First; + +* velocidad; + +* SEO técnico; + +* analítica; + +* Meta Pixel; + +* WhatsApp API. + +Todo esto está contemplado explícitamente en el manual. + +CTA: + +**Quiero una web** + +* * * + +Bloque 05 — Automatizaciones +---------------------------- + +Mostrar: + +**Interacción → Cualificación → Lead → Notificación → Seguimiento** + +Con: + +* Instagram; + +* Facebook; + +* WhatsApp; + +* captación; + +* cualificación; + +* notificaciones. + +CTA: + +**Automatizar mi negocio** + +* * * + +Bloque 06 — Paid Media +---------------------- + +Mostrar: + +* auditoría; + +* Business Manager; + +* conversiones; + +* públicos; + +* creatividades; + +* A/B testing; + +* CPA/CPL; + +* optimización. + +CTA: + +**Quiero generar más oportunidades** + +* * * + +Bloque 07 — Soluciones combinadas +--------------------------------- + +Este bloque es **estratégicamente importante**. + +En vez de obligar al usuario a comprar servicios separados: + +### "Tu negocio puede necesitar más de una pieza." + +Ejemplos: + +**Marca + Redes** + +**Marca + Web + Redes** + +**Web + Redes** + +**Web + Automatización + Paid Media** + +Esto refleja especialmente los arquetipos híbridos 3 y 4 del documento. + +CTA: + +**Descubrir qué combinación necesito** + +→ Diagnóstico + +* * * + +10. PÁGINA PLANES + ================= + +Hero +---- + +**Elegí el nivel de crecimiento que necesita tu negocio.** + +* * * + +Bloque 01 — Introducción +------------------------ + +Explicar que existen cuatro niveles de acompañamiento: + +* Esencial + +* Impulso + +* Premium + +* Élite + +* * * + +Bloque 02 — Comparador +---------------------- + +Tabla visual: + +| | Esencial | Impulso | Premium | Élite | +| -------------- | -------- | ---------- | ----------- | ----------- | +| Perfil | Inicial | Validación | Tracción | Consolidado | +| Contenido | ✓ | ✓ | ✓ | ✓ | +| Copy | Básico | Persuasivo | Avanzado | Estratégico | +| Automatización | Básica | Media | Leads | Avanzada | +| Ads | — | Básico | Conversión | Embudo | +| Reportes | Básico | Análisis | Estratégico | Ejecutivo | + +Basado en las prestaciones del documento interno. + +* * * + +Bloque 03 — Precio +------------------ + +Cada plan: + +**Desde $XXX / mes** + +Esto permite utilizar el enfoque que elegiste: **precios "desde"**. + +* * * + +Bloque 04 — ¿Cuál es para mí? +----------------------------- + +Un pequeño árbol de decisión: + +> Estoy empezando → Esencial +> +> Necesito crecer → Impulso +> +> Ya tengo tracción → Premium +> +> Necesito una estrategia integral → Élite + +* * * + +Bloque 05 — CTA +--------------- + +**No sé qué plan elegir** + +→ Diagnóstico + +**Quiero contratar** + +→ Contacto / WhatsApp + +* * * + +11. PÁGINA PORTFOLIO + ==================== + +El portfolio debería ser **una herramienta comercial**, no una galería. +Hero +---- + +**No mostramos trabajos. Mostramos lo que podemos construir.** + +* * * + +Bloque 01 — Filtros +------------------- + +Por: + +* Branding + +* Redes + +* Web + +* Automatización + +* Paid Media + +* Soluciones integrales + +* * * + +Bloque 02 — Casos +----------------- + +### Caso 01 + +**Identidad Integral** + +Branding + personaje + RRSS + campañas. + +### Caso 02 + +**Infraestructura Institucional** + +Web corporativa + credibilidad B2B. + +### Caso 03 + +**Ecosistema Digital** + +Branding + Web + RRSS. + +### Caso 04 + +**Profesionalización** + +Web + RRSS para firma de servicios. + +Son los cuatro arquetipos estratégicos definidos en el documento. + +* * * + +12. Página individual de Case Study + =================================== + +Aunque no necesariamente aparece en el menú, recomiendo crear esta estructura: + /portfolio/caso-nombre +Bloques +------- + +1. Hero visual + +2. Contexto del cliente + +3. Problema + +4. Objetivos + +5. Estrategia + +6. Solución + +7. Producción + +8. Implementación + +9. Resultado + +10. Galería + +11. Servicios utilizados + +12. CTA + +### CTA final + +**¿Tu negocio necesita algo parecido?** + +→ Diagnóstico + +Esto transforma el portfolio en una herramienta de generación de leads. + +* * * + +13. PÁGINA NOSOTROS + =================== + +Esta página debería ser una de las piezas más diferenciales. +Hero +---- + +**Somos Amor y Roma.** + +Subtítulo: + +**Pasión para crear. Estructura para construir.** + +* * * + +Bloque 01 — La dualidad +----------------------- + +### AMOR + +Arte +Creatividad +Empatía +Dirección visual +Narrativa + +### ROMA + +Estrategia +Arquitectura +Procesos +Tecnología +Estructura + +La dualidad está explícitamente planteada como fundamento de la marca. + +* * * + +Bloque 02 — Qué significa ser Boutique +-------------------------------------- + +Tres pilares: + +**Sin plantillas prefabricadas** + +**Capacidad controlada** + +**Foco visual y de contenido** + +Estos son los tres principios definidos en el posicionamiento boutique. + +* * * + +Bloque 03 — Nuestra forma de pensar +----------------------------------- + +Tres conceptos: + +**Cercanos** + +**Apasionados** + +**Estratégicos** + +Basado en el tono de voz establecido en el manual. + +* * * + +Bloque 04 — Qué nos diferencia +------------------------------ + +No vender: + +> "Somos creativos." + +Sino: + +> **Cada decisión creativa tiene una razón de negocio detrás.** + +* * * + +Bloque 05 — CTA +--------------- + +**Conocé qué podemos construir juntos** + +→ Servicios / Diagnóstico + +* * * + +14. PÁGINA MÉTODO + ================= + +Esta página sirve para reducir incertidumbre y aumentar confianza. +Hero +---- + +**No empezamos diseñando. Empezamos entendiendo.** + +* * * + +Bloque 01 — Las cinco etapas +---------------------------- + +### 01 — Diagnóstico + +Entender negocio, marca, objetivos y contexto. + +### 02 — Estrategia + +Definir arquitectura, pilares y dirección. + +### 03 — Producción + +Crear las piezas, contenidos o desarrollos. + +### 04 — Validación + +Control de calidad y aprobación. + +### 05 — Medición + +Analizar resultados y ajustar. + +La secuencia corresponde al workflow definido internamente. + +* * * + +Bloque 02 — Aplicación según servicio +------------------------------------- + +Mostrar cómo cambia el proceso para: + +* Branding + +* Web + +* Redes + +* Automatización + +* Paid Media + +* * * + +Bloque 03 — Control de calidad +------------------------------ + +Explicar brevemente: + +* revisión interna; + +* aprobación; + +* feedback; + +* estándares; + +* optimización. + +* * * + +CTA +--- + +**Quiero comenzar mi diagnóstico** + +* * * + +15. PÁGINA DIAGNÓSTICO + ====================== + +Esta es la **pieza de conversión avanzada** del sitio. + +No debería sentirse como un formulario de contacto. + +Debe sentirse como una **herramienta de orientación estratégica**. +Paso 01 +------- + +**¿Qué estás buscando resolver?** + +* Marca + +* Redes + +* Web + +* Clientes + +* Automatización + +* Publicidad + +* Varias cosas + +* * * + +Paso 02 +------- + +**¿En qué etapa está tu negocio?** + +* Estoy empezando + +* Ya estoy vendiendo + +* Estoy creciendo + +* Estoy consolidado + +* * * + +Paso 03 +------- + +**¿Qué problema te preocupa más?** + +Preguntas dinámicas según las respuestas anteriores. + +* * * + +Paso 04 +------- + +**¿Qué querés conseguir?** + +Objetivo comercial. + +* * * + +Paso 05 +------- + +**Resultado** + +El sistema podría recomendar: + +> **Por lo que nos contás, probablemente necesites:** +> +> Branding + Web + Redes + +o: + +> **Tu perfil parece encajar con el Plan Premium.** + +No debe ser presentado como diagnóstico definitivo, sino como orientación inicial. + +* * * + +Paso 06 — Captura +----------------- + +Nombre +Empresa +Email +WhatsApp + +### CTA + +**Quiero hablar con Amor y Roma** + +* * * + +16. PÁGINA CONTACTO + =================== + +Debe ser mucho más simple que el Diagnóstico. +Hero +---- + +**Hablemos de tu próximo proyecto.** + +* * * + +Bloque 01 — Formulario +---------------------- + +* Nombre + +* Empresa + +* Email + +* WhatsApp + +* Servicio de interés + +* Mensaje + +* * * + +Bloque 02 — WhatsApp +-------------------- + +**¿Preferís hablar directamente?** + +CTA: + +**Escribir por WhatsApp** + +* * * + +Bloque 03 — Qué ocurre después +------------------------------ + +Esto es importante para reducir fricción: + +**01** Recibimos tu consulta +↓ +**02** Entendemos tu necesidad +↓ +**03** Evaluamos la mejor solución +↓ +**04** Coordinamos una conversación + +* * * + +17. Footer + ========== + +El footer debería contener: + +### Marca + +Amor y Roma + +**Marcas con esencia, construidas con estrategia.** + +### Navegación + +* Inicio + +* Servicios + +* Planes + +* Portfolio + +* Nosotros + +* Método + +* Diagnóstico + +* Contacto + +### Servicios + +* Branding + +* Redes + +* Web + +* Automatizaciones + +* Paid Media + +### CTA + +**Empezar diagnóstico** + +### Legal + +* Política de privacidad + +* Términos y condiciones + +* Cookies + +* * * + +18. Jerarquía comercial + ======================= + +La arquitectura completa quedaría así: + HOME + │ + ┌─────────────┼──────────────┐ + ↓ ↓ ↓ + SERVICIOS PORTFOLIO NOSOTROS + │ │ │ + ↓ ↓ ↓ + SOLUCIONES CASOS DIFERENCIAL + │ │ │ + └─────────────┼──────────────┘ + ↓ + MÉTODO + │ + ↓ + CONFIANZA + │ + ┌───────────┴───────────┐ + ↓ ↓ + PLANES DIAGNÓSTICO + │ │ + └───────────┬───────────┘ + ↓ + CONTACTO + │ + ↓ + WHATSAPP + +* * * + +19. Recorridos principales del usuario + ====================================== + +No todos los usuarios deberían recorrer el sitio de la misma manera. + +### Recorrido A — Usuario que sabe qué necesita + + Google / Ads + ↓ + Servicio específico + ↓ + Portfolio relacionado + ↓ + Caso de éxito + ↓ + CTA + ↓ + Contacto + +* * * + +### Recorrido B — Usuario que no sabe qué necesita + + Home + ↓ + Problema + ↓ + Diagnóstico + ↓ + Recomendación + ↓ + Servicio / Plan + ↓ + Contacto + +**Este debería ser uno de los recorridos prioritarios.** + +* * * + +### Recorrido C — Usuario interesado en redes + + Home + ↓ + Servicios + ↓ + Redes Sociales + ↓ + Planes + ↓ + Comparación + ↓ + "¿Cuál necesito?" + ↓ + Diagnóstico + ↓ + Contacto + +* * * + +### Recorrido D — Empresa interesada en una solución integral + + Home + ↓ + Servicios + ↓ + Soluciones combinadas + ↓ + Portfolio + ↓ + Caso de éxito + ↓ + Método + ↓ + Diagnóstico + ↓ + Contacto + +* * * + +### Recorrido E — Usuario que busca confianza + + Home + ↓ + Nosotros + ↓ + Amor + Roma + ↓ + Boutique + ↓ + Método + ↓ + Portfolio + ↓ + Contacto + +* * * + +20. Arquitectura final recomendada + ================================== + +La versión final del sitemap sería: + AMOR Y ROMA + │ + ├── HOME + │ + ├── SERVICIOS + │ ├── Branding & Identidad + │ ├── Redes Sociales & Contenido + │ ├── Desarrollo Web + │ ├── Automatizaciones + │ ├── Paid Media + │ └── Soluciones Integrales + │ + ├── PLANES + │ ├── Esencial + │ ├── Impulso + │ ├── Premium + │ └── Élite + │ + ├── PORTFOLIO + │ ├── Caso 01 — Identidad Integral + │ ├── Caso 02 — Infraestructura Institucional + │ ├── Caso 03 — Ecosistema Digital + │ └── Caso 04 — Profesionalización + │ + ├── NOSOTROS + │ ├── Amor + │ ├── Roma + │ ├── Filosofía Boutique + │ └── Diferenciales + │ + ├── MÉTODO + │ ├── Diagnóstico + │ ├── Estrategia + │ ├── Producción + │ ├── Validación + │ └── Medición + │ + ├── DIAGNÓSTICO + │ ├── Necesidad + │ ├── Madurez + │ ├── Objetivos + │ ├── Recomendación + │ └── Captación + │ + └── CONTACTO + ├── Formulario + ├── WhatsApp + └── Próximos pasos +La decisión estratégica más importante +-------------------------------------- + +Yo estructuraría el sitio alrededor de **tres puertas de entrada**, en lugar de hacer que todo dependa del menú: + +### **¿QUÉ NECESITÁS?** + +→ Servicios + +### **¿QUÉ PODEMOS HACER?** + +→ Portfolio + +### **¿NO SABÉS QUÉ NECESITÁS?** + +→ Diagnóstico + +Y por encima de todo: + +> **Marcas con esencia, construidas con estrategia.** + +Eso permite que Amor y Roma no se perciba como una agencia que simplemente vende _"redes, páginas web y publicidad"_, sino como una agencia que **diagnostica, diseña y construye soluciones digitales a medida**, que es mucho más coherente con el posicionamiento boutique definido en el documento. + +**Siguiente etapa recomendada:** convertir este sitemap en un **wireframe estructural página por página**, definiendo para cada bloque: jerarquía visual, tipo de contenido, componentes UI, ubicación de CTAs, elementos interactivos y recorrido de conversión, todavía sin entrar en HTML/CSS/JS. diff --git a/Wireframe Conceptual.md b/Wireframe Conceptual.md new file mode 100644 index 0000000..5fbb43c --- /dev/null +++ b/Wireframe Conceptual.md @@ -0,0 +1,1176 @@ +Wireframe conceptual — Amor y Roma +================================== + +0. Principio rector de la experiencia + +------------------------------------- + +La web debería combinar tres capas: + +**AMOR** +Dirección de arte · creatividad · estética · emoción + +**ROMA** +Estrategia · estructura · tecnología · conversión + +**EXPERIENCIA** +Una navegación visualmente atractiva, pero diseñada para llevar al usuario hacia una decisión. + +La frase que puede funcionar como concepto transversal es: + +> **De la esencia a la estructura.** + +Esto conecta directamente la filosofía de marca con el método de trabajo. + +* * * + +1. HOME + ======= + +1.1 — Hero +---------- + +### Objetivo + +Explicar en pocos segundos qué hace Amor y Roma y generar una primera impresión diferencial. + +### Composición + +**Zona izquierda / central** + +> **Creatividad, estrategia y tecnología para construir marcas que importan.** + +Debajo: + +Breve descripción de la agencia como agencia boutique de marketing digital. + +### CTA principal + +**Empecemos →** + +Destino: + +`/servicios` + +### Elemento visual + +Acá propondría convertir la dualidad Amor/Roma en el primer elemento visual distintivo. + +Un **campo de humo/partículas orgánicas** que reaccione al movimiento del cursor. + +El humo: + +* se desplaza con el cursor; + +* genera pequeñas turbulencias; + +* pasa **por detrás del contenido textual**; + +* no interfiere con la legibilidad; + +* puede reaccionar con mayor intensidad cerca del puntero; + +* debe sentirse sofisticado, no como un efecto "tech" genérico. + +Esto puede convertirse en uno de los elementos visuales distintivos de la marca. + +* * * + +2. AMOR + ROMA + ============== + +2.1 — Dualidad +-------------- + +### Presentación + + AMOR ROMA + + Pasión Construcción + Arte Estrategia + Creatividad Arquitectura + Identidad Tecnología + Dirección de arte Procesos + +Visualmente, los dos mundos deberían coexistir. + +La transición entre ambos puede utilizar el mismo lenguaje orgánico del humo del Hero. + +### Mensaje central + +> **Creamos marcas con esencia y las construimos con estrategia.** + +Este concepto está perfectamente alineado con la filosofía definida internamente. + +* * * + +3. PROBLEMAS QUE RESOLVEMOS + =========================== + +Como decidiste un tono más institucional, evitaría el clásico: + +> "¿Tenés este problema?" + +La sección debería presentarse como: + +### **Desafíos que ayudamos a resolver** + +Tres grandes bloques. + +### 01 — Identidad + +> Marcas que necesitan definir, ordenar o evolucionar su identidad para reflejar realmente el valor de su negocio. + +### 02 — Presencia + +> Negocios que necesitan transformar su presencia digital en una experiencia coherente, profesional y estratégica. + +### 03 — Crecimiento + +> Empresas que necesitan generar oportunidades, automatizar procesos y convertir mejor su presencia digital. + +### CTA de cada bloque + +**Encontrar mi solución** + +→ Diagnóstico + +Así evitamos que el usuario tenga que decidir qué servicio comprar. + +* * * + +4. SERVICIOS DESTACADOS + ======================= + +4.1 — Introducción +------------------ + +> **Un ecosistema de soluciones. Una estrategia construida alrededor de tu negocio.** + +Luego aparecen cinco tarjetas. + +* * * + +4.2 — Tarjetas +-------------- + +### BRANDING + +**Identidad · Estrategia · Logo · Sistema visual · Manual** + +* * * + +### REDES SOCIALES + +**Estrategia · Contenido · Copywriting · Dirección de arte · Comunidad** + +* * * + +### DESARROLLO WEB + +**Arquitectura · UX · Desarrollo · SEO · Analítica** + +* * * + +### AUTOMATIZACIONES + +**Conversación · Captación · Cualificación · Seguimiento** + +* * * + +### PAID MEDIA + +**Campañas · Creatividades · Audiencias · Optimización** + +Los contenidos de estas tarjetas se desprenden del portafolio de servicios definido en el documento. + +* * * + +4.3 — Interacción +----------------- + +Cada tarjeta puede tener: + +**Estado normal** + +* imagen/visual; + +* nombre; + +* descripción breve. + +**Hover** + +* desplazamiento; + +* aparición de información adicional; + +* cambio de composición; + +* CTA. + +**Click** + +→ abre el bloque correspondiente de `/servicios` y dispara el contexto correspondiente del diagnóstico. + +* * * + +5. PLANES + ========= + +5.1 — Introducción +------------------ + +> **Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.** + +* * * + +5.2 — Cards interactivas +------------------------ + + ┌───────────┐ ┌───────────┐ ┌────────────┐ ┌───────────┐ + │ ESENCIAL │ │ IMPULSO │ │ PREMIUM │ │ ÉLITE │ + │ │ │ │ │ ★ │ │ │ + │ Desde... │ │ Desde... │ │ Desde... │ │ Desde... │ + └───────────┘ └───────────┘ └────────────┘ └───────────┘ + +**Premium** tendría un destaque leve, no agresivo. + +* * * + +5.3 — Expansión +--------------- + +Al hacer click en una tarjeta: + +**Se despliega** mostrando: + +* perfil; + +* objetivo; + +* contenido mensual; + +* copywriting; + +* automatizaciones; + +* Paid Media; + +* gestión/moderación; + +* reportes; + +* precio desde; + +* CTA. + +Los cuatro niveles y sus prestaciones están definidos en el documento interno. + +### CTA + +**Quiero este plan** + +→ contacto con el plan seleccionado. + +### CTA secundario + +**No sé cuál elegir** + +→ Diagnóstico. + +* * * + +6. PORTFOLIO + ============ + +6.1 — Introducción +------------------ + +> **Proyectos que combinan identidad, estrategia y estructura.** + +No sería simplemente una galería. + +* * * + +6.2 — Filtros +------------- + + Todos + Branding + Redes + Web + Automatización + Paid Media + Integral + +* * * + +6.3 — Casos +----------- + +Inicialmente utilizaríamos los arquetipos del documento: + +**Identidad Integral** + +Branding + personaje + RRSS. + +**Infraestructura Institucional** + +Web corporativa + credibilidad B2B. + +**Ecosistema Digital** + +Branding + Web + RRSS. + +**Profesionalización** + +Web + RRSS. + +Esto permite mostrar capacidad sin depender todavía de métricas comerciales. + +* * * + +6.4 — Interacción +----------------- + +Al hacer click: + +**Modal / Case Preview** + +Mostrar: + +* imagen; + +* nombre; + +* contexto; + +* problema; + +* solución; + +* servicios involucrados. + +CTA: + +**Ver proyecto** + +→ eventualmente página individual del caso. + +* * * + +7. MÉTODO + ========= + +7.1 — Hero +---------- + +> **De la esencia a la estructura.** + +Subtexto: + +> Cada proyecto comienza entendiendo el negocio y termina midiendo lo que construimos. + +* * * + +7.2 — Timeline horizontal +------------------------- + + 01 02 03 04 05 + DIAGNÓSTICO → ESTRATEGIA → PRODUCCIÓN → VALIDACIÓN → MEDICIÓN + +La estructura corresponde a las cinco fases operativas del manual. + +* * * + +7.3 — Descripción breve +----------------------- + +### 01 — Diagnóstico + +**Briefing** + +> Hablamos de tu proyecto, contexto y objetivos. + +### 02 — Estrategia + +**Arquitectura** + +> Definimos pilares, estructura y dirección. + +### 03 — Producción + +**Creación** + +> Convertimos la estrategia en piezas, contenidos y experiencias. + +### 04 — Validación + +**Control** + +> Revisamos, presentamos y ajustamos. + +### 05 — Medición + +**Evolución** + +> Analizamos resultados y definimos próximos pasos. + +* * * + +7.4 — Aplicación por servicio +----------------------------- + +Selector: + +**Branding | Web | Redes | Automatización | Paid Media** + +Al seleccionar uno, la representación del método cambia para explicar brevemente cómo se aplica en ese servicio. + +* * * + +7.5 — Confianza +--------------- + +Bloque breve con: + +* proceso estructurado; + +* validaciones; + +* participación del cliente; + +* control de calidad; + +* personalización. + +No convertirlo en una sección extensa. + +* * * + +8. CTA FINAL + ============ + +8.1 — Cierre +------------ + +Visualmente integrado al sitio, pero claramente destacado. + +### Mensaje + +> **¿Hablamos de tu proyecto?** + +Subtexto: + +> Contanos qué estás construyendo y descubramos juntos cuál es el próximo paso. + +### CTA + +**Empezar diagnóstico** + +→ `/diagnostico` + +El diagnóstico será el principal mecanismo de conversión asistida. + +* * * + +9. SERVICIOS + ============ + +Esta página será mucho más profunda que el resumen de Home. +Hero + +---- + +> **Soluciones digitales diseñadas alrededor de tu negocio.** + +* * * + +9.1 — Selector inicial +---------------------- + +### ¿Qué querés conseguir? + + Construir mi marca + ↓ + Branding + + Mejorar mi presencia + ↓ + Redes + + Crear una experiencia digital + ↓ + Web + + Automatizar oportunidades + ↓ + Automatización + + Generar demanda + ↓ + Paid Media + +El usuario puede elegir una opción o ir al diagnóstico. + +* * * + +10. Bloques de cada servicio + ============================ + +Cada servicio seguirá exactamente la estructura que definiste: + +### PROBLEMA + +Qué situación aborda. + +### SOLUCIÓN + +Qué hace Amor y Roma. + +### QUÉ INCLUYE + +Entregables y alcance. + +### CÓMO TRABAJAMOS + +Aplicación del Método A&R. + +### CTA + +Acción correspondiente. + +* * * + +Branding +-------- + +**Problema** + +Una marca sin identidad clara o cuya identidad ya no representa su negocio. + +**Solución** + +Construcción o evolución integral de la identidad. + +**Incluye** + +* estrategia; + +* propuesta de valor; + +* identidad; + +* logotipo; + +* sistema visual; + +* tipografía; + +* personajes; + +* manual; + +* plantillas. + +**CTA** + +**Quiero construir mi marca** + +* * * + +Redes Sociales +-------------- + +**Problema** + +Presencia digital sin estrategia, coherencia o continuidad. + +**Solución** + +Sistema de contenido y gestión adaptado al nivel de madurez del negocio. + +**Incluye** + +* estrategia; + +* contenido; + +* copywriting; + +* dirección de arte; + +* Reels; + +* historias; + +* moderación; + +* reportes; + +* automatización; + +* Ads según plan. + +**CTA** + +**Ver planes** + +* * * + +Desarrollo Web +-------------- + +**Problema** + +Una presencia digital que no representa al negocio o no acompaña el proceso comercial. + +**Solución** + +Desarrollo web a medida orientado a experiencia y conversión. + +**Incluye** + +* Landing Pages; + +* sitios corporativos; + +* catálogos; + +* e-commerce; + +* Mobile First; + +* SEO; + +* analítica; + +* integraciones. + +El manual plantea explícitamente estas modalidades y estándares técnicos. + +**CTA** + +**Quiero una web** + +* * * + +Automatizaciones +---------------- + +**Problema** + +Oportunidades perdidas por procesos manuales o falta de seguimiento. + +**Solución** + +Automatización de conversaciones y cualificación. + +**Incluye** + +* respuestas; + +* captación; + +* cualificación; + +* notificaciones; + +* derivación comercial. + +**CTA** + +**Quiero automatizar** + +* * * + +Paid Media +---------- + +**Problema** + +Necesidad de amplificar campañas y generar oportunidades. + +**Solución** + +Estrategia, configuración, creatividad y optimización. + +**Incluye** + +* auditoría; + +* públicos; + +* conversiones; + +* creatividades; + +* testing; + +* optimización. + +**CTA** + +**Quiero generar oportunidades** + +* * * + +11. SOLUCIONES INTEGRALES + ========================= + +Esta sección debería sentirse diferente. + +### Título + +> **Las marcas no crecen por piezas aisladas.** + +Subtexto: + +> A veces la solución está en conectar varias disciplinas. + +Mostrar composiciones: + BRANDING + + + REDES + BRANDING + + + WEB + + + REDES + + WEB + + + AUTOMATIZACIÓN + + + PAID MEDIA + + ECOSISTEMA DIGITAL + +Esto conecta directamente con los casos híbridos identificados en el manual. + +### CTA + +**Encontrar mi combinación** + +→ Diagnóstico. + +* * * + +12. DIAGNÓSTICO + =============== + +Este será un **microproducto digital dentro del sitio**. + +Máximo **5 preguntas**. +Pregunta 1 + +---------- + +**¿Qué necesitás resolver?** + +* Marca + +* Presencia digital + +* Contenido + +* Web + +* Captación + +* Automatización + +* Varias cosas + +* * * + +Pregunta 2 +---------- + +**¿En qué etapa está tu negocio?** + +* Comenzando + +* Validando + +* Creciendo + +* Consolidado + +* * * + +Pregunta 3 +---------- + +**¿Cuál es hoy tu principal desafío?** + +Las opciones pueden cambiar dependiendo de la respuesta anterior. + +* * * + +Pregunta 4 +---------- + +**¿Qué querés conseguir?** + +Objetivo principal. + +* * * + +Pregunta 5 +---------- + +**¿Qué tan desarrollada está actualmente tu presencia digital?** + +Esto permite contextualizar la recomendación. + +* * * + +13. Resultado del diagnóstico + ============================= + +No será un informe extenso. + +Será una tarjeta: + +> ### Nuestra recomendación +> +> Por las características de tu negocio, creemos que actualmente deberías priorizar **[solución]**. +> +> **Situación actual:** breve descripción. +> +> **Próximo paso recomendado:** [servicio/plan]. + +Luego: + +### **Hablemos de tu proyecto** + +→ Contacto + +Y una alternativa: + +**Volver a revisar** + +* * * + +14. PLANES + DIAGNÓSTICO + ======================== + +Hay una integración particularmente interesante. + +Si el usuario llega al diagnóstico desde: + +**Premium → Diagnóstico** + +el sistema ya sabe que estaba considerando Premium. + +Si llega desde: + +**Redes → Diagnóstico** + +el sistema sabe que su interés inicial eran redes. + +Por lo tanto, el diagnóstico puede utilizar ese contexto sin volver a preguntárselo. + +Esto permite que el diagnóstico sea corto y mantenga el límite de cinco preguntas. + +* * * + +15. NOSOTROS + ============ + +Hero +---- + +> **Amor y Roma. Dos fuerzas. Una forma de construir.** + +* * * + +15.1 — Amor +----------- + +Visualmente más orgánico. + +**Pasión** +**Arte** +**Creatividad** +**Identidad** +**Empatía** + +* * * + +15.2 — Roma +----------- + +Visualmente más estructurado. + +**Estrategia** +**Arquitectura** +**Procesos** +**Tecnología** +**Estructura** + +* * * + +15.3 — Unión +------------ + +Las dos partes convergen: + +> **La creatividad da esencia. La estrategia construye el camino.** + +* * * + +15.4 — Boutique +--------------- + +Tres pilares: + +### Sin plantillas prefabricadas + +Cada proyecto se construye a medida. + +### Capacidad controlada + +Priorizamos profundidad sobre volumen. + +### Foco visual y de contenido + +La calidad creativa es parte central del diferencial. + +Estos tres principios están establecidos en el posicionamiento interno. + +* * * + +15.5 — Personas +--------------- + +Como elegiste mostrar al equipo de forma secundaria: + +* fotografía; + +* nombre; + +* rol; + +* breve descripción. + +Sin convertir Nosotros en una página de currículums. + +* * * + +16. CONTACTO + ============ + +Hero +---- + +> **¿Hablamos de tu proyecto?** + +* * * + +Formulario +---------- + +### Motivo de contacto + +Dropdown: + +* Quiero conocer los servicios + +* Quiero una valoración / diagnóstico + +* Quiero solicitar presupuesto + +* Quiero contratar un plan + +* Quiero consultar por desarrollo web + +* Otro + +Luego: + +* Nombre + +* Empresa + +* Email + +* WhatsApp + +* Mensaje + +* * * + +WhatsApp +-------- + +Bloque alternativo: + +> **¿Preferís hablar directamente?** + +**Escribir por WhatsApp** + +* * * + +Redes +----- + +**También podés encontrarnos en:** + +Instagram +Facebook +LinkedIn + +* * * + +Confirmación +------------ + +Después del envío: + +> **Recibimos tu mensaje.** +> +> Gracias por contactarte con Amor y Roma. En breve nos pondremos en contacto para continuar la conversación. + +* * * + +17. FOOTER GLOBAL + ================= + +El footer será pequeño pero con personalidad. + +### Primera zona + +**AMOR Y ROMA** + +> Marcas con esencia, construidas con estrategia. + +### Navegación + +Servicios +Planes +Portfolio +Nosotros +Método +Diagnóstico +Contacto + +### Servicios + +Branding +Redes +Web +Automatizaciones +Paid Media + +### CTA + +> **¿Tenés una idea? Hagámosla realidad.** + +**Empezar diagnóstico** + +### Redes + +Instagram · Facebook · LinkedIn + +### Legal + +Privacidad · Términos · Cookies + +* * * + +18. ELEMENTO GLOBAL — WHATSAPP + ============================== + +Botón flotante permanente. + +No debería competir con el CTA principal. + +Jerarquía: + +**CTA de página → Diagnóstico** + +**CTA flotante → WhatsApp** + +Así mantenemos la estrategia que definiste: WhatsApp es un canal comercial importante, pero no el único camino de conversión. + +* * * + +19. Arquitectura de conversión + ============================== + +Finalmente, el sitio tendría tres niveles de CTA: + +### Nivel 1 — Descubrimiento + +**Empecemos** + +→ Servicios + +### Nivel 2 — Orientación + +**Encontrá tu solución** + +→ Diagnóstico + +### Nivel 3 — Conversión + +**Hablemos de tu proyecto** + +→ Contacto / WhatsApp + +Esto evita que cada sección termine con el mismo botón y permite que el CTA tenga relación con la etapa del usuario. + +* * * + +20. Experiencia global + ====================== + +El recorrido ideal sería: + HOME + │ + ┌───────────┼───────────┐ + ↓ ↓ ↓ + SERVICIOS PORTFOLIO NOSOTROS + │ │ │ + ↓ ↓ ↓ + SOLUCIONES CASOS FILOSOFÍA + │ │ │ + └──────────┼────────────┘ + ↓ + MÉTODO + │ + ↓ + CONFIANZA + │ + ┌───────┴───────┐ + ↓ ↓ + PLANES DIAGNÓSTICO + │ │ + └───────┬───────┘ + ↓ + CONTACTO + │ + ┌─────┴─────┐ + ↓ ↓ + FORMULARIO WHATSAPP + +### Conceptualmente: + +**AMOR** atrae. + +**ROMA** estructura. + +**SERVICIOS** explican. + +**PORTFOLIO** demuestra. + +**MÉTODO** genera confianza. + +**DIAGNÓSTICO** orienta. + +**CONTACTO** convierte. + +Y esa debería ser la lógica completa de la experiencia. diff --git a/contacto.html b/contacto.html new file mode 100644 index 0000000..8e264a2 --- /dev/null +++ b/contacto.html @@ -0,0 +1,187 @@ + + + + + +Contacto — Amor y Roma + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+ +
+
+

Contacto

+

Hablemos de tu próximo proyecto.

+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+

Recibimos tu mensaje.

+

Gracias por contactarte con Amor y Roma. En breve nos pondremos en contacto para continuar la conversación.

+
+
+ +
+
+

¿Preferís hablar directamente?

+ Escribir por WhatsApp +
+
+

También podés encontrarnos en

+ +

* Datos de contacto de prueba — reemplazar antes de publicar.

+
+
+

Qué ocurre después

+
    +
  1. 01 Recibimos tu consulta
    2. +
  2. 02 Entendemos tu necesidad
    3. +
  3. 03 Evaluamos la mejor solución
    4. +
  4. 04 Coordinamos una conversación
    5. +
+
+
+
+
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..6cccd34 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,564 @@ +/* ============================================================ + AMOR & ROMA — Design tokens & base styles + ============================================================ */ + +@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;1,400;1,600;1,700&family=Raleway:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600&family=WindSong&display=swap'); + +:root { + /* --- Brand palette (light theme default) --- */ + --c-teal-deep: #003f52; + --c-teal-web: #006d8f; + --c-magenta: #ba124d; + --c-plum: #221728; + --c-plum-2: #110916; + --c-mist: #eaf0ee; + --c-blush: #dfbdb9; + + /* --- Semantic tokens: LIGHT theme --- */ + --bg: var(--c-mist); + --bg-raised: #ffffff; + --bg-sunken: #dfe8e5; + --text: var(--c-plum-2); + --text-soft: #4b4453; + --text-inverse: var(--c-mist); + --accent-amor: var(--c-magenta); + --accent-roma: var(--c-teal-deep); + --accent-roma-bright: var(--c-teal-web); + --accent-blush: var(--c-blush); + --border: rgba(34, 23, 40, 0.14); + --border-strong: rgba(34, 23, 40, 0.28); + --shadow: 0 18px 40px -20px rgba(17, 9, 22, 0.35); + + /* --- Type --- */ + --font-display: 'Literata', Georgia, serif; + --font-body: 'Raleway', sans-serif; + --font-small: 'Jost', sans-serif; + --font-script: 'WindSong', cursive; + + --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem); + --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); + --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); + --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); + --step-3: clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem); + --step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem); + + --space-1: 0.5rem; + --space-2: 1rem; + --space-3: 1.5rem; + --space-4: 2.5rem; + --space-5: 4rem; + --space-6: 6.5rem; + + --radius-arch: 999px 999px 12px 12px; + --max-w: 1180px; + + color-scheme: light; +} + +html[data-theme="dark"] { + --bg: var(--c-plum-2); + --bg-raised: #1a0f21; + --bg-sunken: #0b0510; + --text: var(--c-mist); + --text-soft: #c9c2d6; + --text-inverse: var(--c-plum-2); + --accent-amor: #e0447a; + --accent-roma: var(--c-teal-web); + --accent-roma-bright: #3fb2d6; + --accent-blush: var(--c-blush); + --border: rgba(234, 240, 238, 0.14); + --border-strong: rgba(234, 240, 238, 0.28); + --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.6); + color-scheme: dark; +} + +/* ============================================================ + Reset + ============================================================ */ +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + background: var(--bg); + color: var(--text); + font-family: var(--font-body); + font-size: var(--step-0); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + transition: background 0.4s ease, color 0.4s ease; + overflow-x: hidden; +} +img { max-width: 100%; display: block; } +a { color: inherit; text-decoration: none; } +ul { list-style: none; margin: 0; padding: 0; } +button { font: inherit; cursor: pointer; } +input, select, textarea { font: inherit; } + +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.12; + margin: 0; + color: var(--text); +} +h1 { font-size: var(--step-4); font-style: italic; font-weight: 700; } +h2 { font-size: var(--step-3); font-style: italic; } +h3 { font-size: var(--step-2); } +h4 { font-size: var(--step-1); font-style: italic; } + +p { margin: 0; max-width: 62ch; } +p.lede { font-size: var(--step-1); color: var(--text-soft); max-width: 46ch; } + +.eyebrow { + font-family: var(--font-small); + font-size: var(--step--1); + color: var(--accent-amor); + letter-spacing: 0.02em; +} + +.container { + max-width: var(--max-w); + margin-inline: auto; + padding-inline: var(--space-3); +} +@media (min-width: 720px) { + .container { padding-inline: var(--space-4); } +} + +section { padding-block: var(--space-6); position: relative; } +.section-tight { padding-block: var(--space-5); } + +.stack { display: flex; flex-direction: column; } +.gap-1 { gap: var(--space-1); } +.gap-2 { gap: var(--space-2); } +.gap-3 { gap: var(--space-3); } +.gap-4 { gap: var(--space-4); } + +.grid { display: grid; gap: var(--space-3); } +@media (min-width: 860px) { + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: repeat(3, 1fr); } + .grid-4 { grid-template-columns: repeat(4, 1fr); } + .grid-5 { grid-template-columns: repeat(5, 1fr); } +} + +/* ============================================================ + Buttons + ============================================================ */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-family: var(--font-small); + font-size: var(--step--1); + font-weight: 500; + padding: 0.9rem 1.6rem; + border-radius: 999px; + border: 1px solid transparent; + transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; + white-space: nowrap; +} +.btn:hover { transform: translateY(-2px); } +.btn:focus-visible { outline: 3px solid var(--accent-roma-bright); outline-offset: 3px; } + +.btn-primary { + background: var(--accent-amor); + color: #fff; +} +.btn-primary:hover { background: color-mix(in srgb, var(--accent-amor) 85%, black); } + +.btn-secondary { + background: transparent; + color: var(--text); + border-color: var(--border-strong); +} +.btn-secondary:hover { border-color: var(--accent-roma-bright); color: var(--accent-roma-bright); } + +.btn-ghost { + background: transparent; + color: var(--accent-roma-bright); + padding-inline: 0.2rem; + border-radius: 0; +} +.btn-ghost::after { content: ''; display: block; height: 1px; background: currentColor; margin-top: 2px; opacity: 0.5; } + +/* ============================================================ + Header / Nav + ============================================================ */ +.site-header { + position: sticky; + top: 0; + z-index: 100; + background: color-mix(in srgb, var(--bg) 88%, transparent); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); +} +.nav-row { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: var(--space-2); +} +.logo-mark { display: flex; align-items: center; gap: 0.6rem; } +.logo-mark svg { height: 34px; width: auto; } +.logo-mark .wordmark { + font-family: var(--font-display); + font-style: italic; + font-weight: 700; + font-size: 1.25rem; + color: var(--text); +} + +.nav-links { + display: none; + align-items: center; + gap: var(--space-3); + font-family: var(--font-small); + font-size: var(--step--1); +} +.nav-links a { position: relative; padding-block: 4px; } +.nav-links a::after { + content: ''; + position: absolute; left: 0; right: 0; bottom: 0; + height: 2px; background: var(--accent-amor); + transform: scaleX(0); transform-origin: left; + transition: transform 0.25s ease; +} +.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } +.nav-links a[aria-current="page"] { color: var(--accent-amor); } + +@media (min-width: 980px) { + .nav-links { display: flex; } + .nav-toggle { display: none; } +} + +.nav-actions { display: flex; align-items: center; gap: var(--space-2); } + +.theme-toggle { + width: 42px; height: 42px; border-radius: 50%; + border: 1px solid var(--border-strong); + background: var(--bg-raised); + display: grid; place-items: center; + color: var(--text); +} +.theme-toggle svg { width: 18px; height: 18px; } +.theme-toggle .icon-moon { display: none; } +html[data-theme="dark"] .theme-toggle .icon-sun { display: none; } +html[data-theme="dark"] .theme-toggle .icon-moon { display: block; } + +.nav-toggle { + width: 42px; height: 42px; border-radius: 50%; + border: 1px solid var(--border-strong); + background: transparent; color: var(--text); + display: grid; place-items: center; +} + +.mobile-menu { + display: none; + flex-direction: column; + gap: var(--space-2); + padding: var(--space-3); + border-top: 1px solid var(--border); + font-family: var(--font-small); +} +.mobile-menu.open { display: flex; } +@media (min-width: 980px) { .mobile-menu { display: none !important; } } + +/* ============================================================ + Arch motif — recurring structural device + ============================================================ */ +.arch-frame { + position: relative; + border-radius: var(--radius-arch); + overflow: hidden; + border: 1px solid var(--border); +} +.arch-divider { + width: 100%; + height: auto; + display: block; + color: var(--accent-roma); +} + +/* ============================================================ + Cards + ============================================================ */ +.card { + background: var(--bg-raised); + border: 1px solid var(--border); + border-radius: var(--radius-arch); + padding: var(--space-3); +} + +.service-card { + background: var(--bg-raised); + border: 1px solid var(--border); + border-radius: 28px 28px 14px 14px; + padding: var(--space-3); + display: flex; + flex-direction: column; + gap: var(--space-2); + transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; +} +.service-card:hover { + transform: translateY(-6px); + box-shadow: var(--shadow); + border-color: var(--accent-roma-bright); +} +.service-card .index { font-family: var(--font-small); color: var(--accent-amor); font-size: var(--step--1); } +.service-card ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-family: var(--font-small); font-size: var(--step--1); color: var(--text-soft); } +.service-card ul li::after { content: '·'; margin-left: 0.6rem; color: var(--border-strong); } +.service-card ul li:last-child::after { content: ''; } + +/* ============================================================ + Footer + ============================================================ */ +.site-footer { + background: var(--c-plum-2); + color: var(--c-mist); + padding-block: var(--space-5) var(--space-3); +} +.site-footer a:hover { color: var(--accent-roma-bright); } +.site-footer .foot-grid { + display: grid; + gap: var(--space-4); + grid-template-columns: 1fr; +} +@media (min-width: 780px) { + .site-footer .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } +} +.site-footer h5 { + font-family: var(--font-small); + font-size: var(--step--1); + color: var(--accent-blush); + margin: 0 0 var(--space-2); + font-weight: 500; +} +.site-footer ul { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--step--1); color: #d8d0e0; } +.foot-bottom { + margin-top: var(--space-5); + padding-top: var(--space-2); + border-top: 1px solid rgba(234,240,238,0.14); + display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); + font-family: var(--font-small); font-size: 0.8rem; color: #a99fb8; +} + +/* ============================================================ + Floating WhatsApp + ============================================================ */ +.whatsapp-float { + position: fixed; + right: var(--space-3); + bottom: var(--space-3); + z-index: 90; + width: 58px; height: 58px; + border-radius: 50%; + background: #1f9e57; + color: #fff; + display: grid; place-items: center; + box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45); + transition: transform 0.25s ease; +} +.whatsapp-float:hover { transform: scale(1.08); } +.whatsapp-float svg { width: 28px; height: 28px; } + +/* ============================================================ + Hero canvas + ============================================================ */ +.hero { + position: relative; + padding-block: var(--space-6) var(--space-5); + overflow: hidden; +} +#hero-canvas { + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; +} +.hero .container { position: relative; z-index: 1; } +.hero-copy { max-width: 640px; } +.hero-copy .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } + +/* ============================================================ + Misc components used across pages + ============================================================ */ +.pill { + display: inline-block; + font-family: var(--font-small); + font-size: 0.78rem; + padding: 0.3rem 0.8rem; + border-radius: 999px; + border: 1px solid var(--border-strong); + color: var(--text-soft); +} +.pill[data-active="true"] { + background: var(--accent-amor); + border-color: var(--accent-amor); + color: #fff; +} + +.duo-columns { + display: grid; + gap: var(--space-3); + border-radius: 28px; + overflow: hidden; +} +@media (min-width: 780px) { .duo-columns { grid-template-columns: 1fr 1fr; gap: 0; } } +.duo-col { + padding: var(--space-4); +} +.duo-col.amor { + background: color-mix(in srgb, var(--accent-amor) 10%, var(--bg-raised)); + border: 1px solid var(--border); +} +.duo-col.roma { + background: color-mix(in srgb, var(--accent-roma) 10%, var(--bg-raised)); + border: 1px solid var(--border); +} +.duo-col h4 { font-family: var(--font-small); font-style: normal; letter-spacing: 0.03em; text-transform: none; margin-bottom: var(--space-2); } +.duo-col ul { display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-display); font-size: var(--step-1); font-style: italic; } + +.timeline { + display: grid; + gap: var(--space-3); + counter-reset: step; +} +@media (min-width: 860px) { .timeline { grid-template-columns: repeat(5, 1fr); } } +.timeline .step { + border-top: 2px solid var(--accent-roma); + padding-top: var(--space-2); +} +.timeline .step .num { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--accent-amor); } + +.plan-card { + border: 1px solid var(--border); + border-radius: 24px 24px 12px 12px; + padding: var(--space-3); + background: var(--bg-raised); + display: flex; flex-direction: column; gap: var(--space-2); + cursor: pointer; + transition: border-color 0.25s ease, transform 0.25s ease; +} +.plan-card:hover { transform: translateY(-4px); } +.plan-card[data-featured="true"] { border-color: var(--accent-amor); box-shadow: 0 0 0 1px var(--accent-amor); } +.plan-card .price { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); } +.plan-card .details { display: none; font-size: 0.92rem; color: var(--text-soft); } +.plan-card.expanded .details { display: block; } +.plan-card .details dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.8rem; margin: var(--space-2) 0; } +.plan-card .details dt { font-family: var(--font-small); color: var(--accent-roma-bright); font-size: 0.8rem; } +.plan-card .details dd { margin: 0; } + +.portfolio-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; } +.portfolio-grid { margin-top: var(--space-4); } +.case-card { + border-radius: 24px; + overflow: hidden; + border: 1px solid var(--border); + background: var(--bg-raised); + cursor: pointer; +} +.case-card .thumb { + aspect-ratio: 4/3; + background: linear-gradient(135deg, var(--c-teal-deep), var(--c-magenta)); + display: grid; place-items: center; + color: rgba(255,255,255,0.85); + font-family: var(--font-small); + font-size: 0.78rem; + letter-spacing: 0.04em; +} +.case-card .body { padding: var(--space-2) var(--space-3) var(--space-3); } +.case-card .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } + +.modal-backdrop { + position: fixed; inset: 0; background: rgba(10,5,14,0.6); + display: none; align-items: center; justify-content: center; z-index: 200; padding: var(--space-3); +} +.modal-backdrop.open { display: flex; } +.modal { + background: var(--bg-raised); border-radius: 24px; max-width: 560px; width: 100%; + padding: var(--space-4); position: relative; max-height: 86vh; overflow-y: auto; +} +.modal-close { + position: absolute; top: var(--space-2); right: var(--space-2); + width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); + background: transparent; color: var(--text); display: grid; place-items: center; +} + +.team-slot { + aspect-ratio: 1/1; + border-radius: 999px 999px 20px 20px; + border: 1.5px dashed var(--border-strong); + display: grid; place-items: center; + color: var(--text-soft); + font-family: var(--font-small); font-size: 0.78rem; text-align: center; padding: var(--space-2); +} + +/* Diagnóstico */ +.diag-wrap { max-width: 640px; margin-inline: auto; } +.diag-progress { display: flex; gap: 0.4rem; margin-bottom: var(--space-4); } +.diag-progress span { height: 3px; flex: 1; background: var(--border); border-radius: 2px; overflow: hidden; } +.diag-progress span::after { content: ''; display: block; height: 100%; width: 0%; background: var(--accent-amor); transition: width 0.4s ease; } +.diag-progress span[data-state="active"]::after, +.diag-progress span[data-state="done"]::after { width: 100%; } + +.diag-step { display: none; } +.diag-step.active { display: block; animation: fadein 0.4s ease; } +@keyframes fadein { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} } + +.diag-options { display: grid; gap: 0.7rem; margin-top: var(--space-3); } +.diag-option { + text-align: left; + padding: 1rem 1.2rem; + border: 1px solid var(--border-strong); + border-radius: 16px; + background: var(--bg-raised); + font-family: var(--font-body); + transition: border-color 0.2s ease, background 0.2s ease; +} +.diag-option:hover { border-color: var(--accent-roma-bright); } +.diag-option[aria-pressed="true"] { border-color: var(--accent-amor); background: color-mix(in srgb, var(--accent-amor) 12%, var(--bg-raised)); } + +.diag-nav { display: flex; justify-content: space-between; margin-top: var(--space-4); } +.diag-result { + border: 1px solid var(--border); + border-radius: 24px; + padding: var(--space-4); + background: var(--bg-raised); +} +.diag-result h3 { margin-bottom: var(--space-2); } + +form.form-grid { + display: grid; + gap: var(--space-2); +} +@media (min-width: 700px) { form.form-grid.two-col { grid-template-columns: 1fr 1fr; } } +.field { display: flex; flex-direction: column; gap: 0.4rem; } +.field label { font-family: var(--font-small); font-size: 0.82rem; color: var(--text-soft); } +.field input, .field select, .field textarea { + padding: 0.85rem 1rem; + border-radius: 12px; + border: 1px solid var(--border-strong); + background: var(--bg-raised); + color: var(--text); +} +.field input:focus, .field select:focus, .field textarea:focus { + outline: 2px solid var(--accent-roma-bright); + outline-offset: 1px; +} +.field.full { grid-column: 1 / -1; } + +.confirmation-box { + border: 1px solid var(--border); + border-radius: 20px; + padding: var(--space-3); + background: color-mix(in srgb, var(--accent-roma) 12%, var(--bg-raised)); + display: none; +} +.confirmation-box.show { display: block; } + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } +} + +:focus-visible { outline: 3px solid var(--accent-roma-bright); outline-offset: 2px; } \ No newline at end of file diff --git a/diagnostico.html b/diagnostico.html new file mode 100644 index 0000000..bd1525a --- /dev/null +++ b/diagnostico.html @@ -0,0 +1,200 @@ + + + + + +Diagnóstico — Amor y Roma + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+
+
+

Diagnóstico

+

¿Qué necesita hoy tu negocio?

+ + +
+
+ +
+

¿Qué estás buscando resolver?

+
+ + + + + + + +
+
+ +
+

¿En qué etapa está tu negocio?

+
+ + + + +
+
+
+ +
+

¿Cuál es hoy tu principal desafío?

+
+
+
+ +
+

¿Qué querés conseguir?

+
+ + + + + +
+
+
+ +
+

¿Qué tan desarrollada está tu presencia digital?

+
+ + + + +
+
+
+
+ + + + + +
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bcbb75e --- /dev/null +++ b/index.html @@ -0,0 +1,305 @@ + + + + + +Amor y Roma — Agencia boutique de marketing digital + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+ + +
+ +
+
+

Estudio creativo · marketing digital

+

Creatividad, estrategia y tecnología para construir marcas que importan.

+

Somos una agencia boutique: sin plantillas, con capacidad controlada de cuentas y foco absoluto en la calidad visual y de contenido. Combinamos dirección de arte con estructura digital orientada a resultados.

+
+ Encontrá tu solución + Ver nuestros servicios +
+
+
+
+ + +
+
+

El concepto

+

Dos fuerzas. Una forma de construir.

+
+
+

AMOR

+
    +
  • Pasión
    • +
  • Arte
    • +
  • Identidad
    • +
  • Dirección creativa
    • +
+
+
+

ROMA

+
    +
  • Estrategia
    • +
  • Arquitectura
    • +
  • Tecnología
    • +
  • Procesos
    • +
+
+
+

La creatividad atrae. La estrategia la convierte en crecimiento. No somos "otra agencia de marketing": diagnosticamos, diseñamos y construimos soluciones digitales a medida.

+
+
+ + +
+
+

Puntos de partida frecuentes

+

Desafíos que ayudamos a resolver.

+
+

"Mi marca no refleja el valor de mi negocio."

+

"Tengo redes, pero no generan resultados."

+

"Necesito una web que realmente venda."

+

"Estoy perdiendo oportunidades por procesos manuales."

+

"Necesito atraer clientes con publicidad."

+

"Mi negocio creció y mi presencia digital quedó atrás."

+
+
+ Quiero descubrir qué necesito +
+
+
+ + +
+
+

Ecosistema de soluciones

+

Una estrategia construida alrededor de tu negocio.

+
+
+ 01 +

Branding & Identidad

+

Construcción de identidad, universo visual y posicionamiento.

+
  • Identidad
  • Logo
  • Sistema visual
  • Manual
+
+
+ 02 +

Redes Sociales & Contenido

+

Contenido, dirección de arte, estrategia y gestión de comunidad.

+
  • Estrategia
  • Contenido
  • Copywriting
  • Comunidad
+
+
+ 03 +

Desarrollo Web

+

Activos digitales diseñados alrededor del negocio y el embudo.

+
  • Arquitectura
  • UX
  • SEO
  • Analítica
+
+
+ 04 +

Automatizaciones

+

Conversaciones, captación y cualificación de prospectos.

+
  • Conversación
  • Captación
  • Cualificación
  • Seguimiento
+
+
+ 05 +

Paid Media

+

Publicidad, campañas, optimización y adquisición.

+
  • Campañas
  • Creatividades
  • Audiencias
  • Optimización
+
+
+
+ Explorar servicios +
+
+
+ + +
+
+

Planes de crecimiento

+

Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.

+
+

Esencial

Para ordenar y profesionalizar tu imagen desde cero.

+

Impulso

Para crecer comunidad y validar tu propuesta.

+

Premium

Para convertir tracción en posicionamiento.

+

Élite

Para liderazgo de marca y omnicanalidad.

+
+
+ Comparar planes + No sé cuál necesito → +
+
+
+ + +
+
+

Trabajo que habla por nosotros

+

Proyectos que combinan identidad, estrategia y estructura.

+
+
+
Identidad Integral · placeholder
+
+

Identidad Integral

+

Branding + personaje de marca + gestión de RRSS.

+
+
+
+
Infraestructura Institucional · placeholder
+
+

Infraestructura Institucional

+

Web corporativa B2B, credibilidad y solidez.

+
+
+
+
Ecosistema Digital · placeholder
+
+

Ecosistema Digital

+

Branding + Web + Redes, integrados desde cero.

+
+
+
+
+ Ver portfolio completo +
+
+
+ + +
+
+

Cómo trabajamos

+

No improvisamos.

+
+
01

Diagnóstico

+
02

Estrategia

+
03

Producción

+
04

Validación

+
05

Medición

+
+
+ Conocé nuestro método → +
+
+
+ + +
+
+

Tu próximo paso no tiene que ser otra publicación. Tiene que ser una estrategia.

+
+ Empezar diagnóstico + Hablar con Amor y Roma +
+
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/js/contacto.js b/js/contacto.js new file mode 100644 index 0000000..38c0366 --- /dev/null +++ b/js/contacto.js @@ -0,0 +1,11 @@ +(function () { + "use strict"; + const form = document.getElementById("contact-form"); + const confirmBox = document.getElementById("contact-confirmation"); + form?.addEventListener("submit", (e) => { + e.preventDefault(); + form.hidden = true; + confirmBox?.classList.add("show"); + confirmBox?.scrollIntoView({ behavior: "smooth", block: "center" }); + }); +})(); \ No newline at end of file diff --git a/js/diagnostico.js b/js/diagnostico.js new file mode 100644 index 0000000..d0402b8 --- /dev/null +++ b/js/diagnostico.js @@ -0,0 +1,255 @@ +// ============================================================ +// AMOR & ROMA — Diagnóstico interactivo +// 5 preguntas máx., con lógica condicional real: +// - La pregunta 3 cambia según la respuesta de la pregunta 1. +// - Si el usuario llega con contexto (?interes=redes o ?plan=premium +// desde Servicios/Planes), se preselecciona y se saltea esa pregunta. +// - El resultado combina las 5 respuestas en una recomendación de +// servicio + plan sugerido. +// ============================================================ +(function () { + "use strict"; + + const form = document.getElementById("diagnostico"); + if (!form) return; + + /* ---------- Contexto heredado desde otras páginas ---------- */ + const params = new URLSearchParams(window.location.search); + const preInteres = params.get("interes"); // ej: redes, web, marca, automatizacion, captacion, varias + const prePlan = params.get("plan"); // ej: esencial, impulso, premium, elite + + const state = { + necesidad: preInteres || null, + etapa: null, + desafio: null, + objetivo: null, + madurez: null, + planPrevio: prePlan || null, + }; + + /* ---------- Banco de preguntas ---------- */ + const desafiosPorNecesidad = { + marca: [ + ["identidad-debil", "Mi identidad no refleja el valor real de mi negocio"], + ["sin-relato", "No sé cómo comunicar lo que hago de forma consistente"], + ["rediseno", "Necesito un rediseño completo, lo actual ya no funciona"], + ], + presencia: [ + ["redes-sin-resultado", "Tengo redes, pero no generan resultados"], + ["sin-web", "No tengo una web propia"], + ["inconsistencia", "Todo se ve desordenado o inconsistente entre canales"], + ], + contenido: [ + ["sin-tiempo", "No tengo tiempo para crear contenido de forma constante"], + ["sin-estrategia", "No sé qué contenido realmente funciona"], + ["calidad", "Necesito subir la calidad de producción"], + ], + web: [ + ["sin-web-propia", "No tengo web propia todavía"], + ["no-convierte", "Tengo web, pero no convierte visitas en clientes"], + ["ecommerce", "Necesito catálogo o e-commerce"], + ], + captacion: [ + ["pocos-leads", "No estoy generando suficientes oportunidades"], + ["procesos-manuales", "Pierdo oportunidades por procesos manuales"], + ["necesito-ads", "Necesito publicidad paga para atraer clientes"], + ], + automatizacion: [ + ["todo-manual", "Respondo consultas manualmente y no llego a todo"], + ["sin-seguimiento", "Pierdo leads por falta de seguimiento"], + ["integracion", "Necesito integrar WhatsApp, redes y CRM"], + ], + varias: [ + ["desde-cero", "Necesito ordenar todo desde cero"], + ["piezas-sueltas", "Tengo piezas sueltas que no están integradas"], + ["ecosistema", "Quiero un ecosistema digital completo"], + ], + }; + + const necesidadLabels = { + marca: "Marca", + presencia: "Presencia digital", + contenido: "Contenido", + web: "Web", + captacion: "Captación de clientes", + automatizacion: "Automatización", + varias: "Varias cosas", + }; + + /* ---------- Elementos del DOM ---------- */ + const steps = Array.from(form.querySelectorAll(".diag-step")); + const progressWrap = form.querySelector(".diag-progress"); + const resultBox = document.getElementById("diag-result"); + const captureBox = document.getElementById("diag-capture"); + + let order = ["necesidad", "etapa", "desafio", "objetivo", "madurez"]; + if (preInteres && necesidadLabels[preInteres]) { + order = order.filter((k) => k !== "necesidad"); + } + let currentIndex = 0; + + function buildProgress() { + progressWrap.innerHTML = ""; + order.forEach(() => { + const span = document.createElement("span"); + progressWrap.appendChild(span); + }); + } + + function updateProgress() { + Array.from(progressWrap.children).forEach((span, i) => { + span.dataset.state = i < currentIndex ? "done" : i === currentIndex ? "active" : ""; + }); + } + + function renderDesafioOptions() { + const target = form.querySelector('[data-step="desafio"] .diag-options'); + const necesidad = state.necesidad || "varias"; + const options = desafiosPorNecesidad[necesidad] || desafiosPorNecesidad.varias; + target.innerHTML = ""; + options.forEach(([value, label]) => { + const btn = document.createElement("button"); + btn.type = "button"; + btn.className = "diag-option"; + btn.dataset.field = "desafio"; + btn.dataset.value = value; + btn.setAttribute("aria-pressed", "false"); + btn.textContent = label; + target.appendChild(btn); + }); + attachOptionHandlers(target); + } + + function attachOptionHandlers(scope) { + scope.querySelectorAll(".diag-option").forEach((btn) => { + btn.addEventListener("click", () => { + scope.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false")); + btn.setAttribute("aria-pressed", "true"); + state[btn.dataset.field] = btn.dataset.value; + setTimeout(goNext, 220); + }); + }); + } + + function showStep(key) { + steps.forEach((s) => s.classList.toggle("active", s.dataset.step === key)); + if (key === "desafio") renderDesafioOptions(); + updateProgress(); + } + + function goNext() { + if (currentIndex < order.length - 1) { + currentIndex++; + showStep(order[currentIndex]); + } else { + showResult(); + } + } + + function goBack() { + if (currentIndex > 0) { + currentIndex--; + showStep(order[currentIndex]); + } + } + + form.querySelectorAll("[data-action='back']").forEach((btn) => btn.addEventListener("click", goBack)); + + // Handlers for static (non-dynamic) option steps + form.querySelectorAll('.diag-step[data-step]').forEach((stepEl) => { + if (stepEl.dataset.step === "desafio") return; // built dynamically + attachOptionHandlers(stepEl); + }); + + /* ---------- Motor de recomendación ---------- */ + const solucionPorNecesidad = { + marca: "Branding & Identidad", + presencia: "Redes Sociales & Contenido + Desarrollo Web", + contenido: "Redes Sociales & Contenido", + web: "Desarrollo Web", + captacion: "Paid Media + Automatizaciones", + automatizacion: "Automatizaciones", + varias: "Solución Integral (Branding + Web + Redes)", + }; + + function planSugerido() { + const etapaScore = { comenzando: 0, validando: 1, creciendo: 2, consolidado: 3 }; + const madurezScore = { nula: 0, basica: 1, intermedia: 2, avanzada: 3 }; + const e = etapaScore[state.etapa] ?? 1; + const m = madurezScore[state.madurez] ?? 1; + const score = Math.round((e + m) / 2); + const plan = ["esencial", "impulso", "premium", "elite"][Math.min(score, 3)]; + return plan; + } + + const planLabels = { esencial: "Plan Esencial", impulso: "Plan Impulso", premium: "Plan Premium", elite: "Plan Élite" }; + + function showResult() { + steps.forEach((s) => s.classList.remove("active")); + progressWrap.querySelectorAll("span").forEach((s) => (s.dataset.state = "done")); + + const necesidadKey = state.necesidad || "varias"; + const solucion = solucionPorNecesidad[necesidadKey]; + const plan = state.planPrevio && planLabels[state.planPrevio] ? state.planPrevio : planSugerido(); + + resultBox.innerHTML = ` +

Nuestra recomendación

+

Te conviene priorizar: ${solucion}

+

Situación actual: negocio en etapa "${etapaLabel(state.etapa)}", con una presencia digital ${madurezLabel(state.madurez)}, buscando ${objetivoLabel(state.objetivo)}.

+

Próximo paso recomendado: ${planLabels[plan]} ${state.planPrevio ? "— ya veníamos conversando sobre este plan" : ""}.

+

Esto es una orientación inicial, no un diagnóstico definitivo — lo afinamos juntos en una conversación.

+ `; + resultBox.hidden = false; + captureBox.hidden = false; + document.getElementById("diag-plan-hidden").value = plan; + document.getElementById("diag-solucion-hidden").value = solucion; + resultBox.scrollIntoView({ behavior: "smooth", block: "start" }); + } + + function etapaLabel(v) { + return { comenzando: "recién empezando", validando: "validando", creciendo: "en crecimiento", consolidado: "consolidado" }[v] || "sin definir"; + } + function madurezLabel(v) { + return { nula: "nula", basica: "básica", intermedia: "intermedia", avanzada: "avanzada" }[v] || "sin definir"; + } + function objetivoLabel(v) { + return { + vender: "vender más", + profesionalizar: "profesionalizar su imagen", + clientes: "generar más clientes", + tiempo: "ahorrar tiempo con procesos", + referente: "posicionarse como referente", + }[v] || "crecer"; + } + + form.querySelector("[data-action='restart']")?.addEventListener("click", () => { + currentIndex = 0; + state.desafio = state.objetivo = state.madurez = state.etapa = null; + if (!preInteres) state.necesidad = null; + form.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false")); + resultBox.hidden = true; + captureBox.hidden = true; + showStep(order[0]); + }); + + const finalForm = document.getElementById("diag-lead-form"); + if (finalForm) { + finalForm.addEventListener("submit", (e) => { + e.preventDefault(); + const confirmBox = document.getElementById("diag-confirmation"); + finalForm.hidden = true; + confirmBox.classList.add("show"); + }); + } + + /* ---------- Inicio ---------- */ + buildProgress(); + if (preInteres && necesidadLabels[preInteres]) { + const banner = document.getElementById("diag-context-banner"); + if (banner) { + banner.hidden = false; + banner.textContent = `Ya sabemos que tu interés inicial es "${necesidadLabels[preInteres]}" — seguimos desde ahí.`; + } + } + showStep(order[0]); +})(); \ No newline at end of file diff --git a/js/hero-canvas.js b/js/hero-canvas.js new file mode 100644 index 0000000..ec2550d --- /dev/null +++ b/js/hero-canvas.js @@ -0,0 +1,152 @@ +// ============================================================ +// AMOR & ROMA — Hero: campo de humo/partículas orgánicas +// Canvas 2D, reactivo al cursor, pasa detrás del texto. +// ============================================================ +(function () { + "use strict"; + + const canvas = document.getElementById("hero-canvas"); + if (!canvas) return; + + const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + + const ctx = canvas.getContext("2d"); + let width, height, dpr; + let pointer = { x: -9999, y: -9999, active: false }; + let particles = []; + const COUNT = reduceMotion ? 0 : Math.min(70, Math.floor(window.innerWidth / 16)); + + function themeColors() { + const dark = document.documentElement.getAttribute("data-theme") === "dark"; + return dark + ? [ + [186, 18, 77], // magenta + [0, 109, 143], // teal web + [223, 189, 185], // blush + ] + : [ + [0, 63, 82], // teal deep + [186, 18, 77], // magenta + [223, 189, 185], // blush + ]; + } + + function resize() { + const rect = canvas.parentElement.getBoundingClientRect(); + dpr = Math.min(window.devicePixelRatio || 1, 2); + width = rect.width; + height = rect.height; + canvas.width = width * dpr; + canvas.height = height * dpr; + canvas.style.width = width + "px"; + canvas.style.height = height + "px"; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + } + + function rand(min, max) { return Math.random() * (max - min) + min; } + + function makeParticle() { + const colors = themeColors(); + const c = colors[Math.floor(Math.random() * colors.length)]; + return { + x: rand(0, width), + y: rand(0, height), + baseX: 0, + baseY: 0, + vx: rand(-0.12, 0.12), + vy: rand(-0.18, -0.05), + r: rand(50, 130), + alpha: rand(0.03, 0.09), + color: c, + wander: rand(0, Math.PI * 2), + wanderSpeed: rand(0.002, 0.006), + }; + } + + function init() { + resize(); + particles = new Array(COUNT).fill(0).map(makeParticle); + } + + function step() { + ctx.clearRect(0, 0, width, height); + + particles.forEach((p) => { + // wander drift (turbulence) + p.wander += p.wanderSpeed; + p.x += p.vx + Math.cos(p.wander) * 0.15; + p.y += p.vy + Math.sin(p.wander) * 0.1; + + // cursor influence — smoke curls away/around pointer + if (pointer.active) { + const dx = p.x - pointer.x; + const dy = p.y - pointer.y; + const dist = Math.sqrt(dx * dx + dy * dy) || 1; + const influence = Math.max(0, 220 - dist) / 220; + if (influence > 0) { + p.x += (dx / dist) * influence * 2.4; + p.y += (dy / dist) * influence * 2.4; + } + } + + // wrap around edges softly + if (p.y < -p.r) p.y = height + p.r; + if (p.x < -p.r) p.x = width + p.r; + if (p.x > width + p.r) p.x = -p.r; + if (p.y > height + p.r) p.y = -p.r; + + const [r, g, b] = p.color; + const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r); + gradient.addColorStop(0, `rgba(${r},${g},${b},${p.alpha})`); + gradient.addColorStop(1, `rgba(${r},${g},${b},0)`); + ctx.fillStyle = gradient; + ctx.beginPath(); + ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); + ctx.fill(); + }); + + if (!reduceMotion) requestAnimationFrame(step); + } + + const parent = canvas.parentElement; + parent.addEventListener("mousemove", (e) => { + const rect = parent.getBoundingClientRect(); + pointer.x = e.clientX - rect.left; + pointer.y = e.clientY - rect.top; + pointer.active = true; + }); + parent.addEventListener("mouseleave", () => { pointer.active = false; }); + parent.addEventListener( + "touchmove", + (e) => { + const rect = parent.getBoundingClientRect(); + const t = e.touches[0]; + if (!t) return; + pointer.x = t.clientX - rect.left; + pointer.y = t.clientY - rect.top; + pointer.active = true; + }, + { passive: true } + ); + + window.addEventListener("resize", () => { + resize(); + }); + + // Redraw once (or restart loop) if theme changes, to refresh palette + const observer = new MutationObserver(() => { + particles.forEach((p) => { + const colors = themeColors(); + p.color = colors[Math.floor(Math.random() * colors.length)]; + }); + }); + observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] }); + + init(); + if (reduceMotion) { + // Static single soft render for reduced motion users + ctx.clearRect(0, 0, width, height); + } else { + step(); + } +})(); \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..a9eb99a --- /dev/null +++ b/js/main.js @@ -0,0 +1,41 @@ +// ============================================================ +// AMOR & ROMA — comportamiento compartido (todas las páginas) +// ============================================================ +(function () { + "use strict"; + + /* ---------- Tema claro / oscuro ---------- */ + const root = document.documentElement; + const stored = localStorage.getItem("ar-theme"); + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + const initial = stored || (prefersDark ? "dark" : "light"); + root.setAttribute("data-theme", initial); + + document.querySelectorAll("[data-theme-toggle]").forEach((btn) => { + btn.addEventListener("click", () => { + const current = root.getAttribute("data-theme"); + const next = current === "dark" ? "light" : "dark"; + root.setAttribute("data-theme", next); + localStorage.setItem("ar-theme", next); + }); + }); + + /* ---------- Menú móvil ---------- */ + const navToggle = document.querySelector("[data-nav-toggle]"); + const mobileMenu = document.querySelector("[data-mobile-menu]"); + if (navToggle && mobileMenu) { + navToggle.addEventListener("click", () => { + mobileMenu.classList.toggle("open"); + const expanded = mobileMenu.classList.contains("open"); + navToggle.setAttribute("aria-expanded", String(expanded)); + }); + mobileMenu.querySelectorAll("a").forEach((a) => + a.addEventListener("click", () => mobileMenu.classList.remove("open")) + ); + } + + /* ---------- Año dinámico en footer ---------- */ + document.querySelectorAll("[data-year]").forEach((el) => { + el.textContent = new Date().getFullYear(); + }); +})(); \ No newline at end of file diff --git a/js/planes.js b/js/planes.js new file mode 100644 index 0000000..42d9aec --- /dev/null +++ b/js/planes.js @@ -0,0 +1,11 @@ +(function () { + "use strict"; + document.querySelectorAll(".plan-card").forEach((card) => { + const trigger = card.querySelector("[data-plan-trigger]"); + trigger?.addEventListener("click", () => { + const wasExpanded = card.classList.contains("expanded"); + document.querySelectorAll(".plan-card").forEach((c) => c.classList.remove("expanded")); + if (!wasExpanded) card.classList.add("expanded"); + }); + }); +})(); \ No newline at end of file diff --git a/js/portfolio.js b/js/portfolio.js new file mode 100644 index 0000000..5234515 --- /dev/null +++ b/js/portfolio.js @@ -0,0 +1,48 @@ +(function () { + "use strict"; + + const filters = document.querySelectorAll("[data-filter]"); + const cards = document.querySelectorAll("[data-tags]"); + + filters.forEach((btn) => { + btn.addEventListener("click", () => { + filters.forEach((b) => b.setAttribute("data-active", "false")); + btn.setAttribute("data-active", "true"); + const value = btn.dataset.filter; + cards.forEach((card) => { + const tags = card.dataset.tags.split(","); + const show = value === "todos" || tags.includes(value); + card.style.display = show ? "" : "none"; + }); + }); + }); + + const backdrop = document.getElementById("case-modal"); + const modalBody = document.getElementById("case-modal-body"); + document.querySelectorAll("[data-case-trigger]").forEach((card) => { + card.addEventListener("click", () => { + modalBody.innerHTML = ` +

${card.dataset.caseTag || ""}

+

${card.dataset.caseTitle}

+

Contexto: ${card.dataset.caseContext}

+

Problema: ${card.dataset.caseProblem}

+

Solución: ${card.dataset.caseSolution}

+
${(card.dataset.tags || "") + .split(",") + .map((t) => `${t}`) + .join("")}
+

* Caso de referencia (placeholder) — se reemplaza por proyectos reales del portfolio.

+ `; + backdrop.classList.add("open"); + }); + }); + + backdrop?.addEventListener("click", (e) => { + if (e.target === backdrop || e.target.closest("[data-modal-close]")) { + backdrop.classList.remove("open"); + } + }); + document.addEventListener("keydown", (e) => { + if (e.key === "Escape") backdrop?.classList.remove("open"); + }); +})(); \ No newline at end of file diff --git a/metodo.html b/metodo.html new file mode 100644 index 0000000..ecdc79f --- /dev/null +++ b/metodo.html @@ -0,0 +1,205 @@ + + + + + +Método — Amor y Roma + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+ +
+
+

Método

+

No empezamos diseñando. Empezamos entendiendo.

+

De la esencia a la estructura: cada proyecto comienza entendiendo el negocio y termina midiendo lo que construimos.

+
+
+ +
+
+
+
+ 01 +

Diagnóstico

+

Briefing a fondo e inmersión de marca. Entendemos negocio, objetivos y contexto.

+
+
+ 02 +

Estrategia

+

Definición de pilares y arquitectura del proyecto.

+
+
+ 03 +

Producción

+

Creación de piezas visuales, copys y desarrollo web.

+
+
+ 04 +

Validación

+

Aprobación de grillas o entrega de desarrollo, con feedback estructurado.

+
+
+ 05 +

Medición

+

Métricas, análisis y ajustes para el siguiente ciclo.

+
+
+
+
+ + +
+
+

Aplicación según servicio

+

El mismo método, distinto ritmo.

+
+ + + + + +
+
+

En Branding, el diagnóstico define arquetipo y propuesta de valor; la estrategia arma el sistema visual; la producción diseña logo, paleta y manual; la validación es la aprobación del manual de marca; la medición evalúa consistencia de aplicación.

+ + + + +
+
+
+ +
+
+

Control de calidad

+

Cada entrega pasa por un mismo estándar.

+

Revisión interna, aprobación estructurada, feedback acotado en rondas definidas, estándares propios de Amor y Roma y optimización continua tras el lanzamiento.

+
+
+ +
+
+

Quiero comenzar mi diagnóstico

+ Empezar diagnóstico +
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/nosotros.html b/nosotros.html new file mode 100644 index 0000000..7ed57f2 --- /dev/null +++ b/nosotros.html @@ -0,0 +1,188 @@ + + + + + +Nosotros — Amor y Roma + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+ +
+
+

Nosotros

+

Amor y Roma. Dos fuerzas. Una forma de construir.

+
+
+ +
+
+
+
+

AMOR

+
    +
  • Pasión
  • Arte
  • Creatividad
  • Identidad
  • Empatía
    • +
+
+
+

ROMA

+
    +
  • Estrategia
  • Arquitectura
  • Procesos
  • Tecnología
  • Estructura
    • +
+
+
+

La creatividad da esencia. La estrategia construye el camino.

+
+
+ +
+
+

Posicionamiento

+

Boutique, en serio.

+
+
+

Sin plantillas prefabricadas

+

Cada proyecto se construye a medida de la identidad y madurez del negocio.

+
+
+

Capacidad controlada

+

Priorizamos profundidad operativa sobre volumen de clientes.

+
+
+

Foco visual y de contenido

+

El criterio estético y la calidad de producción son el diferencial central.

+
+
+
+
+ +
+
+

El equipo

+

Las personas detrás de cada proyecto.

+
+
Foto pendiente
Nombre · Rol
+
Foto pendiente
Nombre · Rol
+
Foto pendiente
Nombre · Rol
+
Foto pendiente
Nombre · Rol
+
+

Espacios reservados — se completan con fotografía real del equipo.

+
+
+ +
+
+

¿Conocés qué podemos construir juntos?

+
+ Ver servicios + Empezar diagnóstico +
+
+
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/planes.html b/planes.html new file mode 100644 index 0000000..0447580 --- /dev/null +++ b/planes.html @@ -0,0 +1,214 @@ + + + + + +Planes — Amor y Roma + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+ +
+
+

Planes recurrentes

+

Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.

+

Los cuatro planes acompañan diferentes niveles de madurez. Hacé clic en una tarjeta para ver el detalle completo.

+

* Precios de referencia (placeholder) — a confirmar antes de publicar.

+
+
+ +
+
+
+ +
+
+

Esencial

+

Desde $45.000

+

Emprendedores iniciales que buscan ordenar y profesionalizar su imagen.

+
+
+
+
Contenido
8 piezas/carruseles · 4 historias/semana
+
Copywriting
Guías de estilo básicas y copys directos
+
Automatización
Respuestas automáticas (FAQ en DM)
+
Paid Media
No incluido (orgánico puro)
+
Gestión
Programación de contenido
+
Reportes
Mensual cuantitativo automatizado
+
+ Quiero este plan +
+
+ +
+
+

Impulso

+

Desde $75.000

+

Pequeños negocios en etapa de validación y captación activa.

+
+
+
+
Contenido
8 piezas · 4 Reels/TikToks · 6 historias/semana
+
Copywriting
Persuasivo, con dirección de arte personalizada
+
Automatización
Bienvenida + derivación a WhatsApp
+
Paid Media
1 campaña de tráfico o alcance local
+
Gestión
Moderación en horario comercial
+
Reportes
Mensual con análisis de métricas clave
+
+ Quiero este plan +
+
+ +
+
+

Premium ★

+

Desde $120.000

+

PyMEs con tracción comercial que buscan posicionamiento y flujo continuo.

+
+
+
+
Contenido
10 piezas · 8 Reels/TikToks · historias diarias
+
Copywriting
Storytelling avanzado y diseño editorial
+
Automatización
Cualificación de leads + base de datos
+
Paid Media
Gestión y optimización de conversión
+
Gestión
Moderación activa de comunidad
+
Reportes
Cualitativo + reunión de alineación (30 min)
+
+ Quiero este plan +
+
+ +
+
+

Élite

+

Desde $190.000

+

Empresas consolidadas que exigen liderazgo de marca y omnicanalidad.

+
+
+
+
Contenido
12 piezas premium · 12 Reels alta producción
+
Copywriting
Dirección creativa exclusiva y ganchos de retención
+
Automatización
Multi-paso, etiquetado de leads y CRM
+
Paid Media
Embudo completo (awareness, retargeting, conversión)
+
Gestión
Protocolo prioritario y gestión de reputación
+
Reportes
Dashboard en tiempo real + reunión ejecutiva
+
+ Quiero este plan +
+
+ +
+ +
+ No sé cuál elegir → +
+
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..4752e62 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,226 @@ + + + + + +Portfolio — Amor y Roma + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+ +
+
+

Portfolio

+

Proyectos que combinan identidad, estrategia y estructura.

+

Estos casos son placeholders representativos de nuestros cuatro arquetipos de trabajo — se reemplazan por proyectos reales antes de publicar.

+
+
+ +
+
+
+ + + + + + + +
+ +
+ +
+
Identidad Integral · placeholder
+
+

Identidad Integral

+

Branding + personaje de marca + RRSS.

+
BrandingRedes
+
+
+ +
+
Infraestructura Institucional · placeholder
+
+

Infraestructura Institucional

+

Web corporativa, credibilidad B2B.

+
Web
+
+
+ +
+
Ecosistema Digital · placeholder
+
+

Ecosistema Digital

+

Branding + Web + Redes, integrados.

+
BrandingWebRedes
+
+
+ +
+
Profesionalización · placeholder
+
+

Profesionalización

+

Web + gestión de RRSS.

+
WebRedes
+
+
+ +
+
Captación Automatizada · placeholder
+
+

Captación Automatizada

+

Automatización + Paid Media.

+
AutomatizaciónPaid Media
+
+
+ +
+
+
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/servicios.html b/servicios.html new file mode 100644 index 0000000..e7f2a5b --- /dev/null +++ b/servicios.html @@ -0,0 +1,256 @@ + + + + + +Servicios — Amor y Roma + + + + + +
+
+ + + amor&roma + + +
+ Encontrá tu solución + + +
+
+
+ Inicio + Servicios + Planes + Portfolio + Nosotros + Método + Diagnóstico + Contacto +
+
+ +
+ +
+
+

Servicios

+

Soluciones digitales diseñadas para hacer crecer tu marca.

+

No vendemos piezas sueltas: cada servicio resuelve un problema concreto de tu negocio, y puede combinarse con otros según tu etapa.

+ Encontrá tu solución +
+
+ + +
+
+

¿Qué necesita hoy tu negocio?

+
+ Construir una marca + Mejorar mi presencia digital + Generar contenido + Crear una web + Conseguir clientes + Automatizar procesos + Escalar campañas +
+
+
+ + +
+
+
+
+

01 · Branding & Identidad

+

La esencia visual y conceptual de tu marca.

+

Diagnóstico de marca, propuesta de valor, personalidad y todo el sistema de identidad que sostiene tu comunicación.

+ Construir mi marca +
+
    +
  • Diagnóstico de marca
    • +
  • Propuesta de valor
    • +
  • Logotipo e isotipo
    • +
  • Sistema cromático
    • +
  • Tipografía
    • +
  • Personajes / mascotas
    • +
  • Manual de identidad
    • +
  • Kit de plantillas
    • +
+
+
+
+ + +
+
+
+
    +
  • Estrategia y grilla
    • +
  • Copywriting
    • +
  • Dirección de arte
    • +
  • Reels / TikTok
    • +
  • Historias
    • +
  • Moderación
    • +
  • Reporting
    • +
  • Paid Media según plan
    • +
+
+

02 · Redes Sociales & Contenido

+

Contenido con criterio, no solo calendario.

+

Estrategia, dirección de arte y gestión pensadas para generar comunidad real, no solo publicaciones.

+ Ver planes +
+
+
+
+ + +
+
+

03 · Desarrollo Web

+

Activos digitales construidos alrededor de tu embudo.

+
+
+

Landing Pages

+

Para campañas y lanzamientos puntuales.

+
+
+

Sitios corporativos

+

Para empresas y organizaciones B2B.

+
+
+

Catálogos / E-commerce

+

Para comercialización digital directa.

+
+
+

Mobile first · velocidad · SEO técnico · analítica · Meta Pixel · integración con WhatsApp API.

+ Quiero una web +
+
+ + +
+
+

04 · Automatizaciones

+

De la conversación a la venta, sin perder oportunidades.

+
+

Interacción

+

Cualificación

+

Lead

+

Notificación

+

Seguimiento

+
+

Instagram · Facebook · WhatsApp · captación · cualificación · notificaciones internas.

+ Quiero automatizar +
+
+ + + + + +
+
+

Las marcas no crecen por piezas aisladas.

+

A veces la solución está en conectar varias disciplinas.

+
+
Branding + Redes
+
Branding + Web + Redes
+
Web + Automatización + Paid Media
+
Ecosistema Digital completo
+
+ Encontrar mi combinación +
+
+ +
+ + + + + + + + + + \ No newline at end of file