Update index.html

index.html

@@ -4,213 +4,262 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Lista de Precios - Mr Blonde</title>
-<script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
+:root {
+  --color1: #b9d7d9; /* Tarjetas productos */
+  --color2: #668284; /* Fondo inputs/form */
+  --color3: #2a2829; /* Fondo principal */
+  --color4: #493736; /* Botones */
+  --color5: #7b3b3b; /* Bonificación / alertas */
+}
+
 body {
-    font-family: 'Montserrat', sans-serif;
-    background-color: #1D1F21;
-    color: #F3F4F6;
-    min-height: 100vh;
-    padding: 1rem;
+  font-family: 'Montserrat', sans-serif;
+  background-color: var(--color3);
+  color: #F3F4F6;
+  padding: 1rem;
+  min-height: 100vh;
+}
+
+header, footer {
+  text-align: center;
+  border-radius: 12px;
+  padding: 1rem;
 }
-header, footer { text-align: center; }
+
 header {
-    padding: 1rem;
-    background-color: #2B3035;
-    border-radius: 12px;
-    margin-bottom: 1rem;
+  background-color: var(--color2);
+  margin-bottom: 1rem;
 }
+
 footer {
-    padding: 1rem;
-    background-color: #2B3035;
-    border-radius: 12px;
-    margin-top: 2rem;
-    font-size: 0.85rem;
-    color: #B0B0B0;
+  background-color: var(--color2);
+  margin-top: 2rem;
+  font-size: 0.85rem;
+  color: #B0B0B0;
 }
+
+/* Tarjetas */
 .card {
-    background-color: #2B3035;
-    border-radius: 12px;
-    padding: 1rem;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-    transition: transform 0.2s, box-shadow 0.2s;
+  background-color: var(--color1);
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+  transition: transform 0.2s, box-shadow 0.2s;
+  color: #1f1f1f;
 }
+
 .card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
 }
+
 .price {
-    color: #F59E0B;
-    font-weight: 600;
+  color: #F59E0B;
+  font-weight: 600;
 }
+
 .bonus {
-    color: #10B981;
-    font-weight: 500;
+  color: var(--color5);
+  font-weight: 500;
 }
+
+/* Inputs */
 input[type="number"], input[type="text"], select {
-    border-radius: 8px;
-    padding: 0.5rem;
-    border: 1px solid #374151;
-    background-color: #1D1F21;
-    color: #F3F4F6;
-    width: 100%;
-    margin-bottom: 0.5rem;
+  border-radius: 8px;
+  padding: 0.5rem;
+  border: 1px solid var(--color2);
+  background-color: var(--color2);
+  color: #F3F4F6;
+  width: 100%;
+  margin-bottom: 0.5rem;
 }
+
+/* Botones */
 button {
-    background-color: #F59E0B;
-    color: #1D1F21;
-    font-weight: 600;
-    padding: 0.75rem;
-    border-radius: 8px;
-    width: 100%;
-    transition: background-color 0.2s;
+  background-color: var(--color4);
+  color: #F3F4F6;
+  font-weight: 600;
+  padding: 0.75rem;
+  border-radius: 8px;
+  width: 100%;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: var(--color5);
 }
