diagnostico medio

inicio.html

@@ -39,11 +39,11 @@
           <!-- 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">
+              <span class="servicio-icon icon-branding" aria-hidden="true"></span>
               <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">
+              <span class="servicio-icon-large icon-branding" aria-hidden="true"></span>
               <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>
@@ -54,11 +54,11 @@
           <!-- 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">
+              <span class="servicio-icon icon-rrss" aria-hidden="true"></span>
               <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">
+              <span class="servicio-icon-large icon-rrss" aria-hidden="true"></span>
               <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>
@@ -69,11 +69,11 @@
           <!-- 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">
+              <span class="servicio-icon icon-web" aria-hidden="true"></span>
               <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">
+              <span class="servicio-icon-large icon-web" aria-hidden="true"></span>
               <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>
@@ -84,11 +84,11 @@
           <!-- 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">
+              <span class="servicio-icon icon-auto" aria-hidden="true"></span>
               <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">
+              <span class="servicio-icon-large icon-auto" aria-hidden="true"></span>
               <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>
@@ -99,11 +99,11 @@
           <!-- 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">
+              <span class="servicio-icon icon-paid" aria-hidden="true"></span>
               <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">
+              <span class="servicio-icon-large icon-paid" aria-hidden="true"></span>
               <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>
@@ -114,11 +114,11 @@
           <!-- 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">
+              <span class="servicio-icon icon-add" aria-hidden="true"></span>
               <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">
+              <span class="servicio-icon-large icon-add" aria-hidden="true"></span>
               <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>
@@ -129,10 +129,37 @@
       </div>
     </section>
 
-    <!-- Sección 3 -->
-    <section id="inicio-section-3">
-      <h2>Sección 3</h2>
-      <p>Contenido pendiente de definir.</p>
+    <!-- Sección 3: Diagnóstico -->
+    <section id="diagnostico" class="diagnostico-section">
+      <div class="diagnostico-header">
+        <h2 class="diagnostico-title">¿Qué necesita hoy tu negocio?</h2>
+        <p class="diagnostico-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
+      </div>
+      
+      <div class="diagnostico-card">
+        <!-- Barra de Progreso -->
+        <div class="progreso-wrapper">
+          <div class="progreso-barra">
+            <div class="progreso-barra-completado" id="progreso-completado"></div>
+          </div>
+          <div class="progreso-texto" id="progreso-texto">Pregunta 1 de 4</div>
+        </div>
+        
+        <!-- Contenedor de Preguntas -->
+        <div id="cuestionario-contenedor">
+          <!-- Las preguntas se generan dinámicamente con JavaScript -->
+        </div>
+        
+        <!-- Botón Reiniciar -->
+        <button class="btn-reiniciar" id="btn-reiniciar">
+          Reiniciar Diagnóstico
+        </button>
+        
+        <!-- Contenedor de Resultados (oculto inicialmente) -->
+        <div id="resultado-contenedor" class="resultado-contenedor" style="display: none;">
+          <!-- El resultado se genera dinámicamente con JavaScript -->
+        </div>
+      </div>
     </section>
 
     <!-- Sección 4 -->