```html
<style>

/* =========================================
   MAZECOCLEAN - MINI CATÁLOGOS DINÁMICOS
   STYLE MAESTRO
========================================= */

/* ===== BODY ===== */

body {
  background: #f4f6f8;
  font-family: Arial, sans-serif;
}

/* ===== CONTENEDOR PRINCIPAL ===== */

.catalogo {
  max-width: 900px;
  margin: 40px auto;
  background: #ffffff;
  padding: 30px 35px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.catalogo h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #2c3e50;
  font-weight: 700;
}

/* ===== BOTÓN VOLVER ===== */

.btn-volver {
  display: inline-block;
  margin-bottom: 20px;
  color: #2ecc71;
  text-decoration: none;
  font-weight: bold;
}

/* =========================================
   TABLA PRODUCTOS
========================================= */

.tabla-productos {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tabla-productos th {
  background: #2ecc71;
  color: white;
  padding: 12px;
}

.tabla-productos td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}

.tabla-productos th:first-child,
.tabla-productos td:first-child {
  text-align: left;
  width: 70%;
}

.tabla-productos th:last-child {
  text-align: center;
}

.tabla-productos td:last-child {
  text-align: center;
  width: 30%;
  white-space: nowrap;
  font-weight: bold;
  color: #27ae60;
  font-size: 15px;
}

.tabla-productos tr {
  transition: all 0.2s ease;
}

.tabla-productos tr:hover {
  background: #eefaf3;
  transform: scale(1.01);
  cursor: pointer;
}

/* =========================================
   SECCIÓN ENVASES
========================================= */

.envases {
  margin-top: 35px;
  padding: 20px;
  background: #f9fdfb;
  border-radius: 10px;
  border: 1px solid #e5f5ec;
}

.envases h3 {
  text-align: center;
  color: #27ae60;
  margin-bottom: 10px;
}

.envases p {
  text-align: center;
  color: #555;
  line-height: 1.5;
}

/* ===== TABLA ENVASES ===== */

.tabla-envases {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tabla-envases th {
  background: #2ecc71;
  color: white;
  padding: 12px;
}

.tabla-envases td {
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
}

.tabla-envases th:first-child,
.tabla-envases td:first-child {
  text-align: left;
  width: 70%;
}

.tabla-envases th:last-child {
  text-align: center;
}

.tabla-envases td:last-child {
  text-align: center;
  width: 30%;
  white-space: nowrap;
  font-weight: bold;
  color: #27ae60;
}

/* =========================================
   MODAL PRODUCTO
========================================= */

.modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  justify-content: center;
  align-items: center;
  z-index: 1000;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: all;
}

.modal-contenido {
  position: relative;

  background: #ffffff;
  padding: 28px;
  border-radius: 12px;

  width: 450px;
  max-width: 90%;
  max-height: 80vh;

  overflow-y: auto;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.modal.show .modal-contenido {
  transform: scale(1);
}

.modal-contenido h2 {
  font-weight: bold;
  letter-spacing: 0.5px;
}

#descripcion {
  text-align: justify;
  line-height: 1.7;
  margin-top: 10px;
}

/* ===== BOTÓN CERRAR ===== */

.cerrar {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 30px;
  height: 30px;

  background: #e74c3c;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 6px;

  font-weight: bold;
  font-size: 18px;

  cursor: pointer;
  transition: 0.2s;
}

.cerrar:hover {
  background: #c0392b;
  transform: scale(1.1);
}

/* =========================================
   WHATSAPP FLOTANTE
========================================= */

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;

  background: #25D366;
  color: white;

  padding: 14px 18px;

  border-radius: 50px;

  text-decoration: none;
  font-weight: bold;

  box-shadow: 0 5px 15px rgba(0,0,0,0.2);

  z-index: 999;

  transition: transform 0.2s ease;

  display: inline-block;
}

.whatsapp-float:hover {
  transform: scale(1.05);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

  .catalogo {
    padding: 20px 15px;
    margin: 20px 10px;
  }

  .catalogo h2 {
    font-size: 20px;
  }

  .tabla-productos td,
  .tabla-productos th {
    padding: 8px;
    font-size: 14px;
  }

  .tabla-productos td:first-child {
    width: 60%;
  }

  .tabla-productos td:last-child {
    width: 40%;
    font-size: 14px;
  }

  .btn-volver {
    display: block;
    text-align: center;
    margin: 10px auto;
    width: 90%;
  }
}

</style>
```
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hogar Economico</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

<a href="index.html" class="btn-volver">← Volver</a>

<div class="catalogo">


<h2>Productos Para el Hogar y La Oficina<br>Calidad Económico</h2>

<table class="tabla-productos">

  <tr>
    <th>PRODUCTO</th>
    <th>PRECIO POR LITRO</th>
  </tr>

  <tr onclick="abrir('maz_color', this)">
    <td>MAZ COLOR</td>
    <td>$15.00</td>
  </tr>

  <tr onclick="abrir('maz_ariel', this)">
    <td>MAZ ARIEL</td>
    <td>$15.00</td>
  </tr>

  <tr onclick="abrir('ariel_dawny', this)">
  <td>ARIEL-DAWNY</td>
  <td>$15.00</td>
