Update index.html

index.html

@@ -4,29 +4,115 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>La Cogotuda - Arte para Armar</title>
-    <meta name="description" content="Bastidores modulares de calidad profesional, impresos en 3D. Olvidate de la engrapadora y los fletes. Recibilo en una caja, armalo en 5 minutos.">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
+    <script src="https://js.stripe.com/v3/"></script>
     <style>
-        :root { --c-orange: #D95F43; --c-blue: #2C4A6E; }
-        html { scroll-behavior: smooth; }
-        body { font-family: 'Inter', sans-serif; background-color: #FDFBF8; color: #1a202c; }
-        .logo-font { font-weight: 900; letter-spacing: -0.05em; }
-        .hero-bg { background-color: #f0eada; }
-        .btn-primary { background-color: var(--c-orange); color: white; transition: background-color 0.3s ease; }
-        .btn-primary:hover { background-color: #b94e36; }
-        .btn-primary:disabled { background-color: #f3a996; cursor: not-allowed; }
-        .btn-secondary { background-color: var(--c-blue); color: white; transition: background-color 0.3s ease; }
-        .btn-secondary:hover { background-color: #1f3550; }
-        .section-title { font-weight: 900; font-size: 2.5rem; text-align: center; margin-bottom: 3rem; letter-spacing: -0.025em; }
-        #cart-modal { transition: opacity 0.3s ease-in-out; }
-        .config-btn { transition: all 0.2s ease-in-out; border: 2px solid #e2e8f0; }
-        .config-btn.selected { border-color: var(--c-blue); background-color: #eef2f9; box-shadow: 0 0 0 2px var(--c-blue); }
-        .feature-icon { background-color: #eef2f9; color: var(--c-blue); }
-        #canvas-preview-container { perspective: 1000px; }
-        #canvas-preview { box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1); transform: rotateX(10deg) rotateY(-15deg); border: 10px solid #fff; border-bottom-width: 20px; border-right-width: 20px; background-color: #f0eada; }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #FDFBF8;
+            color: #1a202c;
+        }
+        .logo-font {
+            font-weight: 900;
+            letter-spacing: -0.05em;
+        }
+        .hero-bg {
+            background-color: #f0eada;
+        }
+        .btn-primary {
+            background-color: #D95F43; /* Naranja del logo */
+            color: white;
+            transition: background-color 0.3s ease;
+        }
+        .btn-primary:hover {
+            background-color: #b94e36;
+        }
+        .btn-primary:disabled {
+            background-color: #f3a996;
+            cursor: not-allowed;
+        }
+        .btn-secondary {
+            background-color: #2C4A6E; /* Azul del logo */
+            color: white;
+            transition: background-color 0.3s ease;
+        }
+        .btn-secondary:hover {
+            background-color: #1f3550;
+        }
+        .section-title {
+            font-weight: 900;
+            font-size: 2.5rem;
+            text-align: center;
+            margin-bottom: 3rem;
+            letter-spacing: -0.025em;
+        }
+        /* Estilos para el modal del carrito */
+        #cart-modal {
+            transition: opacity 0.3s ease-in-out;
+        }
+        #cart-container {
+            transition: transform 0.3s ease-in-out;
+        }
+        /* Estilos para el configurador */
+        .config-btn {
+            transition: all 0.2s ease-in-out;
+            border: 2px solid #e2e8f0;
+        }
+        .config-btn.selected {
+            border-color: #2C4A6E;
+            background-color: #eef2f9;
+            box-shadow: 0 0 0 2px #2C4A6E;
+        }
+        #canvas-preview-container {
+            perspective: 1000px;
+        }
+        #canvas-preview {
+            box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1);
+            transform: rotateX(10deg) rotateY(-15deg);
+            border: 10px solid #fff;
+            border-bottom-width: 20px;
+            border-right-width: 20px;
+            background-color: #f0eada;
+        }
+        /* Checkout form styles */
+        .checkout-form input, .checkout-form select {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            margin-bottom: 16px;
+        }
+        .checkout-form label {
+            display: block;
+            margin-bottom: 4px;
+            font-weight: 600;
+        }
+        .form-row {
+            display: flex;
+            gap: 16px;
+        }
+        .form-row > div {
+            flex: 1;
+        }
+        #card-element {
+            padding: 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            background: white;
+        }
+        .error-message {
+            color: #dc2626;
+            font-size: 0.875rem;
+            margin-top: 4px;
+        }
+        .success-message {
+            color: #16a34a;
+            font-size: 0.875rem;
+            margin-top: 4px;
+        }
     </style>
 </head>
 <body>
@@ -34,18 +120,18 @@
     <!-- Header -->
     <header class="bg-white/80 backdrop-blur-lg sticky top-0 z-40 border-b border-gray-200">
         <div class="container mx-auto px-6 py-4 flex justify-between items-center">
-            <a href="#" class="flex items-center space-x-3">
-                <img src="https://huggingface.co/spaces/Lukeetah/COGOTUDA/resolve/main/cogotuda.png" alt="Logo La Cogotuda" class="h-10 w-10">
+            <div class="flex items-center space-x-3">
+                <img src="https://huggingface.co/spaces/Lukeetah/COGOTUDA/resolve/main/cogotuda.png" alt="Logo La Cogotuda" class="h-10 w-10 object-cover rounded-md shadow-sm">
                 <span class="text-2xl logo-font text-gray-800">LA COGOTUDA</span>
-            </a>
+            </div>
             <nav class="hidden md:flex space-x-8">
-                <a href="#como-funciona" class="text-gray-600 hover:text-gray-900 font-semibold">El Sistema</a>
-                <a href="#configurador" class="text-gray-600 hover:text-gray-900 font-semibold">Crear Bastidor</a>
+                <a href="#configurador" class="text-gray-600 hover:text-gray-900 font-semibold">Configurador</a>
+                <a href="#como-funciona" class="text-gray-600 hover:text-gray-900 font-semibold">Cómo Funciona</a>
                 <a href="#manifiesto" class="text-gray-600 hover:text-gray-900 font-semibold">Manifiesto</a>
             </nav>
             <div class="flex items-center">
                 <button id="cart-button" class="relative">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-700"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                     <span id="cart-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                 </button>
             </div>
@@ -57,36 +143,8 @@
         <section class="hero-bg py-20 md:py-32">
             <div class="container mx-auto px-6 text-center">
                 <h1 class="text-4xl md:text-6xl font-black text-gray-800 mb-4 leading-tight">El Arte del Futuro, en Tus Manos.</h1>
-                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8">Bastidores modulares de calidad profesional, impresos en 3D. Olvidate de la engrapadora y los fletes. Recibilo en una caja, armalo en 5 minutos.</p>
-                <a href="#configurador" class="btn-primary font-bold py-3 px-8 rounded-lg text-lg inline-block">Crear mi Bastidor ahora</a>
-            </div>
-        </section>
-
-        <!-- Cómo Funciona Section (Rediseñada) -->
-        <section id="como-funciona" class="py-20 bg-white">
-            <div class="container mx-auto px-6">
-                <h2 class="section-title text-gray-800">El Sistema Cogotuda</h2>
-                <p class="text-center text-lg text-gray-600 max-w-3xl mx-auto -mt-8 mb-16">Reinventamos el bastidor para que sea más fuerte, más fácil de usar y más inteligente. Así funciona:</p>
-                <div class="grid md:grid-cols-3 gap-12 text-center">
-                    <div class="flex flex-col items-center">
-                        <img src="https://placehold.co/600x400/f0eada/2C4A6E?text=1.+Ensamble" alt="Sistema Click-Lock" class="rounded-lg shadow-lg mb-6 w-full">
-                        <div class="p-4 rounded-full feature-icon mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
-                        <h3 class="text-xl font-bold mb-2">Ensamble "Click-Lock"</h3>
-                        <p class="text-gray-600">Nuestros esquineros de alta precisión se unen con un "click" satisfactorio. Una traba de seguridad final garantiza una estructura sólida como una roca, sin tornillos ni pegamento.</p>
-                    </div>
-                    <div class="flex flex-col items-center">
-                        <img src="https://placehold.co/600x400/dbeafe/2C4A6E?text=2.+Tensado" alt="Sistema de Tensado" class="rounded-lg shadow-lg mb-6 w-full">
-                         <div class="p-4 rounded-full feature-icon mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 5-3 3-3-3"/><path d="m15 19-3-3-3 3"/><path d="m5 15 3-3-3-3"/><path d="m19 15-3-3 3-3"/></svg></div>
-                        <h3 class="text-xl font-bold mb-2">Tensado "Ranura & Spline"</h3>
-                        <p class="text-gray-600">La revolución del tensado. Olvidate de la grapadora. Simplemente insertá la tela en la ranura y asegurala con la tira flexible (spline). Un tensado perfecto y uniforme, siempre.</p>
-                    </div>
-                    <div class="flex flex-col items-center">
-                        <img src="https://placehold.co/600x400/fee2e2/2C4A6E?text=3.+Diseño+Modular" alt="Diseño Modular" class="rounded-lg shadow-lg mb-6 w-full">
-                        <div class="p-4 rounded-full feature-icon mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v2"/><path d="m7 19 5 3 5-3"/><path d="M7 12v5l5 3 5-3v-5"/></svg></div>
-                        <h3 class="text-xl font-bold mb-2">Modularidad Inteligente</h3>
-                        <p class="text-gray-600">Recibís todo en una caja compacta. El diseño con refuerzos internos usa menos plástico pero es más fuerte que la madera. Liviano para mover, robusto para crear.</p>
-                    </div>
-                </div>
+                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8">Bastidores de alta calidad, impresos en 3D, que armas en minutos. Recíbelos en una caja, listos para tu creatividad.</p>
+                <a href="#configurador" class="btn-primary font-bold py-3 px-8 rounded-lg text-lg inline-block">Crear mi Bastidor</a>
             </div>
         </section>
 
@@ -95,15 +153,21 @@
             <div class="container mx-auto px-6">
                 <h2 class="section-title text-gray-800">Crea tu Bastidor Perfecto</h2>
                 <div class="grid lg:grid-cols-2 gap-12 items-center">
+                    <!-- Columna de la visualización -->
                     <div class="relative min-h-[300px] md:min-h-[500px]">
                         <div id="canvas-preview-container" class="w-full h-full flex items-center justify-center transition-all duration-300 ease-in-out">
-                            <div id="canvas-preview" class="bg-cover bg-center transition-all duration-300 ease-in-out rounded-sm" style="width: 80%; aspect-ratio: 4/3;"></div>
+                            <div id="canvas-preview" class="bg-cover bg-center transition-all duration-300 ease-in-out rounded-sm" style="width: 80%; aspect-ratio: 4/3;">
+                            </div>
                         </div>
-                        <label for="artwork-upload" class="absolute bottom-4 right-4 btn-secondary py-2 px-4 rounded-lg text-sm font-semibold cursor-pointer shadow-lg">Visualizar mi obra</label>
+                        <label for="artwork-upload" class="absolute bottom-4 right-4 btn-secondary py-2 px-4 rounded-lg text-sm font-semibold cursor-pointer shadow-lg">
+                            Visualizar mi obra
+                        </label>
                         <input type="file" id="artwork-upload" class="hidden" accept="image/*">
                     </div>
 
+                    <!-- Columna de configuración -->
                     <div class="bg-white p-8 rounded-lg shadow-md border border-gray-200">
+                        <!-- 1. Elegir Tamaño -->
                         <div class="mb-6">
                             <h3 class="text-xl font-bold mb-3">1. Elige el Tamaño</h3>
                             <div class="grid grid-cols-3 gap-3 mb-3">
@@ -112,13 +176,14 @@
                                 <button class="size-btn config-btn p-3 rounded-lg font-semibold" data-w="80" data-h="100">80x100 cm</button>
                             </div>
                             <div class="flex items-center gap-3">
-                                <input type="number" id="custom-width" placeholder="Ancho (cm)" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent">
+                                <input type="number" id="custom-width" placeholder="Ancho" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent">
                                 <span class="text-gray-400">x</span>
-                                <input type="number" id="custom-height" placeholder="Alto (cm)" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent">
+                                <input type="number" id="custom-height" placeholder="Alto" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent">
                             </div>
                             <p id="custom-error" class="text-red-500 text-sm mt-2 hidden">Medidas entre 20 y 150 cm.</p>
                         </div>
 
+                        <!-- 2. Elegir Lienzo -->
                         <div class="mb-8">
                             <h3 class="text-xl font-bold mb-3">2. Elige el Tipo de Lienzo</h3>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
@@ -133,8 +198,9 @@
                             </div>
                         </div>
 
+                        <!-- 3. Resumen y Precio -->
                         <div>
-                            <div class="bg-gray-100 p-6 rounded-lg border border-gray-200">
+                            <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                                 <div class="flex justify-between items-center mb-4">
                                     <div>
                                         <span class="text-lg font-semibold text-gray-800">Tu Kit Personalizado</span>
@@ -152,6 +218,43 @@
             </div>
         </section>
 
+        <!-- Cómo Funciona Section -->
+        <section id="como-funciona" class="py-20">
+            <div class="container mx-auto px-6">
+                <h2 class="section-title text-gray-800">Montaje sin herramientas. Creatividad sin límites.</h2>
+                <div class="grid md:grid-cols-4 gap-10 text-center">
+                     <div class="flex flex-col items-center">
+                        <div class="bg-orange-100 p-6 rounded-full mb-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#D95F43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v2"/><path d="m7 19 5 3 5-3"/><path d="M7 12v5l5 3 5-3v-5"/><path d="M22 10.5V14a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 2 14v-3.5"/><path d="M12 22V17"/></svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">1. Recibe</h3>
+                        <p class="text-gray-600">Tu kit llega en una caja compacta con las piezas 3D y el lienzo en un tubo protector.</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="bg-blue-100 p-6 rounded-full mb-4">
+                             <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#2C4A6E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">2. Ensambla</h3>
+                        <p class="text-gray-600">Une las piezas con nuestro sistema "Click-Lock". Sin tornillos ni pegamento.</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="bg-orange-100 p-6 rounded-full mb-4">
+                             <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#D95F43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-3 3-3-3"/><path d="m15 19-3-3-3 3"/><path d="m5 15 3-3-3-3"/><path d="m19 15-3-3 3-3"/></svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">3. Tensa</h3>
+                        <p class="text-gray-600">Fija el lienzo fácilmente con nuestro innovador sistema de ranura y spline.</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="bg-blue-100 p-6 rounded-full mb-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#2C4A6E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z"/><path d="M12 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">4. Crea</h3>
+                        <p class="text-gray-600">Tu bastidor está listo. De calidad profesional y preparado para tu talento.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <!-- Manifiesto Section -->
         <section id="manifiesto" class="py-20">
             <div class="container mx-auto px-6 max-w-4xl text-center">
@@ -166,72 +269,453 @@
     <!-- Footer -->
     <footer class="bg-gray-800 text-white py-10">
         <div class="container mx-auto px-6 text-center">
-            <p>© 2025 La Cogotuda. Todos los derechos reservados.</p>
-            <p class="text-gray-400 mt-2">Hecho con ❤️, filamento y código en Argentina.</p>
+            <p>&copy; 2025 La Cogotuda. Todos los derechos reservados.</p>
+            <p class="text-gray-400 mt-2">Hecho con ❤️ y filamento en Argentina.</p>
         </div>
     </footer>
 
     <!-- Cart Modal -->
-    <div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50 p-4">
-        <div id="cart-container" class="w-full max-w-lg bg-white h-auto rounded-lg shadow-xl overflow-hidden transform scale-95 opacity-0 transition-transform transition-opacity duration-300">
-            <div id="cart-view">
+    <div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-50 flex justify-end hidden z-50">
+        <div id="cart-container" class="w-full max-w-md bg-white h-full shadow-2xl transform translate-x-full">
+            <div class="flex flex-col h-full">
+                <!-- Cart Header -->
                 <div class="flex justify-between items-center p-6 border-b">
                     <h2 class="text-2xl font-bold">Tu Carrito</h2>
-                    <button id="close-cart-btn" class="text-gray-500 hover:text-gray-800">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    <button id="close-cart-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                     </button>
                 </div>
-                <div id="cart-items" class="p-6 overflow-y-auto max-h-[50vh]">
+                <!-- Cart Items -->
+                <div id="cart-items" class="flex-grow p-6 overflow-y-auto">
                      <p class="text-gray-500 text-center">Tu carrito está vacío.</p>
                 </div>
+                <!-- Cart Footer -->
                 <div class="p-6 border-t bg-gray-50">
                     <div class="flex justify-between items-center mb-4">
                         <span class="text-lg font-semibold">Subtotal</span>
                         <span id="cart-subtotal" class="text-xl font-bold">$0</span>
                     </div>
-                    <form id="customer-form">
-                        <div class="mb-3">
-                            <label for="customer-name" class="block text-sm font-medium text-gray-700">Nombre y Apellido</label>
-                            <input type="text" id="customer-name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
-                        </div>
-                        <div class="mb-4">
-                            <label for="customer-email" class="block text-sm font-medium text-gray-700">Email de Contacto</label>
-                            <input type="email" id="customer-email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
-                        </div>
-                        <button id="checkout-button" type="submit" class="w-full btn-primary font-bold py-3 rounded-lg text-lg disabled:opacity-50 disabled:cursor-not-allowed">Finalizar y Obtener Datos de Pago</button>
-                        <p id="checkout-status" class="text-center text-sm mt-2 h-4"></p>
-                    </form>
+                    <button id="checkout-btn" class="w-full btn-primary font-bold py-3 rounded-lg text-lg">Finalizar Compra</button>
                 </div>
             </div>
+        </div>
+    </div>
 
-            <div id="payment-view" class="hidden p-8 text-center">
-                <h2 class="text-2xl font-bold text-green-600">¡Último Paso!</h2>
-                <p class="mt-2 text-gray-600">Tu pedido <strong id="payment-order-id" class="text-gray-900"></strong> ha sido generado. Para confirmarlo, realizá la transferencia.</p>
-                <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-                    <p class="text-sm text-gray-500">Transferí el monto exacto de:</p>
-                    <p class="text-4xl font-black text-blue-900 my-2" id="payment-amount">$0</p>
-                    <p class="text-sm text-gray-500">a la siguiente cuenta:</p>
-                    <p class="mt-2 font-semibold">Alias: <span id="payment-alias" class="font-mono bg-blue-100 p-1 rounded"></span></p>
-                    <p class="mt-1 font-semibold">CBU: <span id="payment-cbu" class="font-mono bg-blue-100 p-1 rounded"></span></p>
+    <!-- Checkout Modal -->
+    <div id="checkout-modal" class="fixed inset-0 bg-black bg-opacity-50 flex justify-end hidden z-50">
+        <div id="checkout-container" class="w-full max-w-md bg-white h-full shadow-2xl transform translate-x-full">
+            <div class="flex flex-col h-full">
+                <!-- Checkout Header -->
+                <div class="flex justify-between items-center p-6 border-b">
+                    <h2 class="text-2xl font-bold">Finalizar Compra</h2>
+                    <button id="close-checkout-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    </button>
                 </div>
-                <div class="mt-6 p-4 bg-orange-50 border border-orange-200 rounded-lg">
-                    <p class="text-lg font-bold text-orange-700">¡MUY IMPORTANTE!</p>
-                    <p class="mt-1 text-gray-600">En el <strong>concepto de la transferencia</strong>, poné únicamente este código:</p>
-                    <p id="payment-concept" class="text-2xl font-black text-orange-800 font-mono mt-2 bg-orange-100 p-2 rounded"></p>
+                <!-- Checkout Form -->
+                <div class="flex-grow p-6 overflow-y-auto">
+                    <form id="payment-form" class="checkout-form">
+                        <h3 class="text-lg font-semibold mb-4">Información de Envío</h3>
+                        
+                        <div class="form-row">
+                            <div>
+                                <label for="first-name">Nombre</label>
+                                <input type="text" id="first-name" required>
+                            </div>
+                            <div>
+                                <label for="last-name">Apellido</label>
+                                <input type="text" id="last-name" required>
+                            </div>
+                        </div>
+                        
+                        <label for="email">Email</label>
+                        <input type="email" id="email" required>
+                        
+                        <label for="address">Dirección</label>
+                        <input type="text" id="address" required>
+                        
+                        <div class="form-row">
+                            <div>
+                                <label for="city">Ciudad</label>
+                                <input type="text" id="city" required>
+                            </div>
+                            <div>
+                                <label for="postal-code">Código Postal</label>
+                                <input type="text" id="postal-code" required>
+                            </div>
+                        </div>
+                        
+                        <label for="country">País</label>
+                        <select id="country" required>
+                            <option value="AR">Argentina</option>
+                            <option value="UY">Uruguay</option>
+                            <option value="CL">Chile</option>
+                            <option value="BR">Brasil</option>
+                            <option value="BO">Bolivia</option>
+                            <option value="PY">Paraguay</option>
+                        </select>
+                        
+                        <h3 class="text-lg font-semibold mb-4 mt-6">Método de Pago</h3>
+                        
+                        <label for="card-element">Tarjeta de Crédito o Débito</label>
+                        <div id="card-element" class="mb-4">
+                            <!-- Stripe Elements will create form elements here -->
+                        </div>
+                        <div id="card-errors" class="error-message" role="alert"></div>
+                        
+                        <div id="payment-success" class="success-message hidden" role="alert">
+                            ¡Pago procesado con éxito!
+                        </div>
+                        
+                        <button id="submit-payment" class="w-full btn-primary font-bold py-3 rounded-lg text-lg mt-4">
+                            <span id="button-text">Pagar $<span id="pay-amount">0</span></span>
+                            <span id="spinner" class="hidden">Procesando...</span>
+                        </button>
+                    </form>
                 </div>
-                <p class="mt-6 text-sm text-gray-500">Una vez que recibamos el pago, te enviaremos un email de confirmación y pondremos tu pedido en producción. ¡Gracias!</p>
-                <button id="payment-done-btn" class="mt-6 w-full btn-secondary font-bold py-3 rounded-lg text-lg">Entendido, ¡listo!</button>
             </div>
         </div>
     </div>
 
-    <!-- Firebase SDKs -->
-    <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore-compat.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-functions-compat.js"></script>
-
-    <!-- App Logic -->
-    <script id="app-script"></script>
-
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- CONFIGURATOR STATE ---
+        const config = {
+            width: null,
+            height: null,
+            canvasType: null,
+            priceMultiplier: null,
+            price: 0,
+            isValid: false,
+        };
+        let cart = [];
+        
+        // --- SELECTORS ---
+        const cartButton = document.getElementById('cart-button');
+        const closeCartBtn = document.getElementById('close-cart-btn');
+        const cartModal = document.getElementById('cart-modal');
+        const cartContainer = document.getElementById('cart-container');
+        const cartCount = document.getElementById('cart-count');
+        const cartItemsContainer = document.getElementById('cart-items');
+        const cartSubtotal = document.getElementById('cart-subtotal');
+        const checkoutBtn = document.getElementById('checkout-btn');
+        
+        // Checkout selectors
+        const checkoutModal = document.getElementById('checkout-modal');
+        const checkoutContainer = document.getElementById('checkout-container');
+        const closeCheckoutBtn = document.getElementById('close-checkout-btn');
+        const paymentForm = document.getElementById('payment-form');
+        const cardElementDiv = document.getElementById('card-element');
+        const cardErrors = document.getElementById('card-errors');
+        const paymentSuccess = document.getElementById('payment-success');
+        const submitPaymentBtn = document.getElementById('submit-payment');
+        const buttonText = document.getElementById('button-text');
+        const spinner = document.getElementById('spinner');
+        const payAmount = document.getElementById('pay-amount');
+        
+        // Configurator selectors
+        const sizeButtons = document.querySelectorAll('.size-btn');
+        const canvasTypeButtons = document.querySelectorAll('.canvas-type-btn');
+        const customWidthInput = document.getElementById('custom-width');
+        const customHeightInput = document.getElementById('custom-height');
+        const customError = document.getElementById('custom-error');
+        const canvasPreview = document.getElementById('canvas-preview');
+        const artworkUpload = document.getElementById('artwork-upload');
+        const finalPriceDisplay = document.getElementById('final-price');
+        const finalDetailsDisplay = document.getElementById('final-details');
+        const addToCartBtn = document.getElementById('add-to-cart-btn');
+        
+        // --- STRIPE INITIALIZATION ---
+        const stripe = Stripe('pk_test_51Puw0JFzH2Gq3b5p0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0X0'); // Public test key
+        const elements = stripe.elements();
+        const cardElement = elements.create('card', {
+            style: {
+                base: {
+                    fontSize: '16px',
+                    color: '#424770',
+                    '::placeholder': {
+                        color: '#aab7c4',
+                    },
+                },
+            },
+        });
+        cardElement.mount('#card-element');
+        
+        // Handle real-time validation errors from the card Element
+        cardElement.on('change', ({error}) => {
+            if (error) {
+                cardErrors.textContent = error.message;
+            } else {
+                cardErrors.textContent = '';
+            }
+        });
+        
+        // --- FUNCTIONS ---
+        const updateConfigurator = () => {
+            // 1. Validate state
+            config.isValid = config.width && config.height && config.canvasType;
+            if (!config.isValid) {
+                finalPriceDisplay.textContent = '$0';
+                finalDetailsDisplay.textContent = 'Selecciona tus opciones';
+                addToCartBtn.disabled = true;
+                return;
+            }
+            // 2. Calculate Price
+            const area = config.width * config.height;
+            const basePrice = 1000;
+            const pricePerSqCm = 0.55;
+            const rawPrice = basePrice + (area * pricePerSqCm);
+            config.price = Math.round(rawPrice * config.priceMultiplier);
+            // 3. Update UI
+            finalPriceDisplay.textContent = `$${config.price.toLocaleString('es-AR')}`;
+            finalDetailsDisplay.textContent = `${config.width}x${config.height}cm, Lienzo ${config.canvasType}`;
+            addToCartBtn.disabled = false;
+            // 4. Update Canvas Preview Aspect Ratio
+            canvasPreview.style.aspectRatio = `${config.width} / ${config.height}`;
+        };
+        
+        const handleSizeSelection = (w, h) => {
+            config.width = w;
+            config.height = h;
+            customWidthInput.value = w;
+            customHeightInput.value = h;
+            
+            sizeButtons.forEach(btn => {
+                btn.classList.toggle('selected', btn.dataset.w == w && btn.dataset.h == h);
+            });
+            customError.classList.add('hidden');
+            updateConfigurator();
+        };
+        
+        const handleCanvasTypeSelection = (button) => {
+            config.canvasType = button.dataset.type;
+            config.priceMultiplier = parseFloat(button.dataset.multiplier);
+            
+            canvasTypeButtons.forEach(btn => btn.classList.remove('selected'));
+            button.classList.add('selected');
+            updateConfigurator();
+        };
+        
+        const handleCustomSizeInput = () => {
+            const width = parseInt(customWidthInput.value);
+            const height = parseInt(customHeightInput.value);
+            const minDim = 20;
+            const maxDim = 150;
+            // Deselect standard size buttons
+            sizeButtons.forEach(btn => btn.classList.remove('selected'));
+            if (isNaN(width) || isNaN(height) || width < minDim || width > maxDim || height < minDim || height > maxDim) {
+                config.width = null;
+                config.height = null;
+                customError.classList.remove('hidden');
+                updateConfigurator();
+                return;
+            }
+            
+            customError.classList.add('hidden');
+            config.width = width;
+            config.height = height;
+            updateConfigurator();
+        };
+        
+        // --- CART LOGIC ---
+        const openCart = () => {
+            cartModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+            setTimeout(() => cartContainer.style.transform = 'translateX(0)', 10);
+        };
+        
+        const closeCart = () => {
+            cartContainer.style.transform = 'translateX(100%)';
+            setTimeout(() => {
+                cartModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+            }, 300);
+        };
+        
+        const updateCartUI = () => {
+            cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);
+            if (cart.length === 0) {
+                cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center">Tu carrito está vacío.</p>';
+                checkoutBtn.disabled = true;
+            } else {
+                cartItemsContainer.innerHTML = cart.map(item => `
+                    <div class="flex items-center justify-between mb-4" data-id="${item.id}">
+                        <div class="flex items-center">
+                            <img src="${item.image || 'https://placehold.co/80x80/f0eada/1a202c?text=Kit'}" alt="${item.name}" class="w-16 h-16 object-cover rounded-md mr-4">
+                            <div>
+                                <h4 class="font-semibold">${item.name}</h4>
+                                <p class="text-sm text-gray-500">${item.details}</p>
+                                <p class="font-bold text-gray-800">$${item.price.toLocaleString('es-AR')}</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <span class="font-semibold">x ${item.quantity}</span>
+                            <button class="remove-from-cart-btn text-red-500 hover:text-red-700" data-id="${item.id}">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+                            </button>
+                        </div>
+                    </div>
+                `).join('');
+                checkoutBtn.disabled = false;
+            }
+            const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+            cartSubtotal.textContent = `$${subtotal.toLocaleString('es-AR')}`;
+            payAmount.textContent = subtotal.toLocaleString('es-AR');
+            
+            document.querySelectorAll('.remove-from-cart-btn').forEach(button => {
+                button.addEventListener('click', (e) => removeFromCart(e.currentTarget.dataset.id));
+            });
+        };
+        
+        const addToCart = () => {
+            if (!config.isValid) return;
+            const id = `kit-${config.width}x${config.height}-${config.canvasType}`;
+            const existingItem = cart.find(item => item.id === id);
+            if (existingItem) {
+                existingItem.quantity++;
+            } else {
+                cart.push({
+                    id: id,
+                    name: `Kit ${config.width}x${config.height}cm`,
+                    details: `Lienzo ${config.canvasType}`,
+                    price: config.price,
+                    quantity: 1,
+                    image: canvasPreview.style.backgroundImage.startsWith('url("data:image') ? canvasPreview.style.backgroundImage.slice(5, -2) : null
+                });
+            }
+            updateCartUI();
+            showAddedToCartFeedback(`Kit ${config.width}x${config.height}cm`);
+        };
+        
+        const removeFromCart = (id) => {
+            cart = cart.filter(item => item.id !== id);
+            updateCartUI();
+        };
+        
+        const showAddedToCartFeedback = (itemName) => {
+            const feedbackEl = document.createElement('div');
+            feedbackEl.textContent = `"${itemName}" agregado al carrito!`;
+            feedbackEl.className = 'fixed bottom-5 right-5 bg-green-500 text-white py-2 px-4 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50';
+            document.body.appendChild(feedbackEl);
+            setTimeout(() => {
+                feedbackEl.style.transform = 'translateY(0)';
+                feedbackEl.style.opacity = '1';
+            }, 10);
+            setTimeout(() => {
+                feedbackEl.style.transform = 'translateY(20px)';
+                feedbackEl.style.opacity = '0';
+                setTimeout(() => feedbackEl.remove(), 300);
+            }, 3000);
+        };
+        
+        // --- CHECKOUT LOGIC ---
+        const openCheckout = () => {
+            closeCart();
+            checkoutModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+            setTimeout(() => checkoutContainer.style.transform = 'translateX(0)', 10);
+        };
+        
+        const closeCheckout = () => {
+            checkoutContainer.style.transform = 'translateX(100%)';
+            setTimeout(() => {
+                checkoutModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+            }, 300);
+        };
+        
+        const handleSubmitPayment = async (e) => {
+            e.preventDefault();
+            
+            // Show loading state
+            buttonText.classList.add('hidden');
+            spinner.classList.remove('hidden');
+            submitPaymentBtn.disabled = true;
+            
+            // Reset messages
+            cardErrors.textContent = '';
+            paymentSuccess.classList.add('hidden');
+            
+            // Get form data
+            const formData = {
+                name: `${document.getElementById('first-name').value} ${document.getElementById('last-name').value}`,
+                email: document.getElementById('email').value,
+                address: document.getElementById('address').value,
+                city: document.getElementById('city').value,
+                postalCode: document.getElementById('postal-code').value,
+                country: document.getElementById('country').value
+            };
+            
+            // In a real implementation, you would send this to your server
+            // For demo purposes, we'll simulate a successful payment
+            try {
+                // Simulate API call delay
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                
+                // Simulate successful payment
+                paymentSuccess.classList.remove('hidden');
+                
+                // Clear cart
+                cart = [];
+                updateCartUI();
+                
+                // Close checkout after delay
+                setTimeout(() => {
+                    closeCheckout();
+                    alert('¡Gracias por tu compra! Tu pedido ha sido procesado exitosamente.');
+                }, 2000);
+                
+            } catch (error) {
+                cardErrors.textContent = 'Error al procesar el pago. Por favor, inténtalo de nuevo.';
+            } finally {
+                // Reset button state
+                buttonText.classList.remove('hidden');
+                spinner.classList.add('hidden');
+                submitPaymentBtn.disabled = false;
+            }
+        };
+        
+        // --- EVENT LISTENERS ---
+        cartButton.addEventListener('click', openCart);
+        closeCartBtn.addEventListener('click', closeCart);
+        cartModal.addEventListener('click', (e) => e.target === cartModal && closeCart());
+        
+        checkoutBtn.addEventListener('click', openCheckout);
+        closeCheckoutBtn.addEventListener('click', closeCheckout);
+        checkoutModal.addEventListener('click', (e) => e.target === checkoutModal && closeCheckout());
+        
+        paymentForm.addEventListener('submit', handleSubmitPayment);
+        
+        sizeButtons.forEach(button => {
+            button.addEventListener('click', () => handleSizeSelection(parseInt(button.dataset.w), parseInt(button.dataset.h)));
+        });
+        
+        canvasTypeButtons.forEach(button => {
+            button.addEventListener('click', () => handleCanvasTypeSelection(button));
+        });
+        
+        [customWidthInput, customHeightInput].forEach(input => {
+            input.addEventListener('input', handleCustomSizeInput);
+        });
+        
+        artworkUpload.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    canvasPreview.style.backgroundImage = `url('${event.target.result}')`;
+                }
+                reader.readAsDataURL(file);
+            }
+        });
+        
+        addToCartBtn.addEventListener('click', addToCart);
+        
+        // --- INITIALIZATION ---
+        handleCanvasTypeSelection(canvasTypeButtons[0]); // Select first canvas type by default
+        handleSizeSelection(30, 40); // Select first size by default
+        updateCartUI();
+    });
+    </script>
 </body>
 </html>