-button:hover { background-color: #D97706; }
-.tab-active { border-bottom: 3px solid #F59E0B; font-weight: 600; }
 
 /* Modal */
 .modal-bg {
-    display: none;
-    position: fixed;
-    z-index: 50;
-    left: 0; top: 0;
-    width: 100%; height: 100%;
-    background-color: rgba(0,0,0,0.6);
+  display: none;
+  position: fixed;
+  z-index: 50;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  background-color: rgba(0,0,0,0.6);
 }
+
 .modal-content {
-    background-color: #2B3035;
-    margin: 5% auto;
-    padding: 1.5rem;
-    border-radius: 12px;
-    max-width: 600px;
-    color: #F3F4F6;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
-    white-space: pre-line;
+  background-color: var(--color2);
+  margin: 5% auto;
+  padding: 1.5rem;
+  border-radius: 12px;
+  max-width: 600px;
+  color: #F3F4F6;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
+  white-space: pre-line;
 }
+
 .modal-header { font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }
-.modal-close {
-    float: right;
-    font-weight: bold;
-    cursor: pointer;
-    color: #F59E0B;
-}
+.modal-close { float: right; font-weight: bold; cursor: pointer; color: var(--color4); }
 </style>
 </head>
 <body>
 
-<!-- Header -->
 <header>
-    <h1 class="text-2xl font-bold mb-2">Lista de Precios - Barberías</h1>
-    <p class="text-sm mb-2">Válida desde 01/09/2025</p>
-    <p class="text-sm bg-gray-700 p-3 rounded-lg mb-2">🎁 Compra 12 unidades o más y recibí envío gratis en CABA, Rosario y Córdoba Capital. Consultá por otras localidades.</p>
+  <h1 class="text-2xl font-bold mb-2">Lista de Precios - Barberías</h1>
+  <p class="text-sm mb-2">Válida desde 01/09/2025</p>
+  <p class="text-sm p-3 rounded-lg">🎁 Compra 12 unidades o más y recibí envío gratis en CABA, Rosario y Córdoba Capital. Consultá por otras localidades.</p>
 </header>
 
-<!-- Tabs -->
-<nav class="flex justify-center mb-4 gap-2">
-    <button id="barberias-tab" class="px-4 py-2 tab-active">Venta a Barberías</button>
-    <button id="publico-tab" class="px-4 py-2">Venta al Público</button>
-</nav>
-
-<!-- Search & Filter -->
-<div class="flex flex-col md:flex-row justify-between items-center max-w-6xl mx-auto px-4 mb-4 gap-2">
-    <input type="text" id="search-input" placeholder="Buscar producto...">
-    <select id="category-filter">
-        <option value="">Todas las categorías</option>
-        <option value="pomadas">Pomadas</option>
-        <option value="aceites">Aceites</option>
-        <option value="shampoo">Shampoo</option>
-        <option value="after">After Shave</option>
-        <option value="merchandising">Merchandising</option>
-    </select>
-</div>
-
-<main class="flex-grow max-w-6xl mx-auto w-full px-4 pb-12 space-y-4">
-
-<section id="barberias-section" class="data-section">
+<main class="flex flex-col gap-4 max-w-6xl mx-auto">
 
+<!-- Productos -->
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-  <!-- Productos -->
-  <div class="card" data-category="pomadas" data-bonus="6x1/8x2">
+
+  <!-- Pomadas -->
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Pomada OS 100g</div><div class="price" data-price="10713.06">$10.713,06</div></div>
     <div class="flex justify-between items-center mt-2">
-        <input type="number" min="0" value="0" class="quantity-input">
-        <div class="bonus">Recibe: <span class="bonus-cell">0</span></div>
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
     </div>
   </div>
-  <div class="card" data-category="pomadas" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Pocket OS 50g</div><div class="price" data-price="8073.18">$8.073,18</div></div>
     <div class="flex justify-between items-center mt-2">
-        <input type="number" min="0" value="0" class="quantity-input">
-        <div class="bonus">Recibe: <span class="bonus-cell">0</span></div>
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
     </div>
   </div>
-  <div class="card" data-category="pomadas" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Pomada Mate 50g</div><div class="price" data-price="10219.57">$10.219,57</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="pomadas" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Stardust Polvo Modelador 10cc</div><div class="price" data-price="10053.80">$10.053,80</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="pomadas" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Pomada Líquida x 120ml</div><div class="price" data-price="8302.61">$8.302,61</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
 
   <!-- Shampoo -->
-  <div class="card" data-category="shampoo" data-bonus="6x1/8x2">
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Shampoo Fortalecedor 2en1 200g</div><div class="price" data-price="10310.58">$10.310,58</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
 
   <!-- Aceites -->
-  <div class="card" data-category="aceites" data-bonus="6x1/8x2">
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Aceite para Barba 20ml N°1 Azul</div><div class="price" data-price="9956.17">$9.956,17</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="aceites" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Aceite para Barba 20ml N°2 Rojo</div><div class="price" data-price="9956.17">$9.956,17</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="aceites" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Aceite para Barba 20ml N°3 Amarillo</div><div class="price" data-price="9956.17">$9.956,17</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="aceites" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Bálsamo Barba con Romero 30g</div><div class="price" data-price="8162.96">$8.162,96</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
 
   <!-- After Shave -->
-  <div class="card" data-category="after" data-bonus="6x1/8x2">
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>After Shave 100g</div><div class="price" data-price="8480.46">$8.480,46</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="merchandising" data-bonus="6x1/8x2">
+
+  <!-- Merchandising -->
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Válvula Recargable 250g para Gel Mr B</div><div class="price" data-price="1500.25">$1.500,25</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="merchandising" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Gel Afeitar Profesional 1080ml</div><div class="price" data-price="14940.09">$14.940,09</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="merchandising" data-bonus="6x1/8x2">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Crema de afeitar x 400g</div><div class="price" data-price="15735.42">$15.735,42</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
+    <div class="flex justify-between items-center mt-2">
+      <input type="number" min="0" value="0" class="quantity-input">
+      <div class="bonus">Recibe: <span class="bonus-cell"></span></div>
+    </div>
   </div>
-  <div class="card" data-category="merchandising" data-bonus="">
+
+  <!-- Merchandising Total -->
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Capas</div><div class="price" data-price="14026">$14.026</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
   </div>
-  <div class="card" data-category="merchandising" data-bonus="">
+
+  <div class="card" data-bonus="6x1/8x2">
     <div class="flex justify-between items-center"><div>Cajones Exhibidores Mr. Blonde</div><div class="price" data-price="34145">$34.145</div></div>
-    <div class="flex justify-between items-center mt-2"><input type="number" min="0" value="0" class="quantity-input"><div class="bonus">Recibe: <span class="bonus-cell">0</span></div></div>
   </div>
+
 </div>
 
 <!-- Datos cliente -->
-<div class="mt-6 bg-gray-800 p-4 rounded-lg shadow-md">
+<div class="mt-6 p-4 rounded-lg" style="background-color: var(--color2);">
   <input type="text" id="client-name" placeholder="Tu nombre">
   <input type="text" id="client-phone" placeholder="Tu teléfono">
   <select id="client-location">
@@ -224,139 +273,88 @@ button:hover { background-color: #D97706; }
   <button id="send-order">Generar Pedido</button>
 </div>
 
-</section>
-
 <!-- Modal WhatsApp -->
 <div id="whatsapp-modal" class="modal-bg">
   <div class="modal-content">
     <span class="modal-close" id="modal-close">&times;</span>
     <div class="modal-header">Pedido WhatsApp</div>
-    <pre id="modal-msg" class="whatsapp-msg"></pre>
+    <pre id="modal-msg"></pre>
     <button id="open-whatsapp" class="mt-4">Abrir en WhatsApp</button>
   </div>
 </div>
 
-</main>
-
-<footer>
-<p>© 2025 Mr Blonde. Todos los derechos reservados.</p>
-</footer>
-
 <script>
-// Tabs
-document.getElementById('barberias-tab').addEventListener('click', () => switchTab('barberias'));
-document.getElementById('publico-tab').addEventListener('click', () => switchTab('publico'));
-
-function switchTab(tabName){
-    document.querySelectorAll('.data-section').forEach(s=>s.classList.add('hidden'));
-    document.getElementById(tabName+'-section').classList.remove('hidden');
-    document.querySelectorAll('nav button').forEach(b=>b.classList.remove('tab-active'));
-    document.getElementById(tabName+'-tab').classList.add('tab-active');
-}
-
-// Filtrado
-const filterSelect = document.getElementById('category-filter');
-const searchInput = document.getElementById('search-input');
-
-function filterCards(){
-    const category = filterSelect.value;
-    const search = searchInput.value.toLowerCase();
-    document.querySelectorAll('#barberias-section .card').forEach(card=>{
-        const matchesCategory = !category || card.dataset.category===category;
-        const matchesSearch = card.textContent.toLowerCase().includes(search);
-        card.style.display = matchesCategory && matchesSearch ? 'block':'none';
-    });
-}
-filterSelect.addEventListener('change', filterCards);
-searchInput.addEventListener('input', filterCards);
-
-// Bonificación
-function calculateBonus(qty, rule){
-    if(!rule) return qty;
-    let maxTotal = qty;
-    rule.split('/').forEach(r=>{
-        const [x,y] = r.match(/\d+/g).map(Number);
-        const temp = qty + Math.floor(qty/x)*y;
-        if(temp > maxTotal) maxTotal = temp;
-    });
-    return maxTotal;
-}
-
+// Funciones JS para: calcular bonificación, total, mostrar modal, alertas
 const quantityInputs = document.querySelectorAll('.quantity-input');
 const totalAmount = document.getElementById('total-amount');
-
-quantityInputs.forEach(input=>{
-    input.addEventListener('input', ()=>{
-        let sum=0;
-        document.querySelectorAll('#barberias-section .card').forEach(card=>{
-            const qty = parseInt(card.querySelector('.quantity-input').value) || 0;
-            const price = parseFloat(card.querySelector('[data-price]').dataset.price) || 0;
-            const bonus = calculateBonus(qty, card.dataset.bonus);
-            card.querySelector('.bonus-cell').textContent = bonus > qty ? bonus : '';
-            sum += qty*price;
-        });
-        totalAmount.textContent = `$${sum.toLocaleString('es-AR',{minimumFractionDigits:2})}`;
-    });
-});
-
-// Modal WhatsApp
+const sendBtn = document.getElementById('send-order');
 const modal = document.getElementById('whatsapp-modal');
-const modalClose = document.getElementById('modal-close');
 const modalMsg = document.getElementById('modal-msg');
-const openWhatsappBtn = document.getElementById('open-whatsapp');
-
-document.getElementById('send-order').addEventListener('click', ()=>{
-    const name = document.getElementById('client-name').value.trim();
-    const phone = document.getElementById('client-phone').value.trim();
-    const location = document.getElementById('client-location').value;
-
-    if(!name || !phone || !location){
-        alert('Ingresa nombre, teléfono y localidad');
-        return;
-    }
-
-    let msg = `📋 *Pedido Mr Blonde*\n\n*Cliente:* ${name}\n*Teléfono:* ${phone}\n*Localidad:* ${location}\n\n*Productos:*\n`;
-    let total = 0;
-    let totalUnits = 0;
-    document.querySelectorAll('#barberias-section .card').forEach(card=>{
-        const qty = parseInt(card.querySelector('.quantity-input').value) || 0;
-        if(qty > 0){
-            const bonus = parseInt(card.querySelector('.bonus-cell').textContent) || 0;
-            const price = parseFloat(card.querySelector('[data-price]').dataset.price) || 0;
-            total += qty * price;
-            totalUnits += qty;
-            if(bonus > qty){
-                msg += `- ${card.querySelector('div:first-child').textContent}: ${qty} (+${bonus - qty} bonif)\n`;
-            } else {
-                msg += `- ${card.querySelector('div:first-child').textContent}: ${qty}\n`;
-            }
-        }
-    });
-
-    msg += `\n*TOTAL:* $${total.toLocaleString('es-AR',{minimumFractionDigits:2})}`;
-
-    if(totalUnits === 0){
-        alert('Selecciona al menos un producto');
-        return;
-    }
+const modalClose = document.getElementById('modal-close');
+const openWhatsAppBtn = document.getElementById('open-whatsapp');
 
-    const freeShippingLocations = ["CABA","Rosario","Córdoba Capital"];
-    if(totalUnits < 12 && freeShippingLocations.includes(location)){
-        msg += `\n\n⚠️ Recuerda: Comprando 12 unidades o más recibís envío gratis.`;
-    }
+function calculateBonus(qty, rule){
+  if(!rule) return qty;
+  let total = qty;
+  let bestBonus = qty;
+  rule.split('/').forEach(r=>{
+    const [x,y] = r.match(/\d+/g).map(Number);
+    const b = qty + Math.floor(qty/x)*y;
+    if(b > bestBonus) bestBonus = b;
+  });
+  return bestBonus;
+}
 
-    modalMsg.textContent = msg;
-    modal.style.display = 'block';
+function updateTotals(){
+  let sum = 0;
+  quantityInputs.forEach(input=>{
+    const card = input.closest('.card');
+    const qty = parseInt(input.value) || 0;
+    const price = parseFloat(card.querySelector('[data-price]').dataset.price) || 0;
+    const bonus = calculateBonus(qty, card.dataset.bonus);
+    card.querySelector('.bonus-cell').textContent = (bonus>qty)? bonus : '';
+    sum += qty*price;
+  });
+  totalAmount.textContent = `$${sum.toLocaleString('es-AR')}`;
+}
 
-    openWhatsappBtn.onclick = ()=> {
-        const whatsappNumber = '5491156101257';
-        window.open(`https://wa.me/${whatsappNumber}?text=${encodeURIComponent(msg)}`, '_blank');
+quantityInputs.forEach(input => input.addEventListener('input', updateTotals));
+
+sendBtn.addEventListener('click', ()=>{
+  const name = document.getElementById('client-name').value || 'Cliente';
+  const phone = document.getElementById('client-phone').value || 'No informado';
+  const location = document.getElementById('client-location').value || 'No informada';
+  let totalQty = 0;
+  let msg = `CLIENTE: ${name}\nTELÉFONO: ${phone}\nLOCALIDAD: ${location}\n\nPRODUCTOS:\n`;
+  quantityInputs.forEach(input=>{
+    const card = input.closest('.card');
+    const qty = parseInt(input.value) || 0;
+    if(qty>0){
+      const bonus = calculateBonus(qty, card.dataset.bonus);
+      totalQty += qty;
+      msg += `${card.querySelector('div').innerText} = ${qty}`;
+      if(bonus>qty) msg += ` (bonif: ${bonus-qty})`;
+      msg += '\n';
     }
+  });
+  msg += `\nTOTAL: ${totalAmount.textContent}\n`;
+  if(totalQty<12 && (location==='CABA' || location==='Rosario' || location==='Córdoba Capital')){
+    msg += '\n⚠️ Podés agregar más productos para recibir envío gratis 🎁';
+  }
+  modalMsg.textContent = msg;
+  modal.style.display='block';
 });
 
-modalClose.onclick = ()=>{ modal.style.display='none'; }
-window.onclick = e => { if(e.target==modal){ modal.style.display='none'; } }
+modalClose.addEventListener('click', ()=>{ modal.style.display='none'; });
+openWhatsAppBtn.addEventListener('click', ()=>{
+  const url = `https://wa.me/?text=${encodeURIComponent(modalMsg.textContent)}`;
+  window.open(url, '_blank');
+});
 </script>
 
+<footer>
+  Mr Blonde - Todos los derechos reservados
+</footer>
+
 </body>
 </html>