<script>
/* ---------- Funciones que Zoho puede invocar desde la pestaña JS ---------- */
/* En la pestaña JS puedes escribir:
   - zoomIn(this)  y zoomOut(this)
   - o solo zoomIn  y zoomOut  (dependiendo cómo Zoho llame la función)
   Este script acepta ambas variantes. */

function _getElementFromArg(arg) {
  // Si Zoho pasa "this" será el elemento; si pasa event, lo tomamos; si no, null.
  if (!arg) return null;
  // Si es un Event, extraer target
  if (arg.target) return arg.target;
  // Si es elemento DOM
  if (arg instanceof Element) return arg;
  return null;
}

function prepareElementForZoom(el) {
  if (!el) return;
  // Evitar aplicar más de una vez
  if (el.dataset.zoomPrepared) return;
  el.dataset.zoomPrepared = '1';

  // Aseguramos que tenga transición y origen
  el.style.transition = el.style.transition || "transform 0.3s ease, box-shadow 0.3s ease";
  el.style.transformOrigin = el.style.transformOrigin || "center center";
  el.style.willChange = "transform";

  // Si el elemento no es <img> pero tiene background-image, transform lo hará igual
  // También evitamos que el contenedor recorte el zoom si quieres que sobresalga:
  // (si no quieres overflow visible, elimina la siguiente línea)
  el.style.overflow = el.style.overflow || "visible";
}

function zoomIn(arg) {
  var el = _getElementFromArg(arg) || document.querySelector('img:hover') || document.querySelector('.zoho-zoom-target');
  if (!el) return;

  prepareElementForZoom(el);

  // Aplica escala y sombra suave
  el.style.transform = "scale(1.08)"; // 8% de zoom, más sutil que 10%
  el.style.boxShadow = "0 8px 18px rgba(0,0,0,0.12)";
  // si el elemento es <img> aseguramos que se muestre como bloque para evitar saltos
  if (el.tagName && el.tagName.toLowerCase() === 'img') el.style.display = el.style.display || "block";
}

function zoomOut(arg) {
  var el = _getElementFromArg(arg) || document.querySelector('img') || document.querySelector('.zoho-zoom-target');
  if (!el) return;

  // Quitar transform y sombra
  el.style.transform = "scale(1)";
  el.style.boxShadow = "none";
}

/* ---------- Alternativa: añadir listeners automáticos a imágenes con clase .zoomable ---------- */
/* Si prefieres no usar la pestaña JS por evento, añade la clase zoomable a la imagen y este bloque la activará */
document.addEventListener("DOMContentLoaded", function() {
  var imgs = document.querySelectorAll('img.zoomable, .zoomable');
  imgs.forEach(function(i){
    // marca para no duplicar
    if (i.dataset.zoomAutoAdded) return;
    i.dataset.zoomAutoAdded = '1';
    prepareElementForZoom(i);
    i.addEventListener('mouseover', function(){ zoomIn(i); });
    i.addEventListener('mouseout', function(){ zoomOut(i); });
  });
});
</script>