ayr2026/inicio.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="">
  <title>Inicio - A&R</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
  <link rel="stylesheet" href="style/main.css">
</head>
<body>
  <div id="menu-container"></div>

  <main>
    <!-- Sección Hero -->
    <section id="hero" class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">Marcas con esencia, construidas con estrategia.</h1>
        <p class="hero-subtitle">Tenemos las disciplinas que los negocios necesitan para crecer sin perder lo que los hace únicos.</p>
        <div class="hero-cta-group">
          <a href="#" class="btn btn-primary hero-cta-primary">Hablemos</a>
          <a href="inicio.html#servicios" class="btn btn-secondary hero-cta-secondary">Conocé más</a>
        </div>
      </div>
    </section>

    <!-- Sección 2: Servicios -->
    <section id="servicios" class="servicios-section">
      <div class="servicios-container">
        <!-- Columna Izquierda: Texto introductorio -->
        <div class="servicios-intro">
          <h2 class="servicios-title">¿Qué necesita hoy tu negocio?</h2>
          <p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
          <a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
        </div>

        <!-- Columna Derecha: Acordeón interactivo -->
        <div class="servicios-accordion" id="servicios-accordion">
          <!-- Item 1 -->
          <div class="servicio-item" data-index="0">
            <div class="servicio-header">
              <img src="assets/iconos/branding.svg" alt="Icono Estrategia" class="servicio-icon">
              <h3 class="servicio-title-short">Construir una marca</h3>
            </div>
            <div class="servicio-content">
              <img src="assets/iconos/branding.svg" alt="Icono Estrategia" class="servicio-icon-large">
              <h3 class="servicio-title-long">Construcción de Identidad Estratégica</h3>
              <p class="servicio-description">Definimos el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.</p>
              <a href="servicios.html#estrategia" class="btn btn-primary">Conocer más</a>
              <button class="servicio-close" aria-label="Cerrar">✕</button>
            </div>
          </div>

          <!-- Item 2 -->
          <div class="servicio-item" data-index="1">
            <div class="servicio-header">
              <img src="assets/iconos/redes_sociales.svg" alt="Icono Redes" class="servicio-icon">
              <h3 class="servicio-title-short">Mejorar presencia digital</h3>
            </div>
            <div class="servicio-content">
              <img src="assets/iconos/redes_sociales.svg" alt="Icono Redes" class="servicio-icon-large">
              <h3 class="servicio-title-long">Comunidades que Convierten</h3>
              <p class="servicio-description">Creamos contenido de valor y gestionamos tus redes para construir una comunidad activa, fiel y comprometida con tu marca.</p>
              <a href="servicios.html#redes" class="btn btn-primary">Conocer más</a>
              <button class="servicio-close" aria-label="Cerrar">✕</button>
            </div>
          </div>

          <!-- Item 3 -->
          <div class="servicio-item" data-index="2">
            <div class="servicio-header">
              <img src="assets/iconos/web.svg" alt="Icono Digital" class="servicio-icon">
              <h3 class="servicio-title-short">Generar Contenido</h3>
            </div>
            <div class="servicio-content">
              <img src="assets/iconos/web.svg" alt="Icono Digital" class="servicio-icon-large">
              <h3 class="servicio-title-long">Experiencias Digitales Impactantes</h3>
              <p class="servicio-description">Diseñamos y desarrollamos sitios web y plataformas digitales que no solo se ven bien, sino que generan resultados tangibles.</p>
              <a href="servicios.html#digital" class="btn btn-primary">Conocer más</a>
              <button class="servicio-close" aria-label="Cerrar">✕</button>
            </div>
          </div>

          <!-- Item 4 -->
          <div class="servicio-item" data-index="3">
            <div class="servicio-header">
              <img src="assets/iconos/automatizaciones.svg" alt="Icono Contenido" class="servicio-icon">
              <h3 class="servicio-title-short">Automatizar procesos</h3>
            </div>
            <div class="servicio-content">
              <img src="assets/iconos/automatizaciones.svg" alt="Icono Contenido" class="servicio-icon-large">
              <h3 class="servicio-title-long">Historias que Enamoran</h3>
              <p class="servicio-description">Producimos contenido audiovisual y gráfico de alta calidad que cuenta la historia de tu marca y cautiva a tu audiencia.</p>
              <a href="servicios.html#contenido" class="btn btn-primary">Conocer más</a>
              <button class="servicio-close" aria-label="Cerrar">✕</button>
            </div>
          </div>

          <!-- Item 5 -->
          <div class="servicio-item" data-index="4">
            <div class="servicio-header">
              <img src="assets/iconos/paid_media.svg" alt="Icono Pauta" class="servicio-icon">
              <h3 class="servicio-title-short">Conseguir más clientes</h3>
            </div>
            <div class="servicio-content">
              <img src="assets/iconos/paid_media.svg" alt="Icono Pauta" class="servicio-icon-large">
              <h3 class="servicio-title-long">Campañas que Escalan Resultados</h3>
              <p class="servicio-description">Gestionamos campañas de paid media en Meta, Google y LinkedIn para maximizar tu ROI y alcanzar a los clientes correctos.</p>
              <a href="servicios.html#pauta" class="btn btn-primary">Conocer más</a>
              <button class="servicio-close" aria-label="Cerrar">✕</button>
            </div>
          </div>

          <!-- Item 6 -->
          <div class="servicio-item" data-index="5">
            <div class="servicio-header">
              <img src="assets/iconos/ad_hoc.svg" alt="Icono Consultoría" class="servicio-icon">
              <h3 class="servicio-title-short">Consultoría de Marketing</h3>
            </div>
            <div class="servicio-content">
              <img src="assets/iconos/ad_hoc.svg" alt="Icono Consultoría" class="servicio-icon-large">
              <h3 class="servicio-title-long">Asesoramiento Estratégico Integral</h3>
              <p class="servicio-description">Te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.</p>
              <a href="servicios.html#consultoria" class="btn btn-primary">Conocer más</a>
              <button class="servicio-close" aria-label="Cerrar">✕</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Sección 3 -->
    <section id="inicio-section-3">
      <h2>Sección 3</h2>
      <p>Contenido pendiente de definir.</p>
    </section>

    <!-- Sección 4 -->
    <section id="inicio-section-4">
      <h2>Sección 4</h2>
      <p>Contenido pendiente de definir.</p>
    </section>

    <!-- Sección 5 -->
    <section id="inicio-section-5">
      <h2>Sección 5</h2>
      <p>Contenido pendiente de definir.</p>
    </section>

    <!-- Sección 6 -->
    <section id="inicio-section-6">
      <h2>Sección 6</h2>
      <p>Contenido pendiente de definir.</p>
    </section>

    <!-- Sección 7 -->
    <section id="inicio-section-7">
      <h2>Sección 7</h2>
      <p>Contenido pendiente de definir.</p>
    </section>
  </main>

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

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