diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b2ebc31
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# Archivos del sistema (Windows)
+Thumbs.db
+desktop.ini
+
+# Archivos temporales
+*.log
+*.tmp
+
+# Configuración de editores
+.vscode/
+.idea/
+
+# Node (por si después usás algo)
+node_modules/
+
+# Archivos de entorno
+.env
+
+# Archivos comprimidos
+*.zip
+*.rar
+
+# Archivos innecesarios
+*.bak
+
+# Mac (por si compartís)
+.DS_Store
\ No newline at end of file
diff --git a/imagenes/imagen_ia.jfif b/imagenes/imagen_ia.jfif
new file mode 100644
index 0000000..28afb19
Binary files /dev/null and b/imagenes/imagen_ia.jfif differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..971d677
--- /dev/null
+++ b/index.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Suscripción a GameAI Pro</title>
+
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <style>
+        body {
+            background-color: #0f172a;
+            color: #e2e8f0;
+        }
+        header, footer {
+            background: #1e293b;
+            text-align: center;
+            padding: 20px;
+        }
+        .card {
+            background: #1e293b;
+            color: white;
+        }
+        .btn-custom {
+            background-color: #22c55e;
+            color: black;
+        }
+    </style>
+</head>
+<body>
+
+<!-- Comentario: Página de suscripción -->
+
+<header>
+    <h1>GameAI Pro</h1>
+    <p>Aprendé IA para videojuegos como un profesional</p>
+</header>
+
+<nav class="navbar navbar-dark bg-dark justify-content-center">
+    <a class="nav-link text-white" href="#beneficios">Beneficios</a>
+    <a class="nav-link text-white" href="#planes">Planes</a>
+    <a class="nav-link text-white" href="#formulario">Suscribirse</a>
+</nav>
+
+<main class="container mt-4">
+
+    <section id="beneficios">
+        <h2>¿Por qué elegirnos?</h2>
+        <article>
+            <p>Con GameAI Pro vas a aprender desde cero hasta sistemas avanzados como Utility AI, Pathfinding y Perception.</p>
+
+            <ul>
+                <li>Clases prácticas</li>
+                <li>Proyectos reales</li>
+                <li>Mentoría personalizada</li>
+            </ul>
+
+            <img src="imagenes/imagen_ia.jfif" class="img-fluid" alt="IA en videojuegos">
+        </article>
+    </section>
+
+    <section id="planes" class="mt-4">
+        <h2>Planes disponibles</h2>
+        <table class="table table-dark table-striped">
+            <thead>
+                <tr>
+                    <th>Plan</th>
+                    <th>Precio</th>
+                    <th>Duración</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Básico</td>
+                    <td>$5000</td>
+                    <td>1 mes</td>
+                </tr>
+                <tr>
+                    <td>Pro</td>
+                    <td>$12000</td>
+                    <td>3 meses</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+
+    <section id="formulario" class="mt-4">
+        <button class="btn btn-warning mb-3" onclick="toggleForm()">Mostrar/Ocultar Formulario</button>
+
+        <div id="formContainer">
+            <div class="card p-4">
+                <h2>Formulario de Suscripción</h2>
+
+                <!-- SOLO SE AGREGÓ onsubmit -->
+                <form onsubmit="mostrarMensaje(event)">
+                    <div class="mb-3">
+                        <label>Nombre</label>
+                        <input type="text" class="form-control" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Apellido</label>
+                        <input type="text" class="form-control" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Email</label>
+                        <input type="email" class="form-control" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Tipo de plan</label><br>
+                        <input type="radio" name="plan" value="basico"> Básico
+                        <input type="radio" name="plan" value="pro"> Pro
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Cantidad de cuotas</label>
+                        <input type="number" class="form-control" min="1" required>
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Provincia</label>
+                        <select class="form-select">
+                            <option value="s">Santa Fe</option>
+                            <option value="e">Entre Ríos</option>
+                            <option value="c">Córdoba</option>
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <input type="checkbox"> Soy estudiante
+                    </div>
+
+                    <div class="mb-3">
+                        <label>Comentarios</label>
+                        <textarea class="form-control" rows="4"></textarea>
+                    </div>
+
+                    <button type="submit" class="btn btn-custom">Enviar</button>
+
+                    <!-- SOLO SE AGREGÓ ESTE MENSAJE -->
+                    <p id="mensajeExito" style="display:none; color: lightgreen; margin-top:10px;">
+                        ✅ Formulario enviado correctamente
+                    </p>
+
+                </form>
+            </div>
+        </div>
+    </section>
+
+</main>
+
+<footer>
+    <p>&copy; NICOLAS JUAN MURUA</p>
+</footer>
+
+<script>
+function toggleForm() {
+    const form = document.getElementById("formContainer");
+    if (form.style.display === "none") {
+        form.style.display = "block";
+    } else {
+        form.style.display = "none";
+    }
+}
+</script>
+
+<script>
+function mostrarMensaje(event) {
+    event.preventDefault();
+    const mensaje = document.getElementById("mensajeExito");
+    mensaje.style.display = "block";
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
