textos gral

This commit is contained in:
2026-09-08 07:52:08 -03:00
parent 9b664f0fc2
commit 253203a6e2
12 changed files with 124 additions and 77 deletions
+36 -29
View File
@@ -57,9 +57,10 @@
<canvas id="hero-canvas" aria-hidden="true"></canvas>
<div class="container">
<div class="hero-copy">
<p class="eyebrow">Estudio creativo · marketing digital</p>
<h1>Creatividad, estrategia y tecnología para construir marcas que importan.</h1>
<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>
<p class="eyebrow">ESTUDIO CREATIVO · AGENCIA BOUTIQUE</p>
<h1>Marcas con esencia,
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">
<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>
@@ -71,8 +72,8 @@
<!-- AMOR + ROMA -->
<section class="section-tight">
<div class="container">
<p class="eyebrow">El concepto</p>
<h2 style="max-width:16ch;">Dos fuerzas. Una forma de construir.</h2>
<p class="eyebrow">EL CONCEPTO</p>
<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-col amor">
<h4 style="color:var(--accent-amor);">AMOR</h4>
@@ -93,15 +94,15 @@
</ul>
</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>
</section>
<!-- PROBLEMAS -->
<section>
<div class="container">
<p class="eyebrow">Puntos de partida frecuentes</p>
<h2 style="max-width:20ch;">Desafíos que ayudamos a resolver.</h2>
<p class="eyebrow">PUNTOS DE PARTIDA FRECUENTES</p>
<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="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>
@@ -119,36 +120,36 @@
<!-- ECOSISTEMA DE SERVICIOS -->
<section class="section-tight" style="background:var(--bg-sunken);">
<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>
<div class="grid grid-3" style="margin-top:var(--space-4);">
<article class="service-card">
<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>
<ul><li>Identidad</li><li>Logo</li><li>Sistema visual</li><li>Manual</li></ul>
</article>
<article class="service-card">
<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>
<ul><li>Estrategia</li><li>Contenido</li><li>Copywriting</li><li>Comunidad</li></ul>
</article>
<article class="service-card">
<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>
<ul><li>Arquitectura</li><li>UX</li><li>SEO</li><li>Analítica</li></ul>
</article>
<article class="service-card">
<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>
<ul><li>Conversación</li><li>Captación</li><li>Cualificación</li><li>Seguimiento</li></ul>
</article>
<article class="service-card">
<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>
<ul><li>Campañas</li><li>Creatividades</li><li>Audiencias</li><li>Optimización</li></ul>
</article>
@@ -162,13 +163,13 @@
<!-- PLANES -->
<section>
<div class="container">
<p class="eyebrow">Planes de crecimiento</p>
<h2 style="max-width:20ch;">Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.</h2>
<p class="eyebrow">PLANES DE CRECIMIENTO</p>
<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="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);">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" 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"><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);">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;">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;">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;">Máximo posicionamiento y gestión integral de marca.</p></div>
</div>
<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>
@@ -180,8 +181,8 @@
<!-- PORTFOLIO DESTACADO -->
<section class="section-tight" style="background:var(--bg-sunken);">
<div class="container">
<p class="eyebrow">Trabajo que habla por nosotros</p>
<h2 style="max-width:20ch;">Proyectos que combinan identidad, estrategia y estructura.</h2>
<p class="eyebrow">TRABAJO QUE HABLA POR NOSOTROS</p>
<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="case-card">
<div class="thumb">Identidad Integral · placeholder</div>
@@ -214,14 +215,20 @@
<!-- MÉTODO -->
<section>
<div class="container">
<p class="eyebrow">Cómo trabajamos</p>
<h2 style="max-width:16ch;">No improvisamos.</h2>
<p class="eyebrow">CÓMO TRABAJAMOS</p>
<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="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">02</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Estrategia</h4></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">04</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Validación</h4></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">01</span><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;">Reunión donde entendemos <br>tu proyecto</p></div>
<div class="step"><span class="num">02</span><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;">Plan de trabajo <br>a medida</p></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 style="margin-top:var(--space-4);">
<a href="metodo.html" class="btn btn-ghost">Conocé nuestro método →</a>