</tr>

  <tr onclick="abrir('jabon_zote', this)">
    <td>JABÓN ZOTE</td>
    <td>$15.00</td>
  </tr>

  <tr onclick="abrir('deterpino', this)">
  <td>DETERPINO</td>
  <td>15.00</td>
</tr>

<tr onclick="abrir('trastes', this)">
  <td>LAVATRASTES</td>
  <td>$21.00</td>
</tr>

<tr onclick="abrir('base_tipo_fabuloso', this)">
  <td>CONCENTRADO PARA LIMPIAPISOS TIPO "FABULOSO"</td>
  <td>$65.00</td>
</tr>

</table>

<!-- 👇 AQUÍ VA ENVASES -->
<div class="envases">
  <h3>Envases Retornables</h3>

  <p>
    El costo del envase se cobra únicamente en la primera compra.
    En compras posteriores puede reutilizarlo y solo paga el producto.
  </p>
<p style="text-align:center; font-weight:bold; color:#27ae60;">
💡 Recomendamos envase de 20L para mayor ahorro
</p>

  <table class="tabla-envases">
    <tr>
      <th>ENVASE</th>
      <th>PRECIO</th>
    </tr>

    <tr>
      <td>Envase 1 Litro</td>
      <td>$5,00</td>
    </tr>

    <tr>
      <td>Envase 5 Litros</td>
      <td>$25.00</td>
    </tr>

    <tr>
      <td>Envase 20 Litros</td>
      <td>$40.00</td>
    </tr>
  </table>
</div>

<script>
const productos = {

  maz_color: {
    descripcion: `Contratipo económico del "Mas Color" de marca. Para ropa negra, blanca o de color.
    Recomendamos usar 100 ml por carga de lavadora de 10 kg.
    Si desea darle un trato especial a su ropa negra, disponemos de "Maz Negro".`
  },

  maz_ariel: {
    descripcion: `Contratipo económico del "Ariel"de marca.
    Recomendamos usar 100 ml por carga de lavadora de 10 kg.`
  },

  ariel_dawny: {
    descripcion: `Contratipo económico del "Ariel Downy" de marca.
    Recomendamos usar 100 ml por carga de lavadora de 10 kg.`
  },

  jabon_zote: {
    descripcion: `Contratipo económico del "Jabón Zote Líquido", de marca.
    Recomendamos usar 100 ml por carga de lavadora de 10 kg.`
  },

  deterpino: {
   descripcion: `Jabón para ropa con aceite de pino, dandole poder desengrasante.
   Recomendamos usar 100 ml por carga de lavadora de 10 kg.`

},

  trastes: {
   descripcion: `Lavatrastes económico, amable con sus manos y muy eficiente en el lavado de todo
   tipo de loza y cristaleria.
   La mejor manera de usarlo es en forma directa, humedeciendo la fibra con el producto y tallar
   directamente.`
},

base_tipo_fabuloso: {
  descripcion: `Contratipo del "Fabuloso". Ideal para limpiar pisos, baños y excusados. 
  Tenemos agradables aromas como:
  Lavanda, Brisa Marina, Manzana, Lima Limón, Frutal, Canela.
  Cada litro de "Base" lo diluye con 9 lts. más de agua para obtener 10 lts. de producto listo para usar.
  Cada litro de "Base" concentrada le rinde para 10 lts. de producto terminado.
  Coloque 20-40 ml de producto en 15 litros de agua para trapear.
  Para limpiar azulejos y piezas del baño atomice el producto directo y 
  extiendalo con un lienzo para limpiar`
},
};
function abrir(producto, elemento) {

  // quitar selección previa
  document.querySelectorAll(".tabla-productos tr").forEach(tr => {
    tr.classList.remove("active");
  });

  // marcar fila activa
  elemento.classList.add("active");

  // título bonito
  const nombreProducto = elemento.querySelector("td").innerText;

document.getElementById("titulo").innerText = nombreProducto;

  // contenido
  document.getElementById("descripcion").innerHTML =
    productos[producto].descripcion;
// 👉 WHATSAPP DINÁMICO
  
  const mensaje = encodeURIComponent(`Hola, quiero comprar el producto: ${nombreProducto}`);

  document.querySelector(".whatsapp-float").href =
    `https://wa.me/523334047830?text=${mensaje}`;

  // mostrar modal
  document.getElementById("modal").classList.add("show");
}

function cerrar() {
  document.getElementById("modal").classList.remove("show");
}
</script>

<div id="modal" class="modal">
  <div class="modal-contenido">
    <span class="cerrar" onclick="cerrar()">×</span>

    <h2 id="titulo"></h2>
    <p id="descripcion"></p>

  </div>
</div>

<!-- contenido de la página -->
<div class="envases">...</div>

<!-- BOTÓN WHATSAPP -->
<a href="https://wa.me/523334047830?text=Hola%20me%20interesa%20información"
   class="whatsapp-float"
   target="_blank">
  💬 WhatsApp
</a>

</body>