ppugliese/new_amoryroma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

textos gral

Browse Source
This commit is contained in:
ppugliese
2026-09-08 07:52:08 -03:00
parent 9b664f0fc2
commit 253203a6e2
12 changed files with 124 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/logos/logo-ciruela.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 422 KiB

assets/logos/logo-claro.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 436 KiB

contacto.html
+1 -1
View File
@@ -54,7 +54,7 @@
<section class="section-tight"> <section class="section-tight">
<div class="container"> <div class="container">
<p class="eyebrow">Contacto</p> <p class="eyebrow">CONTACTO</p>
<h1 style="font-size:var(--step-3); max-width:16ch;">Hablemos de tu próximo proyecto.</h1> <h1 style="font-size:var(--step-3); max-width:16ch;">Hablemos de tu próximo proyecto.</h1>
</div> </div>
</section> </section>
css/styles.css
+5 -3
View File
@@ -35,12 +35,13 @@
--font-small: 'Jost', sans-serif; --font-small: 'Jost', sans-serif;
--font-script: 'WindSong', cursive; --font-script: 'WindSong', cursive;
--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem); --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem);
--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
--step-3: clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem); --step-3: clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem);
--step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem); --step-4: clamp(2.4rem, 2rem + 3vw, 4rem);
--space-1: 0.5rem; --space-1: 0.5rem;
--space-2: 1rem; --space-2: 1rem;
@@ -110,10 +111,11 @@ p { margin: 0; max-width: 62ch; }
p.lede { font-size: var(--step-1); color: var(--text-soft); max-width: 46ch; } p.lede { font-size: var(--step-1); color: var(--text-soft); max-width: 46ch; }
.eyebrow { .eyebrow {
font-family: var(--font-small); font-family: var(--font-small);
font-style: uppercase;
font-size: var(--step--1); font-size: var(--step--1);
color: var(--accent-amor); color: var(--accent-amor);
letter-spacing: 0.02em; letter-spacing: 0.04em;
} }
.container { .container {
diagnostico.html
+6 -5
View File
@@ -61,7 +61,7 @@
<div class="diag-progress"></div> <div class="diag-progress"></div>
<div class="diag-step" data-step="necesidad"> <div class="diag-step" data-step="necesidad">
<h3 style="text-align:center;">¿Qué estás buscando resolver?</h3> <h4 style="text-align:left;">¿Qué estás buscando resolver?</h4>
<div class="diag-options"> <div class="diag-options">
<button type="button" class="diag-option" data-field="necesidad" data-value="marca" aria-pressed="false">Marca</button> <button type="button" class="diag-option" data-field="necesidad" data-value="marca" aria-pressed="false">Marca</button>
<button type="button" class="diag-option" data-field="necesidad" data-value="presencia" aria-pressed="false">Presencia digital</button> <button type="button" class="diag-option" data-field="necesidad" data-value="presencia" aria-pressed="false">Presencia digital</button>
@@ -74,7 +74,7 @@
</div> </div>
<div class="diag-step" data-step="etapa"> <div class="diag-step" data-step="etapa">
<h3 style="text-align:center;">¿En qué etapa está tu negocio?</h3> <h4 style="text-align:left;">¿En qué etapa está tu negocio?</h4>
<div class="diag-options"> <div class="diag-options">
<button type="button" class="diag-option" data-field="etapa" data-value="comenzando" aria-pressed="false">Estoy empezando</button> <button type="button" class="diag-option" data-field="etapa" data-value="comenzando" aria-pressed="false">Estoy empezando</button>
<button type="button" class="diag-option" data-field="etapa" data-value="validando" aria-pressed="false">Ya estoy vendiendo</button> <button type="button" class="diag-option" data-field="etapa" data-value="validando" aria-pressed="false">Ya estoy vendiendo</button>
@@ -85,13 +85,13 @@
</div> </div>
<div class="diag-step" data-step="desafio"> <div class="diag-step" data-step="desafio">
<h3 style="text-align:center;">¿Cuál es hoy tu principal desafío?</h3> <h4 style="text-align:left;">¿Cuál es hoy tu principal desafío?</h4>
<div class="diag-options"><!-- se completa dinámicamente según la necesidad --></div> <div class="diag-options"><!-- se completa dinámicamente según la necesidad --></div>
<div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div> <div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
</div> </div>
<div class="diag-step" data-step="objetivo"> <div class="diag-step" data-step="objetivo">
<h3 style="text-align:center;">¿Qué querés conseguir?</h3> <h4 style="text-align:left;">¿Qué querés conseguir?</h4>
<div class="diag-options"> <div class="diag-options">
<button type="button" class="diag-option" data-field="objetivo" data-value="vender" aria-pressed="false">Vender más</button> <button type="button" class="diag-option" data-field="objetivo" data-value="vender" aria-pressed="false">Vender más</button>
<button type="button" class="diag-option" data-field="objetivo" data-value="profesionalizar" aria-pressed="false">Profesionalizar mi imagen</button> <button type="button" class="diag-option" data-field="objetivo" data-value="profesionalizar" aria-pressed="false">Profesionalizar mi imagen</button>
@@ -103,7 +103,7 @@
</div> </div>
<div class="diag-step" data-step="madurez"> <div class="diag-step" data-step="madurez">
<h3 style="text-align:center;">¿Qué tan desarrollada está tu presencia digital?</h3> <h4 style="text-align:left;">¿Qué tan desarrollada está tu presencia digital?</h4>
<div class="diag-options"> <div class="diag-options">
<button type="button" class="diag-option" data-field="madurez" data-value="nula" aria-pressed="false">Nula, recién empiezo</button> <button type="button" class="diag-option" data-field="madurez" data-value="nula" aria-pressed="false">Nula, recién empiezo</button>
<button type="button" class="diag-option" data-field="madurez" data-value="basica" aria-pressed="false">Básica (redes o web simple)</button> <button type="button" class="diag-option" data-field="madurez" data-value="basica" aria-pressed="false">Básica (redes o web simple)</button>
@@ -132,6 +132,7 @@
</div> </div>
<div style="text-align:center; margin-top:var(--space-2);"> <div style="text-align:center; margin-top:var(--space-2);">
<button type="button" class="btn btn-ghost" data-action="restart">Volver a revisar mis respuestas</button> <button type="button" class="btn btn-ghost" data-action="restart">Volver a revisar mis respuestas</button>
<button type="button" class="btn-secondary" onclick="window.showReview?.()">Volver a revisar mis respuestas</button>
</div> </div>
</div> </div>
index.html
+36 -29
View File
@@ -57,9 +57,10 @@
<canvas id="hero-canvas" aria-hidden="true"></canvas> <canvas id="hero-canvas" aria-hidden="true"></canvas>
<div class="container"> <div class="container">
<div class="hero-copy"> <div class="hero-copy">
<p class="eyebrow">Estudio creativo · marketing digital</p> <p class="eyebrow">ESTUDIO CREATIVO · AGENCIA BOUTIQUE</p>
<h1>Creatividad, estrategia y tecnología para construir marcas que importan.</h1> <h1>Marcas con esencia,
<p class="lede" style="margin-top:1.2rem;">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.</p> construidas con estrategia.</h1>
<p class="lede" style="margin-top:1.2rem;">Servicios a medida para negocios que quieren crecer sin perder lo que los hace únicos.</p>
<div class="btn-row"> <div class="btn-row">
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a> <a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
<a href="servicios.html" class="btn btn-secondary">Ver nuestros servicios</a> <a href="servicios.html" class="btn btn-secondary">Ver nuestros servicios</a>
@@ -71,8 +72,8 @@
<!-- AMOR + ROMA --> <!-- AMOR + ROMA -->
<section class="section-tight"> <section class="section-tight">
<div class="container"> <div class="container">
<p class="eyebrow">El concepto</p> <p class="eyebrow">EL CONCEPTO</p>
<h2 style="max-width:16ch;">Dos fuerzas. Una forma de construir.</h2> <h2 style="max-width:30ch;">Dos fuerzas.<br> Una forma de construir.</h2>
<div class="duo-columns" style="margin-top:var(--space-4);"> <div class="duo-columns" style="margin-top:var(--space-4);">
<div class="duo-col amor"> <div class="duo-col amor">
<h4 style="color:var(--accent-amor);">AMOR</h4> <h4 style="color:var(--accent-amor);">AMOR</h4>
@@ -93,15 +94,15 @@
</ul> </ul>
</div> </div>
</div> </div>
<p class="lede" style="margin-top:var(--space-3); max-width:60ch;">La creatividad atrae. La estrategia la convierte en crecimiento. No somos "otra agencia de marketing": diagnosticamos, diseñamos y construimos soluciones digitales a medida.</p> <p class="lede" style="margin-top:var(--space-3); max-width:80ch;">La creatividad atrae. La estrategia la convierte en crecimiento. No somos "otra agencia de marketing": diagnosticamos, diseñamos y construimos soluciones digitales a medida.</p>
</div> </div>
</section> </section>
<!-- PROBLEMAS --> <!-- PROBLEMAS -->
<section> <section>
<div class="container"> <div class="container">
<p class="eyebrow">Puntos de partida frecuentes</p> <p class="eyebrow">PUNTOS DE PARTIDA FRECUENTES</p>
<h2 style="max-width:20ch;">Desafíos que ayudamos a resolver.</h2> <h2 style="max-width:60ch;">Desafíos que ayudamos a resolver.</h2>
<div class="grid grid-3" style="margin-top:var(--space-4);"> <div class="grid grid-3" style="margin-top:var(--space-4);">
<div class="card"><p>"Mi marca no refleja el valor de mi negocio."</p></div> <div class="card"><p>"Mi marca no refleja el valor de mi negocio."</p></div>
<div class="card"><p>"Tengo redes, pero no generan resultados."</p></div> <div class="card"><p>"Tengo redes, pero no generan resultados."</p></div>
@@ -119,36 +120,36 @@
<!-- ECOSISTEMA DE SERVICIOS --> <!-- ECOSISTEMA DE SERVICIOS -->
<section class="section-tight" style="background:var(--bg-sunken);"> <section class="section-tight" style="background:var(--bg-sunken);">
<div class="container"> <div class="container">
<p class="eyebrow">Ecosistema de soluciones</p> <p class="eyebrow">ECOSISTEMA DE SOLUCIONES</p>
<h2 style="max-width:22ch;">Una estrategia construida alrededor de tu negocio.</h2> <h2 style="max-width:22ch;">Una estrategia construida alrededor de tu negocio.</h2>
<div class="grid grid-3" style="margin-top:var(--space-4);"> <div class="grid grid-3" style="margin-top:var(--space-4);">
<article class="service-card"> <article class="service-card">
<span class="index">01</span> <span class="index">01</span>
<h3 style="font-size:var(--step-1);">Branding &amp; Identidad</h3> <h4 style="font-size:var(--step-1);">Branding &amp; Identidad</h4>
<p style="color:var(--text-soft);">Construcción de identidad, universo visual y posicionamiento.</p> <p style="color:var(--text-soft);">Construcción de identidad, universo visual y posicionamiento.</p>
<ul><li>Identidad</li><li>Logo</li><li>Sistema visual</li><li>Manual</li></ul> <ul><li>Identidad</li><li>Logo</li><li>Sistema visual</li><li>Manual</li></ul>
</article> </article>
<article class="service-card"> <article class="service-card">
<span class="index">02</span> <span class="index">02</span>
<h3 style="font-size:var(--step-1);">Redes Sociales &amp; Contenido</h3> <h4 style="font-size:var(--step-1);">Redes Sociales &amp; Contenido</h4>
<p style="color:var(--text-soft);">Contenido, dirección de arte, estrategia y gestión de comunidad.</p> <p style="color:var(--text-soft);">Contenido, dirección de arte, estrategia y gestión de comunidad.</p>
<ul><li>Estrategia</li><li>Contenido</li><li>Copywriting</li><li>Comunidad</li></ul> <ul><li>Estrategia</li><li>Contenido</li><li>Copywriting</li><li>Comunidad</li></ul>
</article> </article>
<article class="service-card"> <article class="service-card">
<span class="index">03</span> <span class="index">03</span>
<h3 style="font-size:var(--step-1);">Desarrollo Web</h3> <h4 style="font-size:var(--step-1);">Desarrollo Web</h4>
<p style="color:var(--text-soft);">Activos digitales diseñados alrededor del negocio y el embudo.</p> <p style="color:var(--text-soft);">Activos digitales diseñados alrededor del negocio y el embudo.</p>
<ul><li>Arquitectura</li><li>UX</li><li>SEO</li><li>Analítica</li></ul> <ul><li>Arquitectura</li><li>UX</li><li>SEO</li><li>Analítica</li></ul>
</article> </article>
<article class="service-card"> <article class="service-card">
<span class="index">04</span> <span class="index">04</span>
<h3 style="font-size:var(--step-1);">Automatizaciones</h3> <h4 style="font-size:var(--step-1);">Automatizaciones</h4>
<p style="color:var(--text-soft);">Conversaciones, captación y cualificación de prospectos.</p> <p style="color:var(--text-soft);">Conversaciones, captación y cualificación de prospectos.</p>
<ul><li>Conversación</li><li>Captación</li><li>Cualificación</li><li>Seguimiento</li></ul> <ul><li>Conversación</li><li>Captación</li><li>Cualificación</li><li>Seguimiento</li></ul>
</article> </article>
<article class="service-card"> <article class="service-card">
<span class="index">05</span> <span class="index">05</span>
<h3 style="font-size:var(--step-1);">Paid Media</h3> <h4 style="font-size:var(--step-1);">Paid Media</h4>
<p style="color:var(--text-soft);">Publicidad, campañas, optimización y adquisición.</p> <p style="color:var(--text-soft);">Publicidad, campañas, optimización y adquisición.</p>
<ul><li>Campañas</li><li>Creatividades</li><li>Audiencias</li><li>Optimización</li></ul> <ul><li>Campañas</li><li>Creatividades</li><li>Audiencias</li><li>Optimización</li></ul>
</article> </article>
@@ -162,13 +163,13 @@
<!-- PLANES --> <!-- PLANES -->
<section> <section>
<div class="container"> <div class="container">
<p class="eyebrow">Planes de crecimiento</p> <p class="eyebrow">PLANES DE CRECIMIENTO</p>
<h2 style="max-width:20ch;">Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.</h2> <h2 style="max-width:60ch;">Distintos negocios. Distintas etapas.<br> Un mismo objetivo: crecer.</h2>
<div class="grid grid-4" style="margin-top:var(--space-4);"> <div class="grid grid-4" style="margin-top:var(--space-4);">
<div class="card"><h4 style="font-size:var(--step-0);">Esencial</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para ordenar y profesionalizar tu imagen desde cero.</p></div> <div class="card"><h4 style="font-size:var(--step-0);">Esencial</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Establecer una presencia digital profesional y consistente.</p></div>
<div class="card"><h4 style="font-size:var(--step-0);">Impulso</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para crecer comunidad y validar tu propuesta.</p></div> <div class="card"><h4 style="font-size:var(--step-0);">Impulso</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Aumentar visibilidad, interacción y generación de leads calificados.</p></div>
<div class="card" style="border-color:var(--accent-amor);"><h4 style="font-size:var(--step-0); color:var(--accent-amor);">Premium</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para convertir tracción en posicionamiento.</p></div> <div class="card" style="border-color:var(--accent-amor);"><h4 style="font-size:var(--step-0); color:var(--accent-amor);">Premium</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Consolidar y expandir la empresa comercialmente.</p></div>
<div class="card"><h4 style="font-size:var(--step-0);">Élite</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para liderazgo de marca y omnicanalidad.</p></div> <div class="card"><h4 style="font-size:var(--step-0);">Élite</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Máximo posicionamiento y gestión integral de marca.</p></div>
</div> </div>
<div class="btn-row" style="display:flex; gap:1rem; flex-wrap:wrap; margin-top:var(--space-4);"> <div class="btn-row" style="display:flex; gap:1rem; flex-wrap:wrap; margin-top:var(--space-4);">
<a href="planes.html" class="btn btn-primary">Comparar planes</a> <a href="planes.html" class="btn btn-primary">Comparar planes</a>
@@ -180,8 +181,8 @@
<!-- PORTFOLIO DESTACADO --> <!-- PORTFOLIO DESTACADO -->
<section class="section-tight" style="background:var(--bg-sunken);"> <section class="section-tight" style="background:var(--bg-sunken);">
<div class="container"> <div class="container">
<p class="eyebrow">Trabajo que habla por nosotros</p> <p class="eyebrow">TRABAJO QUE HABLA POR NOSOTROS</p>
<h2 style="max-width:20ch;">Proyectos que combinan identidad, estrategia y estructura.</h2> <h2 style="max-width:60ch;">Proyectos que combinan identidad, <br>estrategia y estructura.</h2>
<div class="grid grid-3" style="margin-top:var(--space-4);"> <div class="grid grid-3" style="margin-top:var(--space-4);">
<div class="case-card"> <div class="case-card">
<div class="thumb">Identidad Integral · placeholder</div> <div class="thumb">Identidad Integral · placeholder</div>
@@ -214,14 +215,20 @@
<!-- MÉTODO --> <!-- MÉTODO -->
<section> <section>
<div class="container"> <div class="container">
<p class="eyebrow">Cómo trabajamos</p> <p class="eyebrow">CÓMO TRABAJAMOS</p>
<h2 style="max-width:16ch;">No improvisamos.</h2> <h2 style="max-width:30ch;">Tu proyecto, paso a paso, <br>y sin sorpresas.</h2>
<p class="lede" style="margin-top:var(--space-3); max-width:80ch;">Un proceso claro y colaborativo → sabés exactamente qué pasa en cada etapa.</p>
<div class="timeline" style="margin-top:var(--space-4);"> <div class="timeline" style="margin-top:var(--space-4);">
<div class="step"><span class="num">01</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Diagnóstico</h4></div> <div class="step"><span class="num">01</span><h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Diagnóstico</h4>
<div class="step"><span class="num">02</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Estrategia</h4></div> <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Reunión donde entendemos <br>tu proyecto</p></div>
<div class="step"><span class="num">03</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Producción</h4></div> <div class="step"><span class="num">02</span><h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Estrategia</h4>
<div class="step"><span class="num">04</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Validación</h4></div> <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Plan de trabajo <br>a medida</p></div>
<div class="step"><span class="num">05</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Medición</h4></div> <div class="step"><span class="num">03</span><h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Producción</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Dirección de arte <br>y desarrollo</p></div>
<div class="step"><span class="num">04</span><h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Validación</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Ajustes finales <br>y entregas</p></div>
<div class="step"><span class="num">05</span><h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Medición</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Capacitación <br>y medición de métricas</p></div>
</div> </div>
<div style="margin-top:var(--space-4);"> <div style="margin-top:var(--space-4);">
<a href="metodo.html" class="btn btn-ghost">Conocé nuestro método →</a> <a href="metodo.html" class="btn btn-ghost">Conocé nuestro método →</a>
js/diagnostico.js
+39 -4
View File
@@ -194,10 +194,10 @@
resultBox.innerHTML = ` resultBox.innerHTML = `
<p class="eyebrow">Nuestra recomendación</p> <p class="eyebrow">Nuestra recomendación</p>
<h3>Te conviene priorizar: ${solucion}</h3> <h4>Te conviene priorizar: ${solucion}</h4>
<p class="lede">Situación actual: negocio en etapa "${etapaLabel(state.etapa)}", con una presencia digital ${madurezLabel(state.madurez)}, buscando ${objetivoLabel(state.objetivo)}.</p> <p font-body; <p style="margin-top:1rem;">Situación actual: negocio en etapa "${etapaLabel(state.etapa)}", con una presencia digital ${madurezLabel(state.madurez)}, buscando ${objetivoLabel(state.objetivo)}.</p>
<p style="margin-top:1rem;"><strong>Próximo paso recomendado:</strong> ${planLabels[plan]} ${state.planPrevio ? "— ya veníamos conversando sobre este plan" : ""}.</p> <p style="margin-top:0.5rem;"><strong>Próximo paso recomendado:</strong> ${planLabels[plan]} ${state.planPrevio ? "— ya veníamos conversando sobre este plan" : ""}.</p>
<p style="margin-top:0.4rem; color:var(--text-soft); font-size:0.9rem;">Esto es una orientación inicial, no un diagnóstico definitivo — lo afinamos juntos en una conversación.</p> <p style="margin-top:1rem; color:var(--text-soft); font-size:0.8rem;">Esto es una orientación inicial, no un diagnóstico definitivo, lo afinamos juntos en una conversación.</p>
`; `;
resultBox.hidden = false; resultBox.hidden = false;
captureBox.hidden = false; captureBox.hidden = false;
@@ -206,6 +206,41 @@
resultBox.scrollIntoView({ behavior: "smooth", block: "start" }); resultBox.scrollIntoView({ behavior: "smooth", block: "start" });
} }
function showReview() {
// Oculta resultado y captura
resultBox.hidden = true;
captureBox.hidden = true;
// Muestra todos los pasos
steps.forEach((s) => {
s.classList.add("active");
// Marca la opción seleccionada en cada paso
const field = s.dataset.step;
if (state[field]) {
s.querySelectorAll(".diag-option").forEach((btn) => {
const isSelected = btn.dataset.value === state[field];
btn.setAttribute("aria-pressed", isSelected ? "true" : "false");
if (isSelected) btn.style.outline = "2px solid var(--accent, #c9a96e)";
});
}
});
// Oculta progreso y muestra botón para volver al resultado
progressWrap.style.display = "none";
const backToResult = document.createElement("button");
backToResult.type = "button";
backToResult.className = "btn-secondary";
backToResult.textContent = "← Volver al resultado";
backToResult.addEventListener("click", () => {
progressWrap.style.display = "flex";
steps.forEach((s) => s.classList.remove("active"));
resultBox.hidden = false;
captureBox.hidden = false;
backToResult.remove();
});
form.appendChild(backToResult);
}
function etapaLabel(v) { function etapaLabel(v) {
return { comenzando: "recién empezando", validando: "validando", creciendo: "en crecimiento", consolidado: "consolidado" }[v] || "sin definir"; return { comenzando: "recién empezando", validando: "validando", creciendo: "en crecimiento", consolidado: "consolidado" }[v] || "sin definir";
} }
metodo.html
+10 -10
View File
@@ -54,8 +54,8 @@
<section class="section-tight"> <section class="section-tight">
<div class="container"> <div class="container">
<p class="eyebrow">Método</p> <p class="eyebrow">MÉTODO</p>
<h1 style="font-size:var(--step-3); max-width:20ch;">No empezamos diseñando. Empezamos entendiendo.</h1> <h1 style="font-size:var(--step-4); max-width:20ch;">No empezamos diseñando. Empezamos entendiendo.</h1>
<p class="lede" style="margin-top:1rem;">De la esencia a la estructura: cada proyecto comienza entendiendo el negocio y termina midiendo lo que construimos.</p> <p class="lede" style="margin-top:1rem;">De la esencia a la estructura: cada proyecto comienza entendiendo el negocio y termina midiendo lo que construimos.</p>
</div> </div>
</section> </section>
@@ -65,27 +65,27 @@
<div class="timeline"> <div class="timeline">
<div class="step"> <div class="step">
<span class="num">01</span> <span class="num">01</span>
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Diagnóstico</h4> <h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Diagnóstico</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Briefing a fondo e inmersión de marca. Entendemos negocio, objetivos y contexto.</p> <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Briefing a fondo e inmersión de marca. Entendemos negocio, objetivos y contexto.</p>
</div> </div>
<div class="step"> <div class="step">
<span class="num">02</span> <span class="num">02</span>
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Estrategia</h4> <h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Estrategia</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Definición de pilares y arquitectura del proyecto.</p> <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Definición de pilares y arquitectura del proyecto.</p>
</div> </div>
<div class="step"> <div class="step">
<span class="num">03</span> <span class="num">03</span>
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Producción</h4> <h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Producción</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Creación de piezas visuales, copys y desarrollo web.</p> <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Creación de piezas visuales, copys y desarrollo web.</p>
</div> </div>
<div class="step"> <div class="step">
<span class="num">04</span> <span class="num">04</span>
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Validación</h4> <h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Validación</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Aprobación de grillas o entrega de desarrollo, con feedback estructurado.</p> <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Aprobación de grillas o entrega de desarrollo, con feedback estructurado.</p>
</div> </div>
<div class="step"> <div class="step">
<span class="num">05</span> <span class="num">05</span>
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Medición</h4> <h4 style="font-style:italic; font-size:1.05rem; margin-top:0.4rem;">Medición</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Métricas, análisis y ajustes para el siguiente ciclo.</p> <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Métricas, análisis y ajustes para el siguiente ciclo.</p>
</div> </div>
</div> </div>
@@ -95,7 +95,7 @@
<!-- APLICACIÓN POR SERVICIO --> <!-- APLICACIÓN POR SERVICIO -->
<section style="background:var(--bg-sunken);"> <section style="background:var(--bg-sunken);">
<div class="container"> <div class="container">
<p class="eyebrow">Aplicación según servicio</p> <p class="eyebrow">APLICACIÓN SEGÚN SERVICIO</p>
<h2 style="max-width:18ch;">El mismo método, distinto ritmo.</h2> <h2 style="max-width:18ch;">El mismo método, distinto ritmo.</h2>
<div class="portfolio-filters" style="margin-top:var(--space-3);" id="metodo-selector"> <div class="portfolio-filters" style="margin-top:var(--space-3);" id="metodo-selector">
<button class="pill" data-service="branding" data-active="true">Branding</button> <button class="pill" data-service="branding" data-active="true">Branding</button>
@@ -116,8 +116,8 @@
<section> <section>
<div class="container"> <div class="container">
<p class="eyebrow">Control de calidad</p> <p class="eyebrow">CONTROL DE CALIDAD</p>
<h2 style="max-width:16ch;">Cada entrega pasa por un mismo estándar.</h2> <h2 style="max-width:20ch;">Cada entrega pasa por un mismo estándar.</h2>
<p class="lede" style="margin-top:1rem;">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.</p> <p class="lede" style="margin-top:1rem;">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.</p>
</div> </div>
</section> </section>
nosotros.html
+6 -6
View File
@@ -54,8 +54,8 @@
<section class="section-tight"> <section class="section-tight">
<div class="container"> <div class="container">
<p class="eyebrow">Nosotros</p> <p class="eyebrow">NOSOTROS</p>
<h1 style="font-size:var(--step-3); max-width:20ch;">Amor y Roma. Dos fuerzas. Una forma de construir.</h1> <h1 style="font-size:var(--step-4); max-width:25ch;">Amor y Roma. <br>Dos fuerzas. <br>Una forma de construir.</h1>
</div> </div>
</section> </section>
@@ -81,8 +81,8 @@
<section style="background:var(--bg-sunken);"> <section style="background:var(--bg-sunken);">
<div class="container"> <div class="container">
<p class="eyebrow">Posicionamiento</p> <p class="eyebrow">POSICIONAMIENTO</p>
<h2 style="max-width:14ch;">Boutique, en serio.</h2> <h2 style="max-width:14ch;">Boutique significa a tu medida.</h2>
<div class="grid grid-3" style="margin-top:var(--space-4);"> <div class="grid grid-3" style="margin-top:var(--space-4);">
<div class="card"> <div class="card">
<h4 style="font-size:1.05rem;">Sin plantillas prefabricadas</h4> <h4 style="font-size:1.05rem;">Sin plantillas prefabricadas</h4>
@@ -102,8 +102,8 @@
<section> <section>
<div class="container"> <div class="container">
<p class="eyebrow">El equipo</p> <p class="eyebrow">EL EQUIPO</p>
<h2 style="max-width:16ch;">Las personas detrás de cada proyecto.</h2> <h2 style="max-width:30ch;">Combinamos el arte del Marketing <br>con la Ciencia de los datos.</h2>
<div class="grid grid-4" style="margin-top:var(--space-4);"> <div class="grid grid-4" style="margin-top:var(--space-4);">
<div class="team-slot">Foto pendiente<br>Nombre · Rol</div> <div class="team-slot">Foto pendiente<br>Nombre · Rol</div>
<div class="team-slot">Foto pendiente<br>Nombre · Rol</div> <div class="team-slot">Foto pendiente<br>Nombre · Rol</div>
planes.html
+2 -2
View File
@@ -54,8 +54,8 @@
<section class="section-tight"> <section class="section-tight">
<div class="container"> <div class="container">
<p class="eyebrow">Planes recurrentes</p> <p class="eyebrow">PLANES RECURRENTES</p>
<h1 style="font-size:var(--step-3); max-width:20ch;">Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.</h1> <h1 style="font-size:var(--step-4); max-width:20ch;">Distintos negocios. Distintas etapas. <br>Un mismo objetivo: crecer.</h1>
<p class="lede" style="margin-top:1rem;">Los cuatro planes acompañan diferentes niveles de madurez. Hacé clic en una tarjeta para ver el detalle completo.</p> <p class="lede" style="margin-top:1rem;">Los cuatro planes acompañan diferentes niveles de madurez. Hacé clic en una tarjeta para ver el detalle completo.</p>
<p style="margin-top:0.6rem; font-size:0.82rem; color:var(--text-soft);">* Precios de referencia (placeholder) — a confirmar antes de publicar.</p> <p style="margin-top:0.6rem; font-size:0.82rem; color:var(--text-soft);">* Precios de referencia (placeholder) — a confirmar antes de publicar.</p>
</div> </div>
portfolio.html
+3 -3
View File
@@ -54,9 +54,9 @@
<section class="section-tight"> <section class="section-tight">
<div class="container"> <div class="container">
<p class="eyebrow">Portfolio</p> <p class="eyebrow">PORTFOLIO</p>
<h1 style="font-size:var(--step-3); max-width:20ch;">Proyectos que combinan identidad, estrategia y estructura.</h1> <h1 style="font-size:var(--step-4); max-width:20ch;">Proyectos que combinan identidad, estrategia y estructura.</h1>
<p class="lede" style="margin-top:1rem;">Estos casos son placeholders representativos de nuestros cuatro arquetipos de trabajo — se reemplazan por proyectos reales antes de publicar.</p> <p class="lede" style="margin-top:1rem;">Estos casos son placeholders representativos de nuestros cuatro arquetipos de trabajo → se reemplazan por proyectos reales antes de publicar.</p>
</div> </div>
</section> </section>
servicios.html
+14 -14
View File
@@ -54,8 +54,8 @@
<section class="section-tight"> <section class="section-tight">
<div class="container"> <div class="container">
<p class="eyebrow">Servicios</p> <p class="eyebrow">SERVICIOS</p>
<h1 style="font-size:var(--step-3); max-width:22ch;">Soluciones digitales diseñadas para hacer crecer tu marca.</h1> <h1 style="font-size:var(--step-4); max-width:20ch;">Soluciones digitales diseñadas para hacer crecer tu marca.</h1>
<p class="lede" style="margin-top:1rem;">No vendemos piezas sueltas: cada servicio resuelve un problema concreto de tu negocio, y puede combinarse con otros según tu etapa.</p> <p class="lede" style="margin-top:1rem;">No vendemos piezas sueltas: cada servicio resuelve un problema concreto de tu negocio, y puede combinarse con otros según tu etapa.</p>
<a href="diagnostico.html" class="btn btn-primary" style="margin-top:1.5rem;">Encontrá tu solución</a> <a href="diagnostico.html" class="btn btn-primary" style="margin-top:1.5rem;">Encontrá tu solución</a>
</div> </div>
@@ -67,7 +67,7 @@
<h3>¿Qué necesita hoy tu negocio?</h3> <h3>¿Qué necesita hoy tu negocio?</h3>
<div class="grid grid-4" style="margin-top:var(--space-3);"> <div class="grid grid-4" style="margin-top:var(--space-3);">
<a href="diagnostico.html?interes=marca" class="card" style="text-align:center;">Construir una marca</a> <a href="diagnostico.html?interes=marca" class="card" style="text-align:center;">Construir una marca</a>
<a href="diagnostico.html?interes=presencia" class="card" style="text-align:center;">Mejorar mi presencia digital</a> <a href="diagnostico.html?interes=presencia" class="card" style="text-align:center;">Mejorar presencia digital</a>
<a href="diagnostico.html?interes=contenido" class="card" style="text-align:center;">Generar contenido</a> <a href="diagnostico.html?interes=contenido" class="card" style="text-align:center;">Generar contenido</a>
<a href="diagnostico.html?interes=web" class="card" style="text-align:center;">Crear una web</a> <a href="diagnostico.html?interes=web" class="card" style="text-align:center;">Crear una web</a>
<a href="diagnostico.html?interes=captacion" class="card" style="text-align:center;">Conseguir clientes</a> <a href="diagnostico.html?interes=captacion" class="card" style="text-align:center;">Conseguir clientes</a>
@@ -82,7 +82,7 @@
<div class="container"> <div class="container">
<div class="grid grid-2" style="align-items:center;"> <div class="grid grid-2" style="align-items:center;">
<div> <div>
<p class="eyebrow">01 · Branding &amp; Identidad</p> <p class="eyebrow">01 · BRANDING &amp; IDENTIDAD</p>
<h2 style="max-width:16ch;">La esencia visual y conceptual de tu marca.</h2> <h2 style="max-width:16ch;">La esencia visual y conceptual de tu marca.</h2>
<p class="lede" style="margin-top:1rem;">Diagnóstico de marca, propuesta de valor, personalidad y todo el sistema de identidad que sostiene tu comunicación.</p> <p class="lede" style="margin-top:1rem;">Diagnóstico de marca, propuesta de valor, personalidad y todo el sistema de identidad que sostiene tu comunicación.</p>
<a href="diagnostico.html?interes=marca" class="btn btn-primary" style="margin-top:1.5rem;">Construir mi marca</a> <a href="diagnostico.html?interes=marca" class="btn btn-primary" style="margin-top:1.5rem;">Construir mi marca</a>
@@ -116,7 +116,7 @@
<li class="card">Paid Media según plan</li> <li class="card">Paid Media según plan</li>
</ul> </ul>
<div style="order:1;"> <div style="order:1;">
<p class="eyebrow">02 · Redes Sociales &amp; Contenido</p> <p class="eyebrow">02 · REDES SOCIALES &amp; CONTENIDO</p>
<h2 style="max-width:16ch;">Contenido con criterio, no solo calendario.</h2> <h2 style="max-width:16ch;">Contenido con criterio, no solo calendario.</h2>
<p class="lede" style="margin-top:1rem;">Estrategia, dirección de arte y gestión pensadas para generar comunidad real, no solo publicaciones.</p> <p class="lede" style="margin-top:1rem;">Estrategia, dirección de arte y gestión pensadas para generar comunidad real, no solo publicaciones.</p>
<a href="planes.html" class="btn btn-primary" style="margin-top:1.5rem;">Ver planes</a> <a href="planes.html" class="btn btn-primary" style="margin-top:1.5rem;">Ver planes</a>
@@ -128,8 +128,8 @@
<!-- WEB --> <!-- WEB -->
<section id="web"> <section id="web">
<div class="container"> <div class="container">
<p class="eyebrow">03 · Desarrollo Web</p> <p class="eyebrow">03 · DESARROLLO WEB</p>
<h2 style="max-width:20ch;">Activos digitales construidos alrededor de tu embudo.</h2> <h2 style="max-width:25ch;">Activos digitales construidos alrededor de tu embudo.</h2>
<div class="grid grid-3" style="margin-top:var(--space-4);"> <div class="grid grid-3" style="margin-top:var(--space-4);">
<div class="card"> <div class="card">
<h4 style="font-size:1.05rem;">Landing Pages</h4> <h4 style="font-size:1.05rem;">Landing Pages</h4>
@@ -152,14 +152,14 @@
<!-- AUTOMATIZACIONES --> <!-- AUTOMATIZACIONES -->
<section id="automatizaciones" style="background:var(--bg-sunken);"> <section id="automatizaciones" style="background:var(--bg-sunken);">
<div class="container"> <div class="container">
<p class="eyebrow">04 · Automatizaciones</p> <p class="eyebrow">04 · AUTOMATIZACIONES</p>
<h2 style="max-width:18ch;">De la conversación a la venta, sin perder oportunidades.</h2> <h2 style="max-width:18ch;">De la conversación a la venta, sin perder oportunidades.</h2>
<div class="timeline" style="margin-top:var(--space-4); grid-template-columns:repeat(5,1fr) !important;"> <div class="timeline" style="margin-top:var(--space-4); grid-template-columns:repeat(5,1fr) !important;">
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Interacción</h4></div> <div class="step"><h4 style="font-style:italicl; font-size:1rem;">Interacción</h4></div>
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Cualificación</h4></div> <div class="step"><h4 style="font-style:italic; font-size:1rem;">Cualificación</h4></div>
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Lead</h4></div> <div class="step"><h4 style="font-style:italic; font-size:1rem;">Lead</h4></div>
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Notificación</h4></div> <div class="step"><h4 style="font-style:italic; font-size:1rem;">Notificación</h4></div>
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Seguimiento</h4></div> <div class="step"><h4 style="font-style:italic; font-size:1rem;">Seguimiento</h4></div>
</div> </div>
<p style="margin-top:var(--space-3); color:var(--text-soft); font-size:0.92rem;">Instagram · Facebook · WhatsApp · captación · cualificación · notificaciones internas.</p> <p style="margin-top:var(--space-3); color:var(--text-soft); font-size:0.92rem;">Instagram · Facebook · WhatsApp · captación · cualificación · notificaciones internas.</p>
<a href="diagnostico.html?interes=automatizacion" class="btn btn-primary" style="margin-top:1.5rem;">Quiero automatizar</a> <a href="diagnostico.html?interes=automatizacion" class="btn btn-primary" style="margin-top:1.5rem;">Quiero automatizar</a>
@@ -169,7 +169,7 @@
<!-- PAID MEDIA --> <!-- PAID MEDIA -->
<section id="paid-media"> <section id="paid-media">
<div class="container"> <div class="container">
<p class="eyebrow">05 · Paid Media</p> <p class="eyebrow">05 · PAID MEDIA</p>
<h2 style="max-width:18ch;">Publicidad que se optimiza, no que se apaga.</h2> <h2 style="max-width:18ch;">Publicidad que se optimiza, no que se apaga.</h2>
<p class="lede" style="margin-top:1rem;">Auditoría, definición de públicos, conversiones, creatividades, testing y optimización continua.</p> <p class="lede" style="margin-top:1rem;">Auditoría, definición de públicos, conversiones, creatividades, testing y optimización continua.</p>
<p style="margin-top:0.8rem; color:var(--text-soft); font-size:0.85rem;">La inversión publicitaria (Meta Ads, Google Ads) corre por cuenta del cliente; nuestros honorarios cubren estrategia, configuración, creatividades y optimización.</p> <p style="margin-top:0.8rem; color:var(--text-soft); font-size:0.85rem;">La inversión publicitaria (Meta Ads, Google Ads) corre por cuenta del cliente; nuestros honorarios cubren estrategia, configuración, creatividades y optimización.</p>