inicio-servicios finish

inicio.html

@@ -12,16 +12,121 @@
   <div id="menu-container"></div>
 
   <main>
-    <!-- Sección 1 -->
-    <section id="inicio-section-1">
-      <h2>Sección 1</h2>
-      <p>Contenido pendiente de definir.</p>
+    <!-- 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 -->
-    <section id="inicio-section-2">
-      <h2>Sección 2</h2>
-      <p>Contenido pendiente de definir.</p>
+    <!-- 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 -->