```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>Automotriz</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 Detallado de Autos y Autolavados<br>Calidad Premium</h2>

<table class="tabla-productos">

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

  <tr onclick="abrir('shampu_alfombras_tapiceria', this)">
    <td>SHAMPU ALFOMBRAS Y TAPICERIAS CON ABRILLANTADOR</td>
    <td>$48.00</td>
  </tr>

  <tr onclick="abrir('shampu_carrocerias', this)">
    <td>SHAMPU CARROCERIAS ALTA ESPUMA</td>
    <td>$38.00</td>
  </tr>

  <tr onclick="abrir('desengrasante_automotriz', this)">
    <td>DESENGRASANTE AUTOMOTRIZ</td>
    <td>$78.00</td>
  </tr>

  <tr onclick="abrir('lubrivinil', this)">
    <td>LUBRIVINIL LIQUIDO</td>
    <td>$95.00</td>
  </tr>

  <tr onclick="abrir('brillo_motor', this)">
  <td>BRILLO PARA MOTORES</td>
  <td>95.00</td>
</tr>

<tr onclick="abrir('gel_abrillantador_llantas', this)">
  <td>"BLACK GEL" ABRILLANTADOR DE LLANTAS</td>
  <td>48.00</td>
</tr>

<tr onclick="abrir('limpiador_universal', this)">
  <td>DESENGRASANTE LIMPIADOR UNIVERSAL</td>
  <td>$25.00</td>
</tr>

<tr onclick="abrir('aromatizante', this)">
  <td>AROMATIZANTE</td>
  <td>$40.00</td>
</tr>

<tr onclick="abrir('limpia_vidrios', this)">
  <td>LIMPIAVIDRIOS</td>
  <td>$25.00</td>
</tr>

<tr onclick="abrir('vaselina_liquida', this)">
  <td>VASELINA LIQUIDA</td>
  <td>$90.00</td>
</tr>

<tr onclick="abrir('crema_mecanico', this)">
  <td>CREMA PARA MECANICO</td>
  <td>$65.00</td>
</tr>

<tr onclick="abrir('glicerina', this)">
  <td>GLICERINA"</td>
  <td>$100.00</td>
</tr>

<tr onclick="abrir('cepillo_carrocerias', this)">
  <td>CEPILLO PARA CARROCERIAS 10"</td>
  <td>$120.00</td>
</tr>

<tr onclick="abrir('atomizador', this)">
  <td>ATOMIZADOR "USO RUDO"</td>
  <td>$30.00</td>
</tr>

<tr onclick="abrir('microfibra', this)">
  <td>MICROFIBRA</td>
  <td>$31.00</td>
</tr>


<table class="tabla-productos">
  ... todos tus productos ...
</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 = {

  shampu_alfombras_tapiceria: {
    descripcion: `Shampu para alfombras y tapicerias con abrillantador, alta y baja espuma.
    Para lavado de alfombras con maquina rotativa, o uso manual.
    Coloque 50 ml de producto en una cubeta con 15 litros de agua.
    Primero aspire, la alfombra o mueble a lavar hasta dejarlo libre de polvo.
    Lave la alfombra con la máquina rotativa o, los muebles con un cepillo de cerdas con
    dureza apropiada para tapicerias. Arrastre la jabonadura de la cubeta al mueble con el cepillo
    y talle.
    Aspire la humedad residual con la aspiradora (debe contarse con aspiradora en seco y en humedo)`
  },

  shampu_carrocerias: {
    descripcion: `Shampu para carrocerias, "Alta Espuma". Para lavado de carrocerias de cualquier vehículo
    automotriz.
    La formulación está diseñada para no lastimar, en lo mas mínimo la pintura del vehículo
    y que el enjuague sea con la mínima cantidad de agua.
    Para trenes de lavado automático use dilición de 1 lt en 100 de agua. Si usa espumadora
    utilice la mitad de la dosis.`
  },

  desengrasante_automotriz: {
    descripcion: `Para lavado de motorres de combustión interna y eliminación de grasa y
    chapopote en la parte inferior de las carrocerias. Excelente lavador de brochas que se hayan utilizado
    en la aplicación de esmalte, laca o barniz. despues de lavarlas con este producto, puede enjuagarlas
    con agua y dejar que sequen. Para lavado de piezas por inmersión en talleres o rectificadoras.
    Para lavado de motores, atomice directamente sobre el motor y retire la suciedad con agua a presión.
    Para limpieza de carrocerias, humedezca una estopa y frote los depositos de grasa o chapopote, enjuague
    inmediatamente.
    Para lavar brochas, coloquelas en un deposito con el producto, dejelas en remojo por 5 minutos, lavelas
    a chorro de agua, repita la operación si es necesario, utilizando el mismodeposito.`

  },

  lubrivinil: {
    descripcion: `Producto a base de emulsión de silicón, usado para lubricar y abrillantar tableros,
    tapicerias de piel, llantas. defensas y molduras de vinil. evita que el polvo se pegue, no deja residuos
    grasosos, no mancha y deja las superficies nrillantes.
    Uso directo, humedezca con el producto, una esponja o franela y aplique sobre la superficie
    a tratar en forma uniforme. Permita que seque y frote con una franela seca para resaltar el
    brillo y quitar el exceso de producto`
  },

  brillo_motor: {
  descripcion: `Brillo: producto a base de solución de polimero de silicon de alto peso molecular,
  en solvente de secado rapido. Después de lavado y seco el motor, aplique el producto con atomizado fino
  sobre el motor, deje que seque y el motor quedará con un brillo intenso.`
},

gel_abrillantador_llantas: {
  descripcion: `"Black Gel" Abrillantador de llantas, con una consistencia gelatinosa a base de glicerina,
  lubrica y da brillo a las llantas.
  Apliquelo directo por medio de una esponja.`
},

limpiador_universal: {
  descripcion: `Desengrasante "Limpiador Universal", producto diseñado para limpieza profunda del
  tablero del auto, tapetes y tapiceria de los autos. Tambien es muy util para la limpeza profunda de 
  llantas y rines.
  Atomice el área a limpiar, tallelo con cepillo y retirelo con un lienzo humedo, repitiendo la
  operación hasta retirar el exceso de desengrasante con mugre.`
},

aromatizante: {
  descripcion: `Aromatizante, le proporciona un aroma fresco al interior del Auto.
  Atomice el interior del vehículo, sobre todo la alfombra para que se impregne ligeramente y
  vaya soltando el aroma. `
},

limpiavidrios: {
  descripcion: `Limpiavidrios, para la limpieza de los cristales del vehículo. Puede utilizarse
  también para la limpieza del cilo del vehículo.
  Aplique con un atomizador, talle y retire con un jalador, termine de secar con un paño seco
  o con papel.`
},
  vaselina_liquida: {
  descripcion: `La "Vaselina Líquida" es un aceite mineral limpio utilizado en la lubricación del
  chasis del vehiculo, sobre todo la parte de la suspensión para eliminar reschinidos.`
},

crema_mecanico: {
  descripcion: `Crema limpiadora para mecánico, para remoción de grasa de manos y brazos sin
  el uso de agua.
  Untar una capa ligera en la parte a limpiar, frotar con las manos para despegar la grasa
  de la piel. remover el excedente con una estopa o franela seca.`
},

glicerina: {
  descripcion: `GLICERINA, para diluirse con agua u otro ingrediente que ayude a resaltar el brillo
  a las llantas.`
},

cepillo_carrocerias: {
  descripcion: `Cepillo para limpieza de carrocerias, tiene la firmeza de cerdas para eliminar mugre y polvo
  con ayuda del shampu de carrocerias, sin lastimar la pintura ni la cera.`
},

atomizador: {
  descripcion: `Atomizador "Uso Rudo", con regulación del tamaño del espreado, desde atomizado fino,
  hasta chorro.`
},

microfibra: {
  descripcion: `La microfibra es el lienzo ideal para usarlo en el lavado de las carrocerias
  automotrices por la gran capacidad de absorción de humedad para el secado rapido y la facilidad
  en su exprimido.`
},

};

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, 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>