diff --git a/public/imgs/quaddro2/est/bns/diba_sufr_mobl.jpg b/public/imgs/quaddro2/est/bns/diba_sufr_mobl.jpg
index 3590256..02caff2 100644
Binary files a/public/imgs/quaddro2/est/bns/diba_sufr_mobl.jpg and b/public/imgs/quaddro2/est/bns/diba_sufr_mobl.jpg differ
diff --git a/public/imgs/quaddro2/est/bns/diba_sufr_mobl_old.jpg b/public/imgs/quaddro2/est/bns/diba_sufr_mobl_old.jpg
new file mode 100644
index 0000000..3590256
Binary files /dev/null and b/public/imgs/quaddro2/est/bns/diba_sufr_mobl_old.jpg differ
diff --git a/public/imgs/quaddro2/mat/ducha_vigo_fresno.jpg b/public/imgs/quaddro2/mat/ducha_viggo_fresno.jpg
similarity index 100%
rename from public/imgs/quaddro2/mat/ducha_vigo_fresno.jpg
rename to public/imgs/quaddro2/mat/ducha_viggo_fresno.jpg
diff --git a/src/app.css b/src/app.css
index 57ca95a..dfa66e4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,6 +1,7 @@
 
 @import "tailwindcss";            /* Utilities y tema */
 
+
 html {
     height: 100%;  /* Propaga altura desde root */
 }
@@ -11,9 +12,6 @@ body {
     padding: 0;
 }
 
-/* Tus estilos personalizados aquí, si los tienes */
-@theme {
-    /* Personalizaciones de tema, si necesitas */
-}
+
 
 
diff --git a/src/data/data_proyecto.ts b/src/data/data_proyecto.ts
index 53acb57..045c3f7 100644
--- a/src/data/data_proyecto.ts
+++ b/src/data/data_proyecto.ts
@@ -29,48 +29,81 @@ export const proyecto : Proyecto = {
         'suelo_viggo_fresno' : {
             nombre : 'Viggo Fresno',
             ref    : 'suelo_viggo_fresno',
-            imagen : '/imgs/quaddro2/mat/suelo_vigo_fresno.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_suelo_viggo_fresno.jpg',
+            imagen : './imgs/quaddro2/mat/suelo_viggo_fresno.jpg'
         },
         'suelo_viggo_roble' : {
             nombre : 'Viggo Roble',
             ref    : 'suelo_viggo_roble',
-            imagen : '/imgs/quaddro2/mat/suelo_vigo_roble.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_suelo_viggo_roble.jpg',
+            imagen : './imgs/quaddro2/mat/suelo_viggo_roble.jpg'
+        },
+        'encimera_negra' : {
+            nombre : "Encimera Negra",
+            ref    : 'encimera_negra',
+            thumb  : './imgs/quaddro2/mat/tn_encimera_negra.jpg',
+            imagen : './imgs/quaddro2/mat/encimera_negra.png'
+        },
+        'encimera_blanca' : {
+            nombre : "Encimera Blanca",
+            ref    : 'encimera_blanca',
+            thumb  : './imgs/quaddro2/mat/tn_encimera_blanca.jpg',
+            imagen : './imgs/quaddro2/mat/encimera_blanca.png'
         },
         'mueble_roble' : {
-            nombre : "Mueble Roble",
+            nombre : "Mueble Madera",
             ref    : 'mueble_roble',
-            imagen : '/imgs/quaddro2/mat/mueble_roble.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_mueble_roble.jpg',
+            imagen : './imgs/quaddro2/mat/mueble_roble.jpg'
         },
         'mueble_blanco' : {
             nombre : 'Mueble Blanco',
             ref    : 'mueble_blanco',
-            imagen : '/imgs/quaddro2/mat/mueble_blanco.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_mueble_blanco.jpg',
+            imagen : './imgs/quaddro2/mat/mueble_blanco.jpg'
         },
         'mueble_topo' : {
             nombre : 'Mueble_Blanco',
             ref    : 'mueble_topo',
-            imagen : '/imgs/quaddro2/mat/mueble_topo.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_mueble_topo.jpg',
+            imagen : './imgs/quaddro2/mat/mueble_topo.jpg'
         },
         'ducha_viggo_roble' : {
             nombre : 'Ducha Viggo Roble',
             ref    : 'ducha_viggo_roble',
-            imagen : '/imgs/quaddro2/mat/ducha_viggo_roble.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_ducha_viggo_roble.jpg',
+            imagen : './imgs/quaddro2/mat/ducha_viggo_roble.jpg'
         },
         'ducha_viggo_fresno': {
             nombre : 'Ducha Viggo Fresno',
             ref    : 'ducha_viggo_fresno',
-            imagen : '/imgs/quaddro2/mat/ducha_viggo_fresno.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_ducha_viggo_fresno.jpg',
+            imagen : './imgs/quaddro2/mat/ducha_viggo_fresno.jpg'
         },
         'alicatado_agar' : {
             nombre : 'Alicatado Agar Mate',
             ref    : 'alicatado_agar',
-            imagen : '/imgs/quaddro2/mat/alicatado_agar.jpg'
+            thumb  : './imgs/quaddro2/mat/tn_alicatado_agar_mate.jpg',
+            imagen : './imgs/quaddro2/mat/alicatado_agar_mate.jpg'
         },
         'madera_palilleria' : {
             nombre : 'Palilleria',
             ref    : 'madera_palilleria',
-            imagen : '/imgs/quaddro2/mat/madera_palilleria.png'
-        }
+            thumb  : './imgs/quaddro2/mat/tn_madera_palilleria.jpg',
+            imagen : './imgs/quaddro2/mat/madera_palilleria.jpg'
+        },
+        'ducha' : {
+            nombre : 'Baño con Ducha',
+            ref    : 'ducha',
+            thumb  : './imgs/quaddro2/mat/tn_ducha.jpg',
+            imagen : './imgs/quaddro2/mat/ducha.jpg'
+        },
+        'banera' : {
+            nombre : 'Baño con Bañera',
+            ref    : 'banera',
+            thumb  : './imgs/quaddro2/mat/tn_banera.jpg',
+            imagen : './imgs/quaddro2/mat/banera.jpg'
+        },
     },
 
 
