diff --git a/CMakeLists.txt b/CMakeLists.txt
index a5c59c0..592988b 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -127,11 +127,27 @@ set(DEBUG_SOURCES
 )
 
 # Configuración de SDL3
-find_package(SDL3 REQUIRED CONFIG REQUIRED COMPONENTS SDL3)
-message(STATUS "SDL3 encontrado: ${SDL3_INCLUDE_DIRS}")
+if(EMSCRIPTEN)
+    # En Emscripten, SDL3 se compila desde source con FetchContent
+    include(FetchContent)
+    FetchContent_Declare(
+        SDL3
+        GIT_REPOSITORY https://github.com/libsdl-org/SDL.git
+        GIT_TAG release-3.2.12
+        GIT_SHALLOW TRUE
+    )
+    set(SDL_SHARED OFF CACHE BOOL "" FORCE)
+    set(SDL_STATIC ON CACHE BOOL "" FORCE)
+    set(SDL_TEST_LIBRARY OFF CACHE BOOL "" FORCE)
+    FetchContent_MakeAvailable(SDL3)
+    message(STATUS "SDL3 compilado desde source para Emscripten")
+else()
+    find_package(SDL3 REQUIRED CONFIG REQUIRED COMPONENTS SDL3)
+    message(STATUS "SDL3 encontrado: ${SDL3_INCLUDE_DIRS}")
+endif()
 
-# --- SHADER COMPILATION (Linux/Windows only - macOS uses Metal) ---
-if(NOT APPLE)
+# --- SHADER COMPILATION (Linux/Windows only - macOS usa Metal, Emscripten no els necessita) ---
+if(NOT APPLE AND NOT EMSCRIPTEN)
     find_program(GLSLC_EXE NAMES glslc)
 
     set(SHADERS_DIR "${CMAKE_SOURCE_DIR}/data/shaders")
@@ -196,10 +212,15 @@ else()
 endif()
 
 # --- 2. AÑADIR EJECUTABLE ---
-add_executable(${PROJECT_NAME} ${APP_SOURCES} ${RENDERING_SOURCES})
+if(EMSCRIPTEN)
+    # En Emscripten no compilem sdl3gpu_shader (SDL3 GPU no està suportat a WebGL2)
+    add_executable(${PROJECT_NAME} ${APP_SOURCES})
+else()
+    add_executable(${PROJECT_NAME} ${APP_SOURCES} ${RENDERING_SOURCES})
+endif()
 
 # Shaders deben compilarse antes que el ejecutable (Linux/Windows con glslc)
-if(NOT APPLE AND GLSLC_EXE)
+if(NOT APPLE AND NOT EMSCRIPTEN AND GLSLC_EXE)
     add_dependencies(${PROJECT_NAME} shaders)
 endif()
 
@@ -243,12 +264,25 @@ elseif(APPLE)
             -rpath @executable_path/../Frameworks/
         )
     endif()
+elseif(EMSCRIPTEN)
+    target_compile_definitions(${PROJECT_NAME} PRIVATE EMSCRIPTEN_BUILD)
+    target_link_options(${PROJECT_NAME} PRIVATE
+        "SHELL:--preload-file ${CMAKE_SOURCE_DIR}/data@/data"
+        "SHELL:--preload-file ${CMAKE_SOURCE_DIR}/config@/config"
+        "SHELL:--preload-file ${CMAKE_SOURCE_DIR}/gamecontrollerdb.txt@/gamecontrollerdb.txt"
+        -sALLOW_MEMORY_GROWTH=1
+        -sMAX_WEBGL_VERSION=2
+        -sINITIAL_MEMORY=67108864
+    )
+    set_target_properties(${PROJECT_NAME} PROPERTIES SUFFIX ".html")
 elseif(UNIX AND NOT APPLE)
     target_compile_definitions(${PROJECT_NAME} PRIVATE LINUX_BUILD)
 endif()
 
-# Especificar la ubicación del ejecutable
-set_target_properties(${PROJECT_NAME} PROPERTIES RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR})
+# Especificar la ubicación del ejecutable (en desktop; a wasm queda a build/wasm/)
+if(NOT EMSCRIPTEN)
+    set_target_properties(${PROJECT_NAME} PROPERTIES RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR})
+endif()
 
 # --- 5. STATIC ANALYSIS TARGETS ---
 
@@ -315,29 +349,31 @@ else()
     message(STATUS "clang-format no encontrado - targets 'format' y 'format-check' no disponibles")
 endif()
 
