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 -->
+    <!-- Sección 3: Diagnóstico -->
-    <section id="inicio-section-3">
+    <section id="diagnostico" class="diagnostico-section">
-      <h2>Sección 3</h2>
+      <div class="diagnostico-header">
-      <p>Contenido pendiente de definir.</p>
+        <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 -->

scripts/main.js

@@ -185,4 +185,234 @@ document.addEventListener('DOMContentLoaded', async () => {
   if (yearEl) yearEl.textContent = new Date().getFullYear();
 
   initServiciosAccordion();
+});
+
+/* ============================================
+LÓGICA DEL CUESTIONARIO DE DIAGNÓSTICO
+============================================ */
+
+// Datos del cuestionario
+const preguntas = [
+  {
+    id: 1,
+    titulo: "¿En qué etapa se encuentra hoy tu negocio o proyecto?",
+    opciones: [
+      { letra: "A", texto: "Creando el proyecto desde cero o formalizando una idea reciente." },
+      { letra: "B", texto: "Negocio o local activo, pero con una imagen visual que no refleja la calidad de lo que vendo." },
+      { letra: "C", texto: "En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo." },
+      { letra: "D", texto: "Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad." },
+      { letra: "E", texto: "Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing de punta a punta." },
+      { letra: "F", texto: "Emprendimiento personal que gestiono por mi cuenta y donde necesito resolver piezas puntuales." }
+    ]
+  },
+  {
+    id: 2,
+    titulo: "¿Cuál es tu cuello de botella más urgente hoy?",
+    opciones: [
+      { letra: "A", texto: "No tengo logo profesional ni página web; me falta confianza frente a la competencia." },
+      { letra: "B", texto: "No tengo tiempo ni equipo para sacar fotos o grabar videos de buena calidad de mis productos/servicios." },
+      { letra: "C", texto: "Perdemos clientes potenciales porque tardamos horas en responder WhatsApp o mensajes de redes." },
+      { letra: "D", texto: "Dependemos del boca a boca o de publicar en redes sin conseguir ventas constantes ni predecibles." },
+      { letra: "E", texto: "Tenemos acciones aisladas sin una dirección estratégica clara ni medición profesional de métricas." },
+      { letra: "F", texto: "Me faltan herramientas gráficas o plantillas para diseñar mis propias publicaciones sin perder horas." }
+    ]
+  },
+  {
+    id: 3,
+    titulo: "¿Con qué infraestructura digital cuentas actualmente?",
+    opciones: [
+      { letra: "A", texto: "Prácticamente nada formal (solo una idea, perfil personal o logo provisional)." },
+      { letra: "B", texto: "Perfil comercial en redes sociales, pero con fotos caseras tomadas con el celular." },
+      { letra: "C", texto: "Redes y/o tienda activa con alto volumen de mensajes directos diarios sin automatizar." },
+      { letra: "D", texto: "Redes y web en marcha, pero sin campañas activas de publicidad paga (Meta Ads / Google Ads)." },
+      { letra: "E", texto: "Ecosistema activo (redes, web, pauta), pero disperso entre distintos proveedores sin sinergia." },
+      { letra: "F", texto: "Manejo mis propios canales y solo requiero recursos gráficos específicos para seguir operando." }
+    ]
+  },
+  {
+    id: 4,
+    titulo: "¿Qué tipo de solución buscas contratar en Amor y Roma?",
+    opciones: [
+      { letra: "A", texto: "Proyecto inicial integral: crear mi identidad de marca y mi sitio web para salir al mercado." },
+      { letra: "B", texto: "Acompañamiento mensual con sesiones presenciales de fotos/video para no preocuparme del contenido." },
+      { letra: "C", texto: "Implementación tecnológica: automatizaciones inteligentes y asistentes para WhatsApp y redes." },
+      { letra: "D", texto: "Gestión de campañas de publicidad digital y páginas de venta enfocadas 100% en conversión." },
+      { letra: "E", texto: "Gestión integral 360°: estrategia de marca completa, pauta multicanal, redes y dirección creativa." },
+      { letra: "F", texto: "Un entregable puntual (diseño de plantilla, digitalización de logo o sesión única de fotos)." }
+    ]
+  }
+];
+
+// Perfiles de resultado
+const perfiles = {
+  A: {
+    titulo: "Mix Lanzamiento Integral",
+    diagnostico: "Tu proyecto necesita bases sólidas y credibilidad inmediata para competir y generar confianza.",
+    solucion: "Identidad visual completa (Branding) + Diseño Web institucional + Gestión de Redes Sociales (Plan Esencial, $250.000/mes).",
+    cta: "Cotizar Mix Lanzamiento"
+  },
+  B: {
+    titulo: "Mix Comercio & Presencia Visual",
+    diagnostico: "Tu producto o servicio tiene potencial comercial, pero la calidad visual actual en redes te resta ventas.",
+    solucion: "Plan Premium de Redes Sociales ($650.000/mes), que incluye sesión presencial quincenal de fotos y videos profesionales, 8 reels, asistencia con IA y dirección creativa.",
+    cta: "Ver Plan Premium"
+  },
+  C: {
+    titulo: "Solución Eficiencia & Automatización",
+    diagnostico: "Tu principal fuga de dinero es el tiempo de respuesta: consultas demoradas son ventas perdidas.",
+    solucion: "Implementación de Automatizaciones con Asistentes Inteligentes para WhatsApp, Instagram y Facebook + Plan Impulso ($420.000/mes) para ordenar el flujo de mensajes.",
+    cta: "Automatizar mi Atención"
+  },
+  D: {
+    titulo: "Mix Acelerador & Conversión",
+    diagnostico: "Tu marca ya está ordenada visualmente; ahora necesita tráfico calificado y un sistema predecible de atracción de clientes.",
+    solucion: "Servicio de Paid Media (Meta Ads + Google Ads) + Optimización de Landing Page / Catálogo + Creatividades publicitarias de alto impacto.",
+    cta: "Escalar mis Ventas"
+  },
+  E: {
+    titulo: "Servicio Corporativo 360°",
+    diagnostico: "Tu empresa busca liderazgo absoluto de mercado, unificación de imagen y tercerización completa del departamento de marketing.",
+    solucion: "Plan Élite de Redes ($1.000.000/mes) + Branding Integral (packaging, cartelería física) + Pauta multicanal (Meta, TikTok, Google) + Reportes quincenales avanzados con KPIs.",
+    cta: "Agendar Reunión Estratégica"
+  },
+  F: {
+    titulo: "Solución Autogestor / Servicios Puntuales",
+    diagnostico: "Buscas resolver necesidades gráficas puntuales sin comprometerte con un abono mensual recurrente.",
+    solucion: "Paquetes individuales a medida: Digitalización y vectorización de logo, Pack de plantillas editables personalizadas o Producción fotográfica por jornada.",
+    cta: "Elegir Servicios Puntuales"
+  }
+};
+
+// Estado del cuestionario
+let preguntaActual = 0;
+let respuestas = [];
+
+// Función para calcular el perfil
+function calcularPerfil(respuestas) {
+  const conteo = { A: 0, B: 0, C: 0, D: 0, E: 0, F: 0 };
+  
+  respuestas.forEach(r => { 
+    if (conteo[r] !== undefined) conteo[r]++; 
+  });
+
+  // Encontrar la letra con mayor frecuencia
+  let maxVotos = 0;
+  let ganador = respuestas[1]; // Fallback por defecto: pregunta 2 (cuello de botella)
+
+  for (const letra in conteo) {
+    if (conteo[letra] > maxVotos) {
+      maxVotos = conteo[letra];
+      ganador = letra;
+    } else if (conteo[letra] === maxVotos && maxVotos > 0) {
+      // Desempate: priorizar la respuesta de la Pregunta 2
+      if (respuestas[1] === letra) {
+        ganador = letra;
+      }
+    }
+  }
+
+  return ganador;
+}
+
+// Función para renderizar pregunta
+function renderizarPregunta() {
+  const contenedor = document.getElementById('cuestionario-contenedor');
+  const pregunta = preguntas[preguntaActual];
+  
+  contenedor.innerHTML = `
+    <div class="pregunta-contenedor">
+      <h3 class="pregunta-titulo">${pregunta.titulo}</h3>
+      <div class="opciones-contenedor">
+        ${pregunta.opciones.map(opcion => `
+          <button class="opcion-tarjeta" data-letra="${opcion.letra}">
+            ${opcion.texto}
+          </button>
+        `).join('')}
+      </div>
+    </div>
+  `;
+  
+  // Agregar event listeners a las opciones
+  document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => {
+    tarjeta.addEventListener('click', () => seleccionarOpcion(tarjeta.dataset.letra));
+  });
+}
+
+// Función para seleccionar opción
+function seleccionarOpcion(letra) {
+  respuestas[preguntaActual] = letra;
+  
+  // Actualizar barra de progreso
+  const progreso = ((preguntaActual + 1) / preguntas.length) * 100;
+  document.getElementById('progreso-completado').style.width = `${progreso}%`;
+  
+  // Avanzar o mostrar resultado
+  if (preguntaActual < preguntas.length - 1) {
+    preguntaActual++;
+    document.getElementById('progreso-texto').textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`;
+    renderizarPregunta();
+  } else {
+    mostrarResultado();
+  }
+}
+
+// Función para mostrar resultado
+function mostrarResultado() {
+  const perfilLetra = calcularPerfil(respuestas);
+  const perfil = perfiles[perfilLetra];
+  
+  // Ocultar cuestionario y barra de progreso
+  document.getElementById('cuestionario-contenedor').style.display = 'none';
+  document.querySelector('.progreso-barra').style.display = 'none';
+  document.getElementById('progreso-texto').style.display = 'none';
+  document.getElementById('btn-reiniciar').style.display = 'none';
+  
+  // Mostrar resultado
+  const resultadoContenedor = document.getElementById('resultado-contenedor');
+  resultadoContenedor.innerHTML = `
+    <h2 class="resultado-titulo">${perfil.titulo}</h2>
+    <p class="resultado-diagnostico">${perfil.diagnostico}</p>
+    <div class="resultado-solucion">
+      <strong>Solución Amor y Roma:</strong><br>
+      ${perfil.solucion}
+    </div>
+    <button class="resultado-cta">${perfil.cta}</button>
+  `;
+  resultadoContenedor.style.display = 'block';
+  
+  // Event listener al CTA (placeholder por ahora)
+  document.querySelector('.resultado-cta').addEventListener('click', () => {
+    alert('CTA - Por definir acción');
+  });
+}
+
+// Función para reiniciar
+function reiniciarCuestionario() {
+  preguntaActual = 0;
+  respuestas = [];
+  
+  // Resetear barra de progreso
+  document.getElementById('progreso-completado').style.width = '0%';
+  document.getElementById('progreso-texto').textContent = 'Pregunta 1 de 4';
+  
+  // Mostrar elementos
+  document.getElementById('cuestionario-contenedor').style.display = 'block';
+  document.querySelector('.progreso-barra').style.display = 'block';
+  document.getElementById('progreso-texto').style.display = 'block';
+  document.getElementById('btn-reiniciar').style.display = 'inline-flex';
+  document.getElementById('resultado-contenedor').style.display = 'none';
+  
+  // Renderizar primera pregunta
+  renderizarPregunta();
+}
+
+// Inicializar cuestionario al cargar la página
+document.addEventListener('DOMContentLoaded', () => {
+  // Solo inicializar si estamos en la sección de diagnóstico
+  if (document.getElementById('cuestionario-contenedor')) {
+    renderizarPregunta();
+    
+    // Event listener al botón de reiniciar
+    document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario);
+  }
 });

style/main.css

@@ -990,8 +990,42 @@ main section h2 {
   height: 32px;
   object-fit: contain;
   flex-shrink: 0;
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
 }
 
+.icon-branding {
+  -webkit-mask-image: url("../assets/iconos/branding.svg");
+  mask-image: url("../assets/iconos/branding.svg");
+}
+.icon-rrss {
+  -webkit-mask-image: url("../assets/iconos/redes_sociales.svg");
+  mask-image: url("../assets/iconos/redes_sociales.svg");
+}
+.icon-web {
+  -webkit-mask-image: url("../assets/iconos/web.svg");
+  mask-image: url("../assets/iconos/web.svg");
+}
+.icon-auto {
+  -webkit-mask-image: url("../assets/iconos/automatizaciones.svg");
+  mask-image: url("../assets/iconos/automatizaciones.svg");
+}
+.icon-paid {
+  -webkit-mask-image: url("../assets/iconos/paid_media.svg");
+  mask-image: url("../assets/iconos/paid_media.svg");
+}
+.icon-add {
+  -webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
+  mask-image: url("../assets/iconos/ad_hoc.svg");
+}
+/**/
+
 .servicio-title-short {
   font-family: var(--font-title);
   font-style: italic;
@@ -1032,6 +1066,14 @@ main section h2 {
   height: 64px;
   object-fit: contain;
   margin-bottom: var(--spacing-xs);
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
 }
 
 .servicio-title-long {
@@ -1122,4 +1164,269 @@ main section h2 {
     width: 48px;
     height: 48px;
   }
+}
+/* ============================================
+SECCIÓN DIAGNÓSTICO
+============================================ */
+.diagnostico-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+/* Header de la sección (título y subtítulo centrados) */
+.diagnostico-header {
+  text-align: center;
+  max-width: 700px;
+  margin: 0 auto var(--spacing-lg);
+}
+
+.diagnostico-title {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: clamp(2rem, 4vw, 3rem);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm);
+  line-height: 1.15;
+}
+
+.diagnostico-subtitle {
+  font-family: var(--font-body);
+  font-size: 1.1rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+/* Tarjeta contenedora del cuestionario */
+.diagnostico-card {
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: var(--bg-surface);
+  border-radius: 16px;
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+}
+
+/* Wrapper de la barra de progreso */
+.progreso-wrapper {
+  margin-bottom: var(--spacing-md);
+}
+
+/* Barra de Progreso */
+.progreso-barra {
+  width: 100%;
+  height: 8px;
+  background-color: var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: var(--spacing-xs);
+}
+
+.progreso-barra-completado {
+  height: 100%;
+  background-color: var(--btn-primary-bg);
+  width: 0%;
+  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: 4px;
+}
+
+.progreso-texto {
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  text-align: right;
+}
+
+/* Contenedor de Preguntas */
+.pregunta-contenedor {
+  animation: fadeIn 0.4s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pregunta-titulo {
+  font-family: var(--font-subtitle);
+  font-size: 1.35rem;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-md);
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.opciones-contenedor {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-sm);
+}
+
+.opcion-tarjeta {
+  background-color: var(--bg-surface-elevated);
+  border: 2px solid var(--border);
+  border-radius: 12px;
+  padding: var(--spacing-sm);
+  cursor: pointer;
+  transition: all 0.25s ease;
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  text-align: left;
+  width: 100%;
+}
+
+.opcion-tarjeta:hover {
+  border-color: var(--btn-primary-bg);
+  background-color: var(--bg-surface);
+  transform: translateX(4px);
+}
+
+.opcion-tarjeta:active {
+  transform: scale(0.98);
+}
+
+.opcion-tarjeta.seleccionada {
+  border-color: var(--btn-primary-bg);
+  background-color: var(--btn-primary-bg);
+  color: var(--text-on-accent);
+}
+
+/* Botón Reiniciar */
+.btn-reiniciar {
+  background: none;
+  border: 1.5px solid var(--border);
+  color: var(--text-secondary);
+  padding: 0.65rem 1.2rem;
+  border-radius: 24px;
+  cursor: pointer;
+  font-family: var(--font-small);
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-top: var(--spacing-md);
+  transition: all 0.25s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-reiniciar:hover {
+  border-color: var(--btn-primary-bg);
+  color: var(--btn-primary-bg);
+  transform: translateY(-2px);
+}
+
+/* Contenedor de Resultados */
+.resultado-contenedor {
+  animation: fadeIn 0.5s ease;
+  background-color: var(--bg-surface-elevated);
+  border: 2px solid var(--btn-primary-bg);
+  border-radius: 16px;
+  padding: var(--spacing-md);
+  text-align: center;
+}
+
+.resultado-titulo {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  color: var(--btn-primary-bg);
+  margin-bottom: var(--spacing-sm);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.resultado-diagnostico {
+  font-size: 1.05rem;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm);
+  line-height: 1.6;
+}
+
+.resultado-solucion {
+  background-color: var(--bg-surface);
+  border-left: 4px solid var(--btn-primary-bg);
+  padding: var(--spacing-sm);
+  margin: var(--spacing-sm) 0 var(--spacing-md);
+  text-align: left;
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  border-radius: 0 8px 8px 0;
+}
+
+.resultado-cta {
+  background-color: var(--btn-primary-bg);
+  color: var(--text-on-accent);
+  border: none;
+  padding: 0.85rem 2rem;
+  border-radius: 24px;
+  font-family: var(--font-small);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35);
+  display: inline-block;
+}
+
+.resultado-cta:hover {
+  background-color: var(--btn-primary-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px -4px rgba(186, 18, 77, 0.45);
+}
+
+/* ============================================
+RESPONSIVE DIAGNÓSTICO
+============================================ */
+@media (max-width: 768px) {
+  .diagnostico-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  
+  .diagnostico-card {
+    padding: var(--spacing-sm);
+  }
+  
+  .diagnostico-title {
+    font-size: 1.75rem;
+  }
+  
+  .diagnostico-subtitle {
+    font-size: 1rem;
+  }
+  
+  .pregunta-titulo {
+    font-size: 1.15rem;
+  }
+  
+  .opcion-tarjeta {
+    font-size: 0.9rem;
+    padding: var(--spacing-xs);
+  }
+  
+  .resultado-titulo {
+    font-size: 1.4rem;
+  }
+  
+  .resultado-solucion {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .diagnostico-card {
+    padding: var(--spacing-sm);
+    border-radius: 12px;
+  }
+  
+  .opcion-tarjeta {
+    padding: var(--spacing-xs);
+    font-size: 0.85rem;
+  }
 }