@@ -93,7 +126,7 @@ export const proyecto : Proyecto = {
                         {
                             nombre  : 'Suelo Viggo Roble',
                             value   : 'suro',
-                            material: 'suelo_viggo_fresno',
+                            material: 'suelo_viggo_roble',
                         }
                     ]
                 }
@@ -107,8 +140,8 @@ export const proyecto : Proyecto = {
             adds    : {
                 'ab' : {
                     nombre : 'Cocina abierta',
-                    imagen : 'imgs/quaddro2/est/ccn/diab.jpg',
-                    imagenTn: 'imgs/quaddro2/est/ccn/diab_tn.png',
+                    imagen : './imgs/quaddro2/est/ccn/diab.jpg',
+                    thumb: './imgs/quaddro2/est/ccn/diab_tn.png',
                 }
             },
             opciones: [
@@ -133,12 +166,12 @@ export const proyecto : Proyecto = {
                         {
                             nombre  : 'Encimera Negra',
                             value   : 'enne',
-                            material: null,
+                            material: 'encimera_negra',
                         },
                         {
                             nombre  : 'Encimera Blanca',
                             value   : 'enbl',
-                            material: null,
+                            material: 'encimera_blanca',
                         }
                     ]
                 },
@@ -153,7 +186,7 @@ export const proyecto : Proyecto = {
                         {
                             nombre  : 'Con Palilleria',
                             value   : 'repa',
-                            material: null,
+                            material: 'madera_palilleria',
                         }
                     ]
                 },
@@ -163,12 +196,12 @@ export const proyecto : Proyecto = {
                         {
                             nombre  : 'Mueble Blanco',
                             value   : 'mubl',
-                            material: null,
+                            material: 'mueble_blanco',
                         },
                         {
                             nombre  : 'Mueble Topo',
                             value   : 'muto',
-                            material: null,
+                            material: 'mueble_topo',
                         }
                     ]
                 }