-# --- 6. PACK RESOURCES TARGETS ---
-set(PACK_TOOL_SOURCES
-    ${CMAKE_SOURCE_DIR}/tools/pack_resources/pack_resources.cpp
-    ${CMAKE_SOURCE_DIR}/source/core/resources/resource_pack.cpp
-)
+# --- 6. PACK RESOURCES TARGETS (no en Emscripten: s'utilitza --preload-file) ---
+if(NOT EMSCRIPTEN)
+    set(PACK_TOOL_SOURCES
+        ${CMAKE_SOURCE_DIR}/tools/pack_resources/pack_resources.cpp
+        ${CMAKE_SOURCE_DIR}/source/core/resources/resource_pack.cpp
+    )
 
-add_executable(pack_tool ${PACK_TOOL_SOURCES})
-target_include_directories(pack_tool PRIVATE ${CMAKE_SOURCE_DIR}/source)
-set_target_properties(pack_tool PROPERTIES
-    RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/tools/pack_resources
-)
+    add_executable(pack_tool ${PACK_TOOL_SOURCES})
+    target_include_directories(pack_tool PRIVATE ${CMAKE_SOURCE_DIR}/source)
+    set_target_properties(pack_tool PROPERTIES
+        RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/tools/pack_resources
+    )
 
-file(GLOB_RECURSE DATA_FILES "${CMAKE_SOURCE_DIR}/data/*")
+    file(GLOB_RECURSE DATA_FILES "${CMAKE_SOURCE_DIR}/data/*")
 
-add_custom_command(
-    OUTPUT  "${CMAKE_SOURCE_DIR}/resources.pack"
-    COMMAND $<TARGET_FILE:pack_tool>
-            "${CMAKE_SOURCE_DIR}/data"
-            "${CMAKE_SOURCE_DIR}/resources.pack"
-    DEPENDS pack_tool ${DATA_FILES}
-    WORKING_DIRECTORY "${CMAKE_SOURCE_DIR}"
-    COMMENT "Generando resources.pack desde data/..."
-)
+    add_custom_command(
+        OUTPUT  "${CMAKE_SOURCE_DIR}/resources.pack"
+        COMMAND $<TARGET_FILE:pack_tool>
+                "${CMAKE_SOURCE_DIR}/data"
+                "${CMAKE_SOURCE_DIR}/resources.pack"
+        DEPENDS pack_tool ${DATA_FILES}
+        WORKING_DIRECTORY "${CMAKE_SOURCE_DIR}"
+        COMMENT "Generando resources.pack desde data/..."
+    )
 
-add_custom_target(pack DEPENDS "${CMAKE_SOURCE_DIR}/resources.pack")
-add_dependencies(${PROJECT_NAME} pack)
+    add_custom_target(pack DEPENDS "${CMAKE_SOURCE_DIR}/resources.pack")
+    add_dependencies(${PROJECT_NAME} pack)
+endif()
diff --git a/Makefile b/Makefile
index f35c526..0997b24 100644
--- a/Makefile
+++ b/Makefile
@@ -285,6 +285,23 @@ linux_release:
 # Elimina la carpeta temporal
 	$(RMDIR) "$(RELEASE_FOLDER)"
 
+# ==============================================================================
+# COMPILACIÓN PARA WEBASSEMBLY (requiere Docker)
+# ==============================================================================
+wasm:
+	@echo "Compilando para WebAssembly - Version: $(VERSION)"
+	docker run --rm \
+		-v $(DIR_ROOT):/src \
+		-w /src \
+		emscripten/emsdk:latest \
+		bash -c "emcmake cmake -S . -B build/wasm -DCMAKE_BUILD_TYPE=Release && cmake --build build/wasm"
+	$(MKDIR) "$(DIST_DIR)/wasm"
+	cp build/wasm/$(TARGET_NAME).html $(DIST_DIR)/wasm/
+	cp build/wasm/$(TARGET_NAME).js $(DIST_DIR)/wasm/
+	cp build/wasm/$(TARGET_NAME).wasm $(DIST_DIR)/wasm/
+	cp build/wasm/$(TARGET_NAME).data $(DIST_DIR)/wasm/
+	@echo "Output: $(DIST_DIR)/wasm/"
+
 # ==============================================================================
 # REGLAS ESPECIALES
 # ==============================================================================
@@ -306,6 +323,7 @@ help:
 	@echo "    make windows_release - Crear release para Windows"
 	@echo "    make linux_release   - Crear release para Linux"
 	@echo "    make macos_release   - Crear release para macOS"
