ayr2026/servicios.html

<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Servicios de Amor y Roma: gestión de redes, branding, desarrollo web, automatizaciones y paid media.">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
  <title>Servicios - Amor y Roma</title>
  <link rel="stylesheet" href="style/main.css">
  <link rel="stylesheet" href="style/servicios.css">
</head>
<body>
  <div id="menu-container"></div>

  <main>
    <!-- Sección 1: Hero -->
    <section id="servicios-hero" class="servicios-hero">
      <div class="servicios-hero-content">
        <span class="servicios-hero-tag">Nuestros servicios</span>
        <h1 class="servicios-hero-title">Soluciones a medida para cada etapa de tu marca</h1>
        <p class="servicios-hero-subtitle">Combinamos estrategia, diseño y tecnología para construir marcas con esencia y estructura.</p>
        <a href="#servicios-selector" class="btn btn-primary servicios-hero-cta">Explorar servicios</a>
      </div>
    </section>

    <!-- Sección 2: Selector de servicios -->
    <section id="servicios-selector" class="servicios-selector-section">
      <div class="servicios-selector-container">
        <!-- Tabs desktop -->
        <div class="servicios-tabs" role="tablist" aria-label="Selector de servicios">
          <button class="servicio-tab active" role="tab" aria-selected="true" aria-controls="panel-redes" data-servicio="redes">
            <span class="tab-icon icon-redes" aria-hidden="true"></span>
            <span class="tab-label">Gestión de Redes</span>
          </button>
          <button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-branding" data-servicio="branding">
            <span class="tab-icon icon-branding" aria-hidden="true"></span>
            <span class="tab-label">Branding</span>
          </button>
          <button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-web" data-servicio="web">
            <span class="tab-icon icon-web" aria-hidden="true"></span>
            <span class="tab-label">Desarrollo Web</span>
          </button>
          <button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-automatizaciones" data-servicio="automatizaciones">
            <span class="tab-icon icon-automatizaciones" aria-hidden="true"></span>
            <span class="tab-label">Automatizaciones</span>
          </button>
          <button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-paid" data-servicio="paid">
            <span class="tab-icon icon-paid" aria-hidden="true"></span>
            <span class="tab-label">Paid Media</span>
          </button>
        </div>

        <!-- Pills mobile (scroll horizontal) -->
        <div class="servicios-pills" role="tablist" aria-label="Selector de servicios mobile">
          <button class="servicio-pill active" role="tab" aria-selected="true" aria-controls="panel-redes" data-servicio="redes">
            <span class="pill-icon icon-redes" aria-hidden="true"></span>
            <span>Redes</span>
          </button>
          <button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-branding" data-servicio="branding">
            <span class="pill-icon icon-branding" aria-hidden="true"></span>
            <span>Branding</span>
          </button>
          <button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-web" data-servicio="web">
            <span class="pill-icon icon-web" aria-hidden="true"></span>
            <span>Web</span>
          </button>
          <button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-automatizaciones" data-servicio="automatizaciones">
            <span class="pill-icon icon-automatizaciones" aria-hidden="true"></span>
            <span>Automatizaciones</span>
          </button>
          <button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-paid" data-servicio="paid">
            <span class="pill-icon icon-paid" aria-hidden="true"></span>
            <span>Paid Media</span>
          </button>
        </div>
      </div>
    </section>

    <!-- Sección 3: Panel de contenido dinámico -->
    <section id="servicios-panel" class="servicios-panel-section">
      <div class="servicios-panel-container">
        
        <!-- Panel: Gestión de Redes Sociales -->
        <div class="servicio-panel active" id="panel-redes" role="tabpanel" data-servicio="redes">
          <div class="panel-icono-decorativo">
            <span class="decorativo-icon icon-redes-deco" aria-hidden="true"></span>
          </div>
          <div class="panel-header">
            <span class="panel-categoria">Servicio Recurrente</span>
            <h2 class="panel-titulo">Gestión de Redes Sociales</h2>
            <p class="panel-subtitulo">Contenido, estrategia y comunidad para marcas que quieren crecer con presencia digital constante.</p>
          </div>
          <div class="panel-body">
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Objetivo</h3>
              <p class="panel-texto">Construir una comunidad activa y fiel alrededor de tu marca mediante contenido de valor, storytelling visual y dirección creativa personalizada.</p>
            </div>
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Alcance</h3>
              <ul class="panel-lista">
                <li>Grilla temática mensual personalizada</li>
                <li>Diseño gráfico y dirección de arte</li>
                <li>Copywriting persuasivo</li>
                <li>Producción de Reels y TikToks</li>
                <li>Moderación de comunidad</li>
                <li>Reportes mensuales con métricas clave</li>
              </ul>
            </div>
          </div>
          <div class="panel-footer">
            <div class="panel-precio">
              <span class="precio-label">Desde</span>
              <span class="precio-valor">$250.000<span class="precio-periodo">/mes</span></span>
            </div>
            <a href="contacto.html?servicio=redes" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
          </div>
        </div>

        <!-- Panel: Branding -->
        <div class="servicio-panel" id="panel-branding" role="tabpanel" data-servicio="branding">
          <div class="panel-icono-decorativo">
            <span class="decorativo-icon icon-branding-deco" aria-hidden="true"></span>
          </div>
          <div class="panel-header">
            <span class="panel-categoria">Proyecto One-Off</span>
            <h2 class="panel-titulo">Branding & Identidad de Marca</h2>
            <p class="panel-subtitulo">Construimos la esencia visual y estratégica de tu marca desde cero o mediante un rediseño integral.</p>
          </div>
          <div class="panel-body">
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Objetivo</h3>
              <p class="panel-texto">Definir el ADN de tu marca: su personalidad, arquetipo, voz y universo visual para que comunique con coherencia en todos los puntos de contacto.</p>
            </div>
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Entregables</h3>
              <ul class="panel-lista">
                <li>Diagnóstico de marca y propuesta de valor</li>
                <li>Diseño de logotipo, isotipo y variantes</li>
                <li>Paleta cromática y sistema tipográfico</li>
                <li>Personaje/mascota de marca (opcional)</li>
                <li>Manual de Identidad Visual completo</li>
                <li>Kit de plantillas para redes y papelería</li>
              </ul>
            </div>
          </div>
          <div class="panel-footer">
            <div class="panel-precio">
              <span class="precio-label">Desde</span>
              <span class="precio-valor">$450.000<span class="precio-periodo">/proyecto</span></span>
            </div>
            <a href="contacto.html?servicio=branding" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
          </div>
        </div>

        <!-- Panel: Desarrollo Web -->
        <div class="servicio-panel" id="panel-web" role="tabpanel" data-servicio="web">
          <div class="panel-icono-decorativo">
            <span class="decorativo-icon icon-web-deco" aria-hidden="true"></span>
          </div>
          <div class="panel-header">
            <span class="panel-categoria">Proyecto One-Off</span>
            <h2 class="panel-titulo">Desarrollo Web a Medida</h2>
            <p class="panel-subtitulo">Sitios rápidos, seguros y diseñados específicamente para tu embudo de ventas. Cero plantillas prefabricadas.</p>
          </div>
          <div class="panel-body">
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Objetivo</h3>
              <p class="panel-texto">Construir activos digitales propios que transmitan credibilidad, conviertan visitantes en clientes y escalen con tu negocio.</p>
            </div>
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Modalidades</h3>
              <ul class="panel-lista">
                <li>Landing Page de alta conversión</li>
                <li>Sitio Web Institucional / Corporativo</li>
                <li>Catálogo Digital / E-commerce</li>
                <li>Optimización SEO técnico on-page</li>
                <li>Integración con Analytics y Meta Pixel</li>
                <li>WhatsApp API y canales de contacto</li>
              </ul>
            </div>
          </div>
          <div class="panel-footer">
            <div class="panel-precio">
              <span class="precio-label">Desde</span>
              <span class="precio-valor">$380.000<span class="precio-periodo">/proyecto</span></span>
            </div>
            <a href="contacto.html?servicio=web" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
          </div>
        </div>

        <!-- Panel: Automatizaciones -->
        <div class="servicio-panel" id="panel-automatizaciones" role="tabpanel" data-servicio="automatizaciones">
          <div class="panel-icono-decorativo">
            <span class="decorativo-icon icon-automatizaciones-deco" aria-hidden="true"></span>
          </div>
          <div class="panel-header">
            <span class="panel-categoria">Proyecto One-Off</span>
            <h2 class="panel-titulo">Automatizaciones de Conversación</h2>
            <p class="panel-subtitulo">Convertí el tráfico orgánico en prospectos calificados sin demandar tiempo manual de tu equipo.</p>
          </div>
          <div class="panel-body">
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Objetivo</h3>
              <p class="panel-texto">Implementar flujos inteligentes que respondan, cualifiquen y deriven leads automáticamente en Instagram, Facebook y WhatsApp.</p>
            </div>
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Alcance</h3>
              <ul class="panel-lista">
                <li>Flujos de respuesta por palabras clave</li>
                <li>Rutas de cualificación de prospectos</li>
                <li>Recolección automática de datos (nombre, mail, teléfono)</li>
                <li>Notificaciones al equipo comercial</li>
                <li>Integración con CRM o base de datos</li>
                <li>Automatizaciones multi-paso avanzadas</li>
              </ul>
            </div>
          </div>
          <div class="panel-footer">
            <div class="panel-precio">
              <span class="precio-label">Desde</span>
              <span class="precio-valor">$180.000<span class="precio-periodo">/proyecto</span></span>
            </div>
            <a href="contacto.html?servicio=automatizaciones" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
          </div>
        </div>

        <!-- Panel: Paid Media -->
        <div class="servicio-panel" id="panel-paid" role="tabpanel" data-servicio="paid">
          <div class="panel-icono-decorativo">
            <span class="decorativo-icon icon-paid-deco" aria-hidden="true"></span>
          </div>
          <div class="panel-header">
            <span class="panel-categoria">Proyecto Especial</span>
            <h2 class="panel-titulo">Trafficker & Paid Media</h2>
            <p class="panel-subtitulo">Amplificación estratégica de mensajes para campañas, lanzamientos o temporadas comerciales específicas.</p>
          </div>
          <div class="panel-body">
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Objetivo</h3>
              <p class="panel-texto">Maximizar el retorno de tu inversión publicitaria mediante campañas segmentadas, creatividades de alto impacto y optimización diaria.</p>
            </div>
            <div class="panel-columna">
              <h3 class="panel-subtitulo-seccion">Alcance</h3>
              <ul class="panel-lista">
                <li>Auditoría técnica de Business Manager</li>
                <li>Configuración de eventos y públicos personalizados</li>
                <li>Creación y testeo A/B de creatividades</li>
                <li>Campañas en Meta Ads y Google Ads</li>
                <li>Monitoreo y optimización diaria de CPA/CPL</li>
                <li>Reportes de rendimiento y recomendaciones</li>
              </ul>
            </div>
          </div>
          <div class="panel-footer">
            <div class="panel-precio">
              <span class="precio-label">Desde</span>
              <span class="precio-valor">$220.000<span class="precio-periodo">/mes</span></span>
            </div>
            <a href="contacto.html?servicio=paid" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
          </div>
        </div>

      </div>
    </section>

    <!-- Sección 4: Separador visual -->
    <section class="servicios-separador"></section>

    <!-- Sección 5: Casos de éxito -->
    <section class="servicios-casos">
      <div class="servicios-casos-container">
        <div class="casos-header">
          <h2 class="casos-titulo">Casos que validan nuestro método</h2>
          <p class="casos-subtitulo">Cuatro arquetipos de solución que hemos construido con clientes reales.</p>
        </div>
        <div class="casos-grid">
          <article class="caso-card">
            <span class="caso-tag">Identidad Integral</span>
            <h3 class="caso-nombre">Construcción de universo de marca</h3>
            <p class="caso-descripcion">Branding completo, personaje propio y administración continua de redes con pauta publicitaria.</p>
          </article>
          <article class="caso-card">
            <span class="caso-tag">Infraestructura B2B</span>
            <h3 class="caso-nombre">Credibilidad institucional</h3>
            <p class="caso-descripcion">Sitio web corporativo a medida para consultora de seguridad, enfocado en transmitir seriedad y confianza.</p>
          </article>
          <article class="caso-card">
            <span class="caso-tag">Ecosistema Digital</span>
            <h3 class="caso-nombre">Solución integral híbrida</h3>
            <p class="caso-descripcion">Branding + Web a medida + Redes sociales. Nuestro servicio insígnia para empresas de tecnología.</p>
          </article>
          <article class="caso-card">
            <span class="caso-tag">Profesionalización</span>
            <h3 class="caso-nombre">Posicionamiento de servicios</h3>
            <p class="caso-descripcion">Web para captar y validar + redes para nutrir. Modelo estándar para pequeñas firmas de servicios.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- Sección 6: CTA Final -->
    <section class="servicios-cta">
      <div class="servicios-cta-card">
        <h2 class="servicios-cta-titulo">¿No sabés cuál servicio necesitás?</h2>
        <p class="servicios-cta-subtitle">Hacé nuestro diagnóstico gratuito y te recomendamos la solución ideal para tu momento.</p>
        <div class="servicios-cta-buttons">
          <a href="inicio.html#diagnostico" class="btn btn-cta-primary">Hacer el diagnóstico</a>
          <a href="contacto.html" class="btn btn-cta-secondary">Hablemos directamente</a>
        </div>
      </div>
    </section>

    <!-- Sección 7: Espacio de cierre -->
    <section class="servicios-cierre"></section>
  </main>

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

  <script src="scripts/main.js"></script>
  <script src="scripts/servicios.js"></script>
</body>
</html>