new_amoryroma/index.html

<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amor y Roma — Agencia boutique de marketing digital</title>
<meta name="description" content="Creatividad, estrategia y tecnología para construir marcas que importan. Agencia boutique de marketing digital.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<div id="header-placeholder"></div>


<main>

  <!-- HERO -->
  <section class="hero">
     <div class="container">
      <div class="hero-copy">
        <p class="eyebrow">ESTUDIO CREATIVO · AGENCIA BOUTIQUE</p>
        <h1>Marcas con <span class="grad-word">esencia,</span>
        construidas con <span class="grad-word">estrategia.</span></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>
        </div>
      </div>
    </div>
  </section>

  <!-- AMOR + ROMA -->
  <section class="section-tight">
    <div class="container">
      <p class="eyebrow">EL CONCEPTO</p>
      <h2 style="max-width:30ch;">Dos fuerzas.<br> Una forma de construir.</h2>
      
      <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: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>
        <div class="card"><p>"Necesito una web que realmente venda."</p></div>
        <div class="card"><p>"Estoy perdiendo oportunidades por procesos manuales."</p></div>
        <div class="card"><p>"Necesito atraer clientes con publicidad."</p></div>
        <div class="card"><p>"Mi negocio creció y mi presencia digital quedó atrás."</p></div>
      </div>
      <div style="margin-top:var(--space-4);">
        <a href="diagnostico.html" class="btn btn-primary">Quiero descubrir qué necesito</a>
      </div>
    </div>
  </section>

  <!-- ECOSISTEMA DE SERVICIOS -->
  <section class="section-tight"></section>
    <div class="container">
      <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>
          <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>
          <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>
          <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>
          <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>
          <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>
      </div>
      <div style="margin-top:var(--space-4);">
        <a href="servicios.html" class="btn btn-primary">Explorar servicios</a>
      </div>
    </div>
  </section>

  <!-- PLANES -->
  <section>
    <div class="container">
      <p class="eyebrow">PLANES DE CRECIMIENTO</p>
      <h2 style="max-width:60ch;">Cada proyecto es único.<br> Adaptamos nuestros planes a tus objetivos.</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;">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 ★ </p></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>
        <a href="diagnostico.html" class="btn btn-ghost">No sé cuál necesito →</a>
      </div>
    </div>
  </section>

  <!-- PORTFOLIO DESTACADO -->
  <section class="section-tight"></section>
    <div class="container">
      <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>
          <div class="body">
            <h4 style="font-size:1.05rem;">Identidad Integral</h4>
            <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Branding + personaje de marca + gestión de RRSS.</p>
          </div>
        </div>
        <div class="case-card">
          <div class="thumb">Infraestructura Institucional · placeholder</div>
          <div class="body">
            <h4 style="font-size:1.05rem;">Infraestructura Institucional</h4>
            <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Web corporativa B2B, credibilidad y solidez.</p>
          </div>
        </div>
        <div class="case-card">
          <div class="thumb">Ecosistema Digital · placeholder</div>
          <div class="body">
            <h4 style="font-size:1.05rem;">Ecosistema Digital</h4>
            <p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Branding + Web + Redes, integrados desde cero.</p>
          </div>
        </div>
      </div>
      <div style="margin-top:var(--space-4);">
        <a href="portfolio.html" class="btn btn-secondary">Ver portfolio completo</a>
      </div>
    </div>
  </section>

  <!-- MÉTODO -->
  <section>
    <div class="container">
      <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: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-secondary">Conocé nuestro método →</a>
      </div>
    </div>
  </section>

<!-- CTA FINAL -->
<section style="background: var(--c-plum-2); color:var(--c-mist);">
  <div class="container" style="text-align:center;">
    <h2 style="max-width:20ch; margin-inline:auto; color:var(--c-mist);">Tu próximo tiene que ser estratégico.</h2>
    <div class="btn-row" style="justify-content:center; margin-top:var(--space-3);">
      <a href="contacto.html" class="btn btn-primary">Hablar con Amor &amp; Roma</a>
    </div>
  </div>
</section>

</main>

<div id="footer-placeholder"></div>

<a class="whatsapp-float" href="https://wa.me/5493886118304" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
  <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
</a>

<script src="js/main.js"></script>
<script src="js/hero-canvas.js"></script>
</body>
</html>