+	@echo "    make wasm            - Crear release per a WebAssembly (requereix Docker)"
 	@echo ""
 	@echo "  Herramientas:"
 	@echo "    make compile_shaders - Compilar shaders SPIR-V"
@@ -316,4 +334,4 @@ help:
 	@echo "    make show_version    - Mostrar version actual ($(VERSION))"
 	@echo "    make help            - Mostrar esta ayuda"
 
-.PHONY: all debug release windows_release macos_release linux_release compile_shaders pack_tool resources.pack show_version help
+.PHONY: all debug release windows_release macos_release linux_release wasm compile_shaders pack_tool resources.pack show_version help
diff --git a/source/core/input/global_inputs.cpp b/source/core/input/global_inputs.cpp
index c36526c..37d0f8d 100644
--- a/source/core/input/global_inputs.cpp
+++ b/source/core/input/global_inputs.cpp
@@ -20,6 +20,10 @@ namespace GlobalInputs {
     // Funciones internas
     namespace {
         void handleQuit() {
+#ifdef __EMSCRIPTEN__
+            // A la versió web no es pot eixir del joc
+            return;
+#else
             // En la escena GAME el comportamiento es siempre el mismo (con o sin modo kiosko)
             if (SceneManager::current == SceneManager::Scene::GAME) {
                 const std::string CODE = "PRESS AGAIN TO RETURN TO MENU";
@@ -48,6 +52,7 @@ namespace GlobalInputs {
             } else {
                 Notifier::get()->show({Locale::get()->get("ui.press_again_exit")}, Notifier::Style::DEFAULT, -1, true, CODE);  // NOLINT(readability-static-accessed-through-instance)
             }
+#endif  // __EMSCRIPTEN__
         }
 
         void handleSkipSection() {
diff --git a/source/core/rendering/screen.cpp b/source/core/rendering/screen.cpp
index e7c2e98..0159a08 100644
--- a/source/core/rendering/screen.cpp
+++ b/source/core/rendering/screen.cpp
@@ -13,7 +13,9 @@
 
 #include "core/input/mouse.hpp"                       // Para updateCursorVisibility
 #include "core/rendering/render_info.hpp"             // Para RenderInfo
-#include "core/rendering/sdl3gpu/sdl3gpu_shader.hpp"  // Para SDL3GPUShader
+#ifndef __EMSCRIPTEN__
+#include "core/rendering/sdl3gpu/sdl3gpu_shader.hpp"  // Para SDL3GPUShader (no suportat a WebGL2)
+#endif
 #include "core/rendering/surface.hpp"                 // Para Surface, readPalFile
 #include "core/rendering/text.hpp"                    // Para Text
 #include "core/resources/resource_cache.hpp"          // Para Resource
@@ -605,6 +607,10 @@ void Screen::nextShader() {
 // El device GPU se crea siempre (independientemente de postfx) para evitar
 // conflictos SDL_Renderer/SDL_GPU al hacer toggle F4 en Windows/Vulkan.
 void Screen::initShaders() {
+#ifdef __EMSCRIPTEN__
+    // A WebGL2 no hi ha SDL3 GPU, el render va per SDL_Renderer sense shaders.
+    shader_backend_.reset();
+#else
     SDL_Texture* tex = Options::video.border.enabled ? border_texture_ : game_texture_;
 
     if (!shader_backend_) {
@@ -633,6 +639,7 @@ void Screen::initShaders() {
     if (Options::video.shader.current_shader == Rendering::ShaderType::CRTPI) {
         applyCurrentCrtPiPreset();
     }
+#endif
 }
 
 // Obtiene información sobre la pantalla
diff --git a/source/core/system/director.cpp b/source/core/system/director.cpp
index 28dc98e..07a2377 100644
--- a/source/core/system/director.cpp
+++ b/source/core/system/director.cpp
@@ -40,7 +40,7 @@
 #include "game/editor/map_editor.hpp"  // Para MapEditor
 #endif
 
-#ifndef _WIN32
+#if !defined(_WIN32) && !defined(__EMSCRIPTEN__)
 #include <pwd.h>
 #endif
 
@@ -48,12 +48,17 @@
 Director::Director() {
     std::cout << "Game start" << '\n';
 
+#ifdef __EMSCRIPTEN__
+    // En Emscripten els assets estan al root del filesystem virtual (/data, /config)
+    executable_path_ = "";
+#else
     // Obtiene la ruta del ejecutable
     std::string base = SDL_GetBasePath();
     if (!base.empty() && base.back() == '/') {
         base.pop_back();
     }
     executable_path_ = base;
+#endif
 
     // Crea la carpeta del sistema donde guardar datos
     createSystemFolder("jailgames");
@@ -83,7 +88,7 @@ Director::Director() {
     // Preparar ruta al pack (en macOS bundle está en Contents/Resources/)
     std::string pack_path = executable_path_ + PREFIX + "/resources.pack";
 
-#ifdef RELEASE_BUILD
+#if defined(RELEASE_BUILD) && !defined(__EMSCRIPTEN__)
     // ============================================================
     // RELEASE BUILD: Pack-first architecture
     // ============================================================
@@ -141,6 +146,12 @@ Director::Director() {
     Options::setConfigFile(Resource::List::get()->get("config.yaml"));  // NOLINT(readability-static-accessed-through-instance)
     Options::loadFromFile();
 
+#ifdef __EMSCRIPTEN__
+    // A la versió web el navegador gestiona la finestra: res de fullscreen ni zoom.
+    Options::video.fullscreen = false;
+    Options::window.zoom = 1;
+#endif
+
     // Configura la ruta y carga los presets de PostFX
     Options::setPostFXFile(Resource::List::get()->get("postfx.yaml"));  // NOLINT(readability-static-accessed-through-instance)
     Options::loadPostFXFromFile();
@@ -168,7 +179,7 @@ Director::Director() {
     Screen::get()->setNotificationsEnabled(true);
 
     // Special handling for gamecontrollerdb.txt - SDL needs filesystem path
-#ifdef RELEASE_BUILD
+#if defined(RELEASE_BUILD) && !defined(__EMSCRIPTEN__)
     // In release, construct the path manually (not from Asset which has empty executable_path)
     std::string gamecontroller_db = executable_path_ + PREFIX + "/gamecontrollerdb.txt";
     Input::init(gamecontroller_db);
@@ -192,7 +203,7 @@ Director::Director() {
     std::cout << "\n";  // Fin de inicialización de sistemas
 
     // Inicializa el sistema de localización (antes de Cheevos que usa textos traducidos)
-#ifdef RELEASE_BUILD
+#if defined(RELEASE_BUILD) && !defined(__EMSCRIPTEN__)
     {
         // En release el locale está en el pack, no en el filesystem
         std::string locale_key = Resource::List::get()->get(Options::language + ".yaml");  // NOLINT(readability-static-accessed-through-instance)
@@ -205,7 +216,7 @@ Director::Director() {
 #endif
 
     // Special handling for cheevos.bin - also needs filesystem path
-#ifdef RELEASE_BUILD
+#if defined(RELEASE_BUILD) && !defined(__EMSCRIPTEN__)
     std::string cheevos_path = system_folder_ + "/cheevos.bin";
     Cheevos::init(cheevos_path);
 #else
@@ -244,6 +255,12 @@ Director::~Director() {
 
 // Crea la carpeta del sistema donde guardar datos
 void Director::createSystemFolder(const std::string& folder) {  // NOLINT(readability-convert-member-functions-to-static)
+#ifdef __EMSCRIPTEN__
+    // En Emscripten utilitzem MEMFS (no persistent entre sessions).
+    // No cal crear directoris: MEMFS els crea automàticament en escriure-hi.
+    system_folder_ = "/config/" + folder;
+    return;
+#else
 #ifdef _WIN32
     system_folder_ = std::string(getenv("APPDATA")) + "/" + folder;
 #elif __APPLE__
@@ -295,6 +312,7 @@ void Director::createSystemFolder(const std::string& folder) {  // NOLINT(readab
             }
         }
     }
+#endif  // __EMSCRIPTEN__
 }
 
 // Carga la configuración de assets desde assets.yaml
@@ -390,10 +408,13 @@ auto Director::iterate() -> SDL_AppResult {
 
 // SDL_AppEvent: despatxa un event a l'escena activa
 auto Director::handleEvent(const SDL_Event& event) -> SDL_AppResult {
+#ifndef __EMSCRIPTEN__
+    // A la versió web no tenim event de quit del navegador
     if (event.type == SDL_EVENT_QUIT) {
         SceneManager::current = SceneManager::Scene::QUIT;
         return SDL_APP_SUCCESS;
     }
+#endif
 
     if (active_scene_) {
         active_scene_->handleEvent(event);