actualizacion de bloques del index

css/styles.css

@@ -14,6 +14,7 @@
   --ide-accent: #40ab8e;
   --ide-accent-hover: #4fb389;
   --ide-accent-soft: rgba(19, 167, 138, 0.12);
+  --card-overlay: rgba(227, 235, 233, 0.85);
   --ide-dark-gray: #1b1717;
   --ide-excellence: #4fb389;
   --ide-projects: #ed8d01;
@@ -25,8 +26,12 @@
   --bg-surface: #FFFFFF;
   --bg-surface-elevated: #FFFFFF;
   --bg-subtle: #EDF3F5;
+  --bg-card: #FFFFFF;
+  --bg-card-alt: #f8faff;
+  --bg-muted: #e9ecef;
   --border-color: #E2E8F0;
   --border-subtle: #EEF2F6;
+  --border-hover:#b7babd;
   
   --text-primary: #094b63;
   --text-main: #0E2833;
@@ -53,8 +58,13 @@
   --bg-surface: #18222A;
   --bg-surface-elevated: #202D37;
   --bg-subtle: #24333E;
+  --bg-card: #18222A;
+  --bg-card-alt: var(--bg-muted);
+  --card-overlay: rgba(4, 36, 29, 0.85);
+  --bg-muted: #24333E;
   --border-color: #2D3D4A;
   --border-subtle: #1F2C36;
+  --border-hover:#40ab8e;
   --ide-primary-light: #40ab8e;
   --ide-excellence: #4fb389;
   --ide-projects: #ed8d01;