@@ -183,7 +216,7 @@ export const proyecto : Proyecto = {
                 'kit' : {
                     nombre : 'Kit Sanitario',
                     imagen : 'imgs/quaddro2/est/bnp/diks.jpg',
-                    imagenTn: 'imgs/quaddro2/est/bnp/diks_tn.png'
+                    thumb  : 'imgs/quaddro2/est/bnp/diks_tn.png'
                 }
             },
             opciones: [
@@ -197,7 +230,7 @@ export const proyecto : Proyecto = {
                         },
                         {
                             nombre  : 'Suelo Viggo Roble',
-                            material: 'suelo_viggo_Roble',
+                            material: 'suelo_viggo_roble',
                             value   : 'suro'
                         }
                     ]
@@ -212,7 +245,7 @@ export const proyecto : Proyecto = {
                         },
                         {
                             nombre  : 'Agar Mate',
-                            material: null,
+                            material: 'alicatado_agar',
                             value   : 'alag',
                         }
                     ]
@@ -222,12 +255,12 @@ export const proyecto : Proyecto = {
                     opciones: [
                         {
                             nombre  : 'Mueble Blanco',
-                            material: null,
+                            material: 'mueble_blanco',
                             value   : 'mobl',
                         },
                         {
-                            nombre  : 'Mueble Madera',
-                            material: null,
+                            nombre  : 'Mueble Roble',
+                            material: 'mueble_roble',
                             value   : 'moma',
                         }
                     ]
@@ -247,12 +280,12 @@ export const proyecto : Proyecto = {
                         {
                             nombre: 'Con Ducha',
                             value : 'didu',
-                            material: null,
+                            material: 'ducha',
                         },
                         {
                             nombre: 'Con Bañera',
                             value : 'diba',
-                            material: null,
+                            material: 'banera',
                         },
                     ]
                 },
