Crea tu catálogo digital para WhatsApp y empieza a vender

============================================================ */ document.addEventListener("DOMContentLoaded", function () { const reduceMotion = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; // 01. Navegación suave entre secciones document.querySelectorAll('.cw-home a[href^="#"]').forEach(function (link) { link.addEventListener("click", function (event) { const targetId = link.getAttribute("href"); if (!targetId || targetId === "#") { return; } const target = document.querySelector(targetId); if (!target) { return; } event.preventDefault(); target.scrollIntoView({ behavior: reduceMotion ? "auto" : "smooth", block: "start" }); }); }); // 02. Aparición ligera al entrar en pantalla const revealElements = document.querySelectorAll(".cw-home .cw-reveal"); if ("IntersectionObserver" in window && !reduceMotion) { const revealObserver = new IntersectionObserver( function (entries, observer) { entries.forEach(function (entry) { if (!entry.isIntersecting) { return; } entry.target.classList.add("visible"); observer.unobserve(entry.target); }); }, { threshold: 0.12, rootMargin: "0px 0px -30px 0px" } ); revealElements.forEach(function (element) { revealObserver.observe(element); }); } else { revealElements.forEach(function (element) { element.classList.add("visible"); }); } // 03. Acordeón: solo una pregunta abierta document.querySelectorAll(".cw-home [data-accordion]").forEach( function (accordion) { const items = accordion.querySelectorAll("article"); items.forEach(function (item) { const button = item.querySelector("button"); const panel = item.children[1]; if (!button || !panel) { return; } button.addEventListener("click", function () { const shouldOpen = button.getAttribute("aria-expanded") !== "true"; items.forEach(function (otherItem) { const otherButton = otherItem.querySelector("button"); const otherPanel = otherItem.children[1]; otherItem.classList.remove("open"); if (otherButton) { otherButton.setAttribute("aria-expanded", "false"); } if (otherPanel) { otherPanel.hidden = true; } }); if (shouldOpen) { item.classList.add("open"); button.setAttribute("aria-expanded", "true"); panel.hidden = false; } }); }); } ); // 04. Demostración del carrito del hero document.querySelectorAll(".cw-home").forEach(function (scope) { const cart = scope.querySelector("[data-cart]"); const count = scope.querySelector("[data-count]"); const addButtons = scope.querySelectorAll("[data-add]"); if (!cart || !count || !addButtons.length) { return; } let productCount = Number(count.textContent) || 0; addButtons.forEach(function (button) { button.addEventListener("click", function () { productCount += 1; count.textContent = String(productCount); cart.classList.remove("bump"); void cart.offsetWidth; cart.classList.add("bump"); }); }); }); // 05. Contadores const counters = document.querySelectorAll(".cw-home [data-counter]"); if ("IntersectionObserver" in window && !reduceMotion) { const counterObserver = new IntersectionObserver( function (entries, observer) { entries.forEach(function (entry) { if (!entry.isIntersecting) { return; } const element = entry.target; const target = Number(element.dataset.counter); const suffix = element.dataset.suffix || ""; const startTime = performance.now(); const duration = 700; function updateCounter(currentTime) { const progress = Math.min( (currentTime - startTime) / duration, 1 ); element.textContent = Math.round(target * progress) + suffix; if (progress < 1) { window.requestAnimationFrame(updateCounter); } } window.requestAnimationFrame(updateCounter); observer.unobserve(element); }); }, { threshold: 0.5 } ); counters.forEach(function (counter) { counterObserver.observe(counter); }); } // 06. Validación visual del formulario document.querySelectorAll(".cw-home [data-form]").forEach( function (form) { const status = form.querySelector("[data-status]"); form.addEventListener("submit", function (event) { event.preventDefault(); let isValid = true; const controls = form.querySelectorAll("input, textarea"); controls.forEach(function (control) { let controlIsValid = control.checkValidity(); if (control.type === "tel") { const digits = control.value.replace(/\D/g, ""); controlIsValid = digits.length >= 10; } const field = control.parentElement; field.classList.toggle("invalid", !controlIsValid); control.setAttribute( "aria-invalid", String(!controlIsValid) ); if (!controlIsValid) { isValid = false; } }); if (status) { status.textContent = isValid ? "Formulario validado. Conecta el envío real antes de publicar." : "Revisa los campos marcados."; } }); } ); // 07. Año dinámico document.querySelectorAll(".cw-home [data-year]").forEach( function (element) { element.textContent = String(new Date().getFullYear()); } ); });