@@ -530,6 +540,75 @@ p, li, .lead-text, .text-body, .text-muted {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }
+/*tarjetas especiales*/
+/*Agro*/
+.card-agro {
+  background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/campo2.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 1.75rem;
+  transition: all var(--transition-normal);
+
+}
+
+.card-agro:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+/*Fabrica*/
+.card-fabrica {
+  background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/fabrica3.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 1.75rem;
+  transition: all var(--transition-normal);
+
+}
+
+.card-fabrica:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+/*Salud*/
+.card-salud {
+  background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/hospital.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 1.75rem;
+  transition: all var(--transition-normal);
+
+}
+
+.card-salud:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+/*Educacion*/
+.card-educacion {
+  background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/escuela.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 1.75rem;
+  transition: all var(--transition-normal);
+
+}
+
+.card-educacion:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
 
 .grid-2 {
   display: grid;
@@ -654,7 +733,7 @@ p, li, .lead-text, .text-body, .text-muted {
 
 /* ---- Contenedor principal (estilo Opción A) ---- */
 .quiz-container {
-  background: var(--bg-card, #ffffff);
+  background: var(--bg-card);
   border-radius: 1.25rem;
   padding: 2.5rem 2.75rem;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
@@ -674,7 +753,7 @@ p, li, .lead-text, .text-body, .text-muted {
 .quiz-progress-bar {
   width: 100%;
   height: 6px;
-  background: var(--bg-muted, #e9ecef);
+  background: var(--bg-muted);
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 2rem;
@@ -729,8 +808,7 @@ p, li, .lead-text, .text-body, .text-muted {
 }
 
 .quiz-option-card:hover {
-  background: var(--bg-hover, #f1f3f5);
-  border-color: var(--border-hover, #dee2e6);
+  border-color: var(--border-hover);
 }
 
 .quiz-option-card.selected {
@@ -807,7 +885,7 @@ p, li, .lead-text, .text-body, .text-muted {
 
 /* ---- Resultado---- */
 .quiz-result-box {
-  background: var(--bg-card-alt, #f8faff);
+  background: var(--bg-card-alt);
   border-radius: 1.25rem;
   padding: 2rem 2.25rem;
   border: 1px solid var(--border-light, #e9ecef);

index.html

@@ -585,11 +585,7 @@
           <div class="quiz-step" id="step-result">
             <div class="quiz-result-box">
               
-              <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
-                <span id="resultIcon" style="font-size: 2rem;">🔍</span>
-                <span id="resultProfile" style="font-size: 0.9rem; color: var(--text-muted);">Perfil · Diagnóstico</span>
-              </div>
-              <h3 id="resultTitle" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
+              <h3 id="resultTitle" style="font-size: 1.4rem; color: var(--ide-primary-ligth); margin-bottom: 0.75rem;">
                 No necesitás tener la respuesta para empezar.
               </h3>
               <p id="resultBody" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
@@ -695,28 +691,36 @@
         </div>
 
         <div class="grid-4" style="text-align: center;">
-          <div class="card" style="padding: 1.5rem 1rem;">
-            <!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🌾</div> -->
+          <div class="card-agro">
+            <svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
+              <use href="./assets/iconos/agro_color.svg" fill="currentColor"></use>
+            </svg>
             <h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Agro & Alimentos</h4>
-            <p style="font-size: 0.82rem; color: var(--text-muted);">Trazabilidad, normas de inocuidad y profesionalización de operaciones.</p>
+            <p style="font-size: 0.82rem;">Trazabilidad, normas de inocuidad y profesionalización de operaciones.</p>
           </div>
 
-          <div class="card" style="padding: 1.5rem 1rem;">
-            <!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🏭</div> -->
+          <div class="card-fabrica" style="padding: 1.5rem 1rem;" text-align: center;">
+            <svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
+              <use href="./assets/iconos/fabrica_color.svg" fill="currentColor"></use>
+            </svg>
             <h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Industria & Manufactura</h4>
-            <p style="font-size: 0.82rem; color: var(--text-muted);">Eficiencia operativa, seguridad (ISO 45001) y calidad sostenida.</p>
+            <p style="font-size: 0.82rem;">Eficiencia operativa, seguridad (ISO 45001) y calidad sostenida.</p>
           </div>
 
-          <div class="card" style="padding: 1.5rem 1rem;">
-            <!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🏥</div> -->
+          <div class="card-salud" style="padding: 1.5rem 1rem;" text-align: center;">
+            <svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
+              <use href="./assets/iconos/nurse_color.svg" fill="currentColor"></use>
+            </svg>
             <h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Salud & Servicios</h4>
-            <p style="font-size: 0.82rem; color: var(--text-muted);">Gestión por procesos críticos, experiencia del paciente y cumplimiento.</p>
+            <p style="font-size: 0.82rem;">Gestión por procesos críticos, experiencia del paciente y cumplimiento.</p>
           </div>
 
-          <div class="card" style="padding: 1.5rem 1rem;">
-            <!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🎓</div> -->
+          <div class="card-educacion" style="padding: 1.5rem 1rem;">
+            <svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
+              <use href="./assets/iconos/escuela_color.svg" fill="currentColor"></use>
+            </svg>
             <h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Educación & Gobierno</h4>
-            <p style="font-size: 0.82rem; color: var(--text-muted);">Norma ISO 21001, transformación de planes y gestión institucional.</p>
+            <p style="font-size: 0.82rem;">Norma ISO 21001, transformación de planes y gestión institucional.</p>
           </div>
         </div>
       </div>

js/main.js

@@ -263,8 +263,6 @@ function closeModal(modalId) {
     // Perfil 4 · Requisito exigido
     if (p3 === 'requisito' || p2 === 'iso' || p2 === 'iso-form') {
       return {
-        icon: './assets/iconos/lista_32.svg',
-        profile: 'Requisito o certificación',
         title: 'La certificación puede ser el punto de partida.',
         body: 'Comprendemos que tenés un requisito externo. En IDE no trabajamos para cumplir auditorías: trabajamos para que el sistema refleje cómo funciona tu organización y contribuya a gestionarla mejor.',
         chips: ['IDE Excellence', 'ISO 9001 / 14001 / 45001', 'Sistemas de gestión'],
@@ -283,8 +281,6 @@ function closeModal(modalId) {
       };
       const m = map[p2] || { chips: ['Formación', 'Desarrollo', 'Academy'], extra: 'IDE Academy' };
       return {
-        icon: './assets/iconos/gorro_32.svg',
-        profile: 'Formación y conocimiento',
         title: 'Desarrollamos las capacidades que hacen posible la transformación.',
         body: 'IDE Academy diseña programas de formación alineados con los desafíos reales de las organizaciones. No dictamos cursos estándar: trabajamos desde el contexto de cada equipo.',
         chips: [...m.chips, m.extra],
@@ -345,8 +341,6 @@ function closeModal(modalId) {
       };
       const m = map[p2] || { chips: ['Ecosistema IDE'], body: 'Entendemos dónde querés llegar. Comprendemos el sistema para ayudarte a lograrlo.' };
       return {
-        icon: './assets/iconos/dart_32.svg',
-        profile: 'Objetivo claro',
         title: 'Entendemos dónde querés llegar. Te ayudamos a definir cómo.',
         body: m.body,
         chips: m.chips,
@@ -365,8 +359,6 @@ function closeModal(modalId) {
     };
     const md = mapD[p2] || mapD.nosabe;
     return {
-      icon: './assets/iconos/lupa_32.svg',
-      profile: 'Desafío sin solución definida',
       title: 'No necesitás tener la respuesta para empezar.',
       body: 'Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada. Eso diferencia una intervención puntual de una transformación real.',
       chips: md.chips,
@@ -422,15 +414,7 @@ function closeModal(modalId) {
 
   function renderResult(ans) {
     const r = buildResult(ans);
-    const iconContainer = document.getElementById('resultIcon');
-    if (iconContainer) {
-      iconContainer.innerHTML = `
-        <svg width="32" height="32" fill="currentColor" style="display: block;">
-          <use href="${r.icon}" />
-        </svg>
-      `;
-    }
-    document.getElementById('resultProfile').textContent = r.profile;
+    
     document.getElementById('resultTitle').textContent = r.title;
     document.getElementById('resultBody').textContent = r.body;