@@ -276,12 +309,12 @@ export const proyecto : Proyecto = {
                     opciones: [
                         {
                             nombre  : 'Mueble Blanco',
-                            material: null,
+                            material: 'mueble_blanco',
                             value   : 'mobl',
                         },
                         {
                             nombre  : 'Mueble Madera',
-                            material: null,
+                            material: 'mueble_roble',
                             value   : 'moma',
                         }
                     ]
diff --git a/src/data/data_types.ts b/src/data/data_types.ts
index 7bd3a60..5c20374 100644
--- a/src/data/data_types.ts
+++ b/src/data/data_types.ts
@@ -26,6 +26,7 @@ export interface Empresa {
 export interface Material {
     nombre : string;
     ref    : string;
+    thumb? : string;
     imagen?: string;
 }
 
@@ -48,7 +49,7 @@ export interface OpcionesSet {
 export interface Add {
     nombre   : string;
     imagen   : string;
-    imagenTn : string
+    thumb    : string
 }
 
 export interface Estancia {
diff --git a/src/lib/components/BotonAcabado.svelte b/src/lib/components/BotonAcabado.svelte
index 1b6e63c..4b7838c 100644
--- a/src/lib/components/BotonAcabado.svelte
+++ b/src/lib/components/BotonAcabado.svelte
@@ -1,27 +1,44 @@
 <script lang="ts">
 
-    let { nombre, seleccionada, imagenSrc  } = $props<{ nombre: string, imagenSrc: string, seleccionada?: boolean }>();
+
+    let { nombre,
+        seleccionada,
+        onclick,
+        imagenSrc
+    } = $props<{ nombre: string, imagenSrc?: string, seleccionada?: boolean, onclick?: () => void }>();
+
+
+
 
 </script>
 
 
 
+<button
+        type="button"
+        class="group relative p-2 rounded-lg border transition-all duration-200
+        {seleccionada
+           ? 'border-primary-500 bg-blue-50 ring-1 ring-blue-500'
+           : 'border-gray-200 hover:border-gray-400'
+        }"
+        aria-pressed={seleccionada}
+        onclick={onclick}
+>
+    <div class="aspect-[2/1] mb-2">
+        <img src={imagenSrc} alt={nombre} class="w-full h-full object-cover rounded" />
+    </div>
 
+    <p class="text-xs text-center font-medium text-gray-700 leading-tight">{nombre}</p>
 
-    <button type="button" class="group relative p-2 rounded-lg border transition-all duration-200 border-primary-500 bg-primary-50">
-        <div class="aspect-square mb-2">
-            <img src="https://placehold.co/80x40" alt="Ladrillo Visto" class="w-full h-full object-cover rounded">
-        </div>
-        <p class="text-xs text-center font-medium text-gray-700 leading-tight">{ nombre }</p>
-        {#if seleccionada }
-        <div class="absolute -top-1 -right-1 w-5 h-5 bg-primary-600 rounded-full flex items-center justify-center">
+    {#if seleccionada}
+        <div class="absolute -top-1 -right-1 w-5 h-5 bg-blue-600 rounded-full flex items-center justify-center shadow-md">
             <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"></path>
+                <path
+                        fill-rule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clip-rule="evenodd"
+                />
             </svg>
         </div>
-        {/if}
-    </button>
-
-
+    {/if}
+</button>
\ No newline at end of file
diff --git a/src/lib/components/BotonEstancia.svelte b/src/lib/components/BotonEstancia.svelte
index 484ff05..643e025 100644
--- a/src/lib/components/BotonEstancia.svelte
+++ b/src/lib/components/BotonEstancia.svelte
@@ -2,16 +2,25 @@
 <script lang="ts">
 
 
-    let { nombre, seleccionada } = $props<{ nombre: string, seleccionada?: boolean }>();
+    let { nombre, seleccionada, onclick: onclick } = $props<{ nombre: string, seleccionada? : boolean, onclick?: () => void }>();
 
 </script>
 
 
-<button type="button" class="w-full text-left p-2 rounded-lg border transition-all duration-200 border-primary-500 bg-primary-50 text-primary-700">
+<button type="button"
+        class="w-full text-left p-2 rounded-lg border transition-all duration-200 text-primary-700"
+        class:border-blue-500={seleccionada}
+        class:bg-blue-50={seleccionada}
+        class:border-gray-300={!seleccionada}
+        class:bg-gray-50={!seleccionada}
+        onclick={onclick}
+      >
     <div class="flex items-center space-x-3">
+        <!--
         <div class="flex-shrink-0">
             <img src="https://placehold.co/32x32" alt="Espacio Principal" class="w-6 h-6 object-cover rounded border">
         </div>
+        -->
 
         <div class="flex-1 min-w-0">
             <p class="text-sm font-medium truncate">{ nombre }</p>
diff --git a/src/lib/components/ConfiguradorView.svelte b/src/lib/components/ConfiguradorView.svelte
index 5871d0c..bbd3962 100644
--- a/src/lib/components/ConfiguradorView.svelte
+++ b/src/lib/components/ConfiguradorView.svelte
@@ -2,68 +2,154 @@
     import BarraLateral from "../components/BarraLateral.svelte";
     import BotonAcabado from "./BotonAcabado.svelte";
     import BotonEstancia from "./BotonEstancia.svelte";
+
+
+    import { selections, appState, getAvailableGroups, imageSrc, selectedAdds } from '../stores/sel.svelte.js';
+    import { proyecto } from '../../data/data_proyecto';
+    import {onMount} from "svelte";
+    import {empresaData} from "../../data/data_empresa.js";
+
+
+    const DEFAULT_IMAGE = "https://placehold.co/80x40/cccccc/333333?text=N/A";
+
+    function handleKeydown(event : KeyboardEvent) : void {
+        if (modalInfo && event.key === 'Escape') {
+            closeModal();
+        }
+    }
+
+    onMount(() => {
+        document.addEventListener('keydown', handleKeydown);
+    });
+
+    // Use $state for modal state in Svelte 5
+    let modalInfo = $state<{ texto : string, imagen: string} | null>()
+
+        // Function to open modal with image
+    function openModal(imagen: string, texto: string) {
+        modalInfo = { imagen,texto }
+     }
+
+    // Function to close modal
+    function closeModal() {
+        modalInfo = null
+    }
+
+    const handleModalClick = (e : MouseEvent) => {
+        e.stopPropagation();
+    };
+
+
+
 </script>
 
 <div class="h-full bg-gray-50 flex justify-center">
 
     <div class="flex-1 h-full p-4 sm:p-6 bg-white rounded-l-xl shadow-lg border-r border-gray-200">
         <!-- <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-6">Configuración de Acabados en Tiempo Real</h1> -->
-        <div class="bg-gray-200 p-8 rounded-lg h-[calc(100%-5rem)] flex flex-col items-center justify-center border border-gray-300">
-            <p class="text-gray-600 text-xl font-semibold">Visualizador del Configurador.</p>
+        <img
+                src={imageSrc()[appState.estanciaSeleccionada]}
+                alt={`Vista de ${proyecto.estancias[appState.estanciaSeleccionada].nombre}`}
+                class="w-full h-auto max-h-[90vh] object-contain"
+        />
+
+        <!--
+        <div class="bg-gray-200 p-8 rounded-lg h-[calc(100%-5rem)] flex flex-col items-center justify-center border border-gray-300 h-full">
+
+
+
+
+            <div class="relative h-full bg-white rounded-xl shadow-lg overflow-hidden ring-1 ring-gray-200">
+                <img
+                        src={imageSrc()[appState.estanciaSeleccionada]}
+                        alt={`Vista de ${proyecto.estancias[appState.estanciaSeleccionada].nombre}`}
+                        class="w-full h-auto max-h-[80vh] object-contain"
+                />
+            </div>
+
+
         </div>
+    -->
     </div>
 
     <BarraLateral title="Opciones de Personalización">
         <div class="p-4 border-b bg-gray-50">
             <div>
             <h2 class="text-lg font-semibold text-gray-900 mb-1">Estancias</h2>
-            <p class="text-sm mb-4 text-gray-600">Seleccione la estancia ha configurar</p>
+            <p class="text-sm mb-4 text-gray-600">Seleccione la estancia a configurar</p>
+            </div>
+            <div class="space-y-2">
+                {#each Object.keys(proyecto.estancias) as estanciaKey}
+                        <BotonEstancia seleccionada={appState.estanciaSeleccionada === estanciaKey}
+                                onclick={() => (appState.estanciaSeleccionada = estanciaKey)}
+                            nombre={proyecto.estancias[estanciaKey].nombre}
+                        />
+                {/each}
             </div>
-
-                <!-- <h3 class="text-sm font-medium text-gray-900 mb-3 uppercase tracking-wide">Vistas Disponibles</h3>-->
-                <div class="space-y-2">
-
-                    <BotonEstancia nombre="Salón" seleccionada/>
-                    <BotonEstancia nombre="Cocina"/>
-                    <BotonEstancia nombre="Baño Principal"/>
-                    <BotonEstancia nombre="Baño Secundario"/>
-
-                </div>
-
-
         </div>
 
         <div class="flex-1 overflow-y-auto p-4">
 
                 <div>
-                <h2 class="text-sm font-medium text-gray-900 mb-1 uppercase tracking-wide">Acabados</h2>
+                <h2 class="text-sm font-medium text-gray-900 mb-1 uppercase tracking-wide">Opciones para {proyecto.estancias[appState.estanciaSeleccionada].nombre}</h2>
                 <p class="text-sm text-gray-600 mb-4">Seleccione los acabados y materiales</p>
                 </div>
 
-                <div class="mb-6"><h4 class="text-sm font-medium text-gray-800 mb-3">Pavimentos</h4>
-                    <div class="grid grid-cols-2 gap-2">
 
-                        <BotonAcabado nombre="Pintura Blanca"/>
-                        <BotonAcabado nombre="Pintura Blanca" seleccionada/>
-
-                    </div>
-                </div>
-
-                <div class="mb-6">
-                    <h4 class="text-sm font-medium text-gray-800 mb-3">Revestimientos</h4>
+            {#each getAvailableGroups(appState.estanciaSeleccionada) as grupo}
+                <div class="mb-6"><h4 class="text-sm font-medium text-gray-800 mb-3">{grupo.nombre}</h4>
                     <div class="grid grid-cols-2 gap-2">
-                        <BotonAcabado nombre="Pintura Blanca"/>
-                        <BotonAcabado nombre="Pintura Blanca" seleccionada/>
+                        {#each grupo.opciones as opcion }
+                            <BotonAcabado
+                                    nombre={opcion.nombre}
+                                    imagenSrc={proyecto.materiales[opcion?.material]?.thumb || DEFAULT_IMAGE }
+                                    seleccionada={selections[appState.estanciaSeleccionada]?.[grupo.nombre] === opcion.value}
+                                    onclick={() => { selections[appState.estanciaSeleccionada][grupo.nombre] = opcion.value; }}
+                            />
+                        {/each}
                     </div>
                 </div>
-
-                <div class="mb-6">
-                    <h4 class="text-sm font-medium text-gray-800 mb-3">Mobiliario</h4>
-                    <div class="grid grid-cols-2 gap-2">
-                        <BotonAcabado nombre="Pintura Blanca"/>
-                        <BotonAcabado nombre="Pintura Blanca" seleccionada/>
+            {/each}
+
+            {#if proyecto.estancias[appState.estanciaSeleccionada].adds}
+                {@const adds = proyecto.estancias[appState.estanciaSeleccionada].adds }
+                {#if adds && typeof adds === 'object' && !Array.isArray(adds) }
+                    <div class="mt-8 border-t border-gray-200 pt-6">
+                        <h3 class="text-sm font-medium text-gray-700 mb-4 uppercase tracking-wide">Otras Opciones</h3>
+                        <div class="space-y-4">
+                            {#each Object.entries(adds) as [addKey, add]}
+                                <div class="bg-white rounded-lg shadow-sm p-4 space-y-3">
+                                    <label class="flex items-center cursor-pointer group">
+                                        <input
+                                                type="checkbox"
+                                                checked={selectedAdds[appState.estanciaSeleccionada]?.[addKey] ?? false}
+                                                onchange={() => (selectedAdds[appState.estanciaSeleccionada][addKey] = !selectedAdds[appState.estanciaSeleccionada][addKey])}
+                                                class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                                        />
+                                        <span class="ml-3 text-sm font-medium text-gray-800 group-hover:text-gray-900">{add.nombre}</span>
+                                    </label>
+                                    <button
+                                            type="button"
+                                            class="p-0 border-none bg-transparent cursor-pointer"
+                                            onclick={() => openModal(add.imagen,add.nombre,)}
+                                    >
+                                        <img
+                                                src={add.thumb}
+                                                alt={`Vista previa de ${add.nombre}`}
+                                                class="mt-2 w-[100px] h-[100px] object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-200"
+                                        />
+                                    </button>
+                                </div>
+                            {/each}
+                        </div>
                     </div>
-                </div>
+                {/if}
+            {/if}
+
+
+
+
+
 
 
                 <div class="mt-6 p-3 bg-gray-50 rounded-lg border">
@@ -84,11 +170,47 @@
                         </div>
                     </div>
                 </div>
-            </div>
+
+
+
+
+        </div>
 
 
 
     </BarraLateral>
 
 
-</div>
\ No newline at end of file
+</div>
+
+
+
+
+{#if modalInfo}
+    <div
+         class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 transition-opacity duration-300 {modalInfo?.imagen ? 'opacity-100' : 'opacity-0'}"
+         onclick={closeModal} onkeydown={ (e) => { if (e.key === 'Escape')
+         closeModal() } }
+         role="dialog"
+         aria-modal="true"
+         tabindex="0">
+
+        <div
+             class="bg-white p-6 rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-auto transform transition-transform duration-300 scale-100"
+             onclick={(e) => e.stopPropagation()}
+             role="button"
+             tabindex="0"
+             onkeydown={ (e) => { if (e.key === 'Escape') closeModal() }}
+        >
+            <h2 class="text-2xl font-bold text-center mb-4 text-gray-800">Opción de {modalInfo.texto} </h2>
+            <img src={modalInfo?.imagen} alt="Imagen ampliada" class="w-full max-h-[70vh] object-contain rounded-lg mb-4" />
+            <button
+                class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium transition-all duration-200"
+                onclick={closeModal} >
+                Cerrar
+            </button>
+        </div>
+
+    </div>
+{/if}
+
diff --git a/src/lib/components/ProyectoView.svelte b/src/lib/components/ProyectoView.svelte
index aabb66e..1ff9003 100644
--- a/src/lib/components/ProyectoView.svelte
+++ b/src/lib/components/ProyectoView.svelte
@@ -3,10 +3,11 @@
     import {proyecto} from "../../data/data_proyecto";
 
     // Asume que la URL de la imagen de fondo viene como prop o se define aquí
-    let { projectBg } = $props<{ projectBg: string }>();
+    let { projectBg } = $props<{ projectBg?: string }>();
 </script>
 
 
+
     <div class="mx-auto text-center bg-amber-50 min-h-[calc(100vh-4.3rem)] bg-cover bg-center" style="background-image: url({proyecto.imagenes.background});">
 
     <div class="max-w-7xl w-full h-full mx-auto flex">
diff --git a/src/lib/components/test/Selector.svelte b/src/lib/components/test/Selector.svelte
index a9ed462..ad13f4a 100644
--- a/src/lib/components/test/Selector.svelte
+++ b/src/lib/components/test/Selector.svelte
@@ -126,7 +126,7 @@
                                             onclick={() => openModal(add.imagen)}
                                     >
                                         <img
-                                                src={add.imagenTn}
+                                                src={add.thumb}
                                                 alt={`Vista previa de ${add.nombre}`}
                                                 class="mt-2 w-[100px] h-[100px] object-cover rounded-lg shadow-md hover:opacity-90 transition-opacity duration-200"
                                         />
diff --git a/src/lib/components/test/StoreTestTW.svelte b/src/lib/components/test/StoreTestTW.svelte
index 88e2bda..4c9c93d 100644
--- a/src/lib/components/test/StoreTestTW.svelte
+++ b/src/lib/components/test/StoreTestTW.svelte
@@ -112,7 +112,7 @@
                             </label>
 
                             <img
-                                    src={add.imagenTn}
+                                    src={add.thumb}
                                     alt={`Vista previa de ${add.nombre}`}
                                     class="mt-2 w-[100px] h-[100px] object-cover rounded cursor-pointer"
                                     onclick={() => openModal(add.imagen)}
diff --git a/tailwind.config.js b/tailwind.config.js
index 1d059ca..398b135 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,5 @@
 module.exports = {
-    content: [
-        './index.html',
-        './src/**/*.{svelte,js,ts}', // RUTA CRUCIAL
-    ],
+    content: ['./src/**/*.{svelte,js,ts}'],
     theme: {
         extend: {
             colors: {
@@ -12,8 +9,9 @@ module.exports = {
                     600: '#2563eb',
                     700: '#1d4ed8'
                 }
-            }
+            },
+            width: {'image-fit': 'calc(100% - 2ren)' },
         },
     },
-    plugins: [],
+
 }
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index cfd6d97..46739fa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
     base: './',
     plugins: [svelte(),tailwindcss()/*,viteSingleFile()*/],
     css: {
-        transformer: 'lightningcss'  // Opcional, pero recomendado en v4 para mejor rendimiento
+        /* transformer: 'lightningcss'  // Opcional, pero recomendado en v4 para mejor rendimiento */
     },
     build: {
         cssCodeSplit: false,