{"product_id":"plantilla-magnetica","title":"Plantilla Magnetica","description":"\u003c!-- =============================================================\n     NOTA — GIFs pendientes de convertir a video\n     Cuando tengas los clips en MP4\/WebM, reemplaza cada\n     \u003cimg class=\"...__gif\" ...\u003e por:\n\n       \u003cvideo class=\"...__gif\" autoplay loop muted playsinline poster=\"miniatura.jpg\"\u003e\n         \u003csource src=\"clip.webm\" type=\"video\/webm\"\u003e\n         \u003csource src=\"clip.mp4\" type=\"video\/mp4\"\u003e\n       \u003c\/video\u003e\n\n     No requiere tocar el CSS: object-fit\/aspect-ratio funcionan igual\n     en \u003cvideo\u003e que en \u003cimg\u003e. Un GIF de pocos segundos pesa 3-8MB; el\n     mismo clip en MP4\/WebM suele pesar 10-20% de eso.\n============================================================== --\u003e\n\n\u003c!-- =============================================================\n     TOKENS, ANIMACIONES Y REDUCED-MOTION COMPARTIDOS\n     Un solo lugar para paleta, animación de \"blobs\" y accesibilidad\n     de movimiento reducido: si cambia algo, se edita una sola vez.\n============================================================== --\u003e\n\u003cstyle\u003e\n  :root {\n    --app-font: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    --app-blue: #4F7EFF;\n    --app-blue-deep: #2E4FD1;\n    --app-dark: #0d1834;\n    --app-gray: #475569;\n    --app-tint: #f5f8ff;\n    --app-line: #e2eaff;\n    --app-red: #ef4444;\n    --app-red-deep: #b91c1c;\n  }\n\n  @keyframes section-drift {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    50%      { transform: translate(18px, -14px) scale(1.06); }\n  }\n\n  @keyframes ab-pulse {\n    0%   { transform: scale(0.6); opacity: 0.9; }\n    100% { transform: scale(1.6); opacity: 0; }\n  }\n\n  @keyframes zn-item-in {\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  \/* ============================================================\n     FOCO VISUAL — resaltado sutil reutilizable\n     Se aplica con \u003cspan class=\"hl\"\u003e sobre 1–3 frases clave por\n     sección para dirigir la mirada, usando el mismo azul de marca\n     a baja opacidad (no introduce colores nuevos).\n  ============================================================ *\/\n  .hl {\n    background-image: linear-gradient(120deg, rgba(79,126,255,0.16) 0%, rgba(79,126,255,0.16) 100%);\n    background-repeat: no-repeat;\n    background-size: 100% 40%;\n    background-position: 0 88%;\n    padding: 0 .05em;\n    border-radius: 2px;\n    font-weight: 700;\n    color: var(--app-dark);\n  }\n\n  \/* Reduced motion: un solo bloque para las cuatro secciones. *\/\n  @media (prefers-reduced-motion: reduce) {\n    .zn-blob, .mm-blob, .ab-blob, .tt-blob, .rv-blob, .fc-blob { animation: none; }\n    .zn-grid.zn-js .zn-item { opacity: 1; transform: none; }\n    .zn-grid.is-active .zn-item { animation: none; }\n    .zn-item:hover .zn-item__icon, .zn-item:focus-within .zn-item__icon { transform: none; }\n    .mm-page, .mm-card { transition: opacity 0.3s ease; }\n    .mm-page .mm-card { opacity: 1; transform: none; }\n    .mm-card:hover, .mm-card:focus-within { transform: none; }\n    .ab-card__inner { transition: none; }\n    .ab-card:hover { transform: none; }\n    .ab-hotspot__ring { animation: none; }\n    .tt-card { transition: none; }\n    .tt-poster__play, .tt-nav { transition: none; animation: none; }\n    .zn-media__panel { transition: none; }\n  }\n\u003c\/style\u003e\n\n\u003c!-- =============================================================\n     SECCIÓN — VIDEOS DE RESEÑAS (mazo\/deck)\n     Diseño tipo \"mazo de cartas\": el video actual va al frente en\n     tamaño completo; el siguiente asoma detrás, más chico y atenuado.\n     Tocar la tarjeta de atrás la convierte en la principal, y la que\n     estaba al frente pasa a un tercer plano invisible hasta que\n     vuelva a tocarle turno (loop infinito con las 4 tarjetas).\n\n     CÓMO AGREGAR\/QUITAR VIDEOS:\n     Edita el array TT_VIDEOS más abajo, en el \u003cscript\u003e. Cada objeto\n     es { src, poster, label }. \"poster\" es opcional (miniatura antes\n     de dar play); si se omite, se usa la portada azul de marca.\n============================================================== --\u003e\n\u003csection class=\"tt-section\"\u003e\n  \u003cdiv class=\"tt-atmosphere\" aria-hidden=\"true\"\u003e\n    \u003cspan class=\"tt-blob tt-blob--a\"\u003e\u003c\/span\u003e\n    \u003cspan class=\"tt-blob tt-blob--b\"\u003e\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"tt\"\u003e\n\n    \u003cdiv class=\"tt-eyebrow\"\u003e\n      \u003cspan class=\"tt-badge\"\u003e\n        \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\u003e\n          \u003cpath d=\"M8 5.5v13l11-6.5-11-6.5Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e\n        Reseñas verificadas\n      \u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2 class=\"tt-title\"\u003e\n      No te lo contamos nosotros,\u003cbr\u003e\n      \u003cspan class=\"tt-title-accent\"\u003ete lo muestran ellas\u003c\/span\u003e\n    \u003c\/h2\u003e\n\n    \u003cp class=\"tt-subtitle\"\u003eHistorias reales de personas que ya \u003cspan class=\"hl\"\u003esintieron el cambio\u003c\/span\u003e. Dale play.\u003c\/p\u003e\n\n    \u003cdiv class=\"tt-row\"\u003e\n      \u003cbutton class=\"tt-nav tt-nav--prev\" type=\"button\" data-tt-prev aria-label=\"Video anterior\"\u003e\n        \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"m15 6-6 6 6 6\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n\n      \u003cdiv class=\"tt-deck\" data-tt-deck\u003e\u003c\/div\u003e\n\n      \u003cbutton class=\"tt-nav tt-nav--next\" type=\"button\" data-tt-next aria-label=\"Video siguiente\"\u003e\n        \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"m9 6 6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003cspan class=\"tt-counter\" data-tt-counter\u003e1 \/ 4\u003c\/span\u003e\n\n    \u003cdiv class=\"tt-dots\" data-tt-dots role=\"tablist\" aria-label=\"Seleccionar video\"\u003e\u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003cstyle\u003e\n  .tt-section {\n    --tt-font: var(--app-font);\n    --tt-blue: var(--app-blue);\n    --tt-blue-deep: var(--app-blue-deep);\n    --tt-dark: var(--app-dark);\n    --tt-gray: var(--app-gray);\n    --tt-tint: var(--app-tint);\n    --tt-line: var(--app-line);\n\n    content-visibility: auto;\n    contain-intrinsic-size: auto 780px;\n\n    position: relative;\n    width: 100%;\n    margin: 0 !important;\n    padding: 0 !important;\n    background: #ffffff;\n    overflow: hidden;\n    border-radius: 24px;\n    isolation: isolate;\n  }\n\n  .tt-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }\n  .tt-blob { position: absolute; border-radius: 999px; filter: blur(60px); animation: section-drift 16s ease-in-out infinite; will-change: transform; }\n  .tt-blob--a {\n    width: 320px; height: 320px; top: -130px; left: -110px;\n    background: radial-gradient(circle, rgba(79,126,255,0.26), transparent 70%);\n  }\n  .tt-blob--b {\n    width: 280px; height: 280px; bottom: -110px; right: -100px;\n    background: radial-gradient(circle, rgba(46,79,209,0.20), transparent 70%);\n    animation-delay: -8s;\n  }\n\n  .tt { position: relative; z-index: 1; width: min(460px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 30px; box-sizing: border-box; text-align: center; }\n\n  .tt-eyebrow { display: flex; justify-content: center; margin-bottom: 16px; }\n  .tt-badge {\n    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap;\n    padding: 7px 14px; background: var(--tt-tint); border-radius: 999px;\n    font-family: var(--tt-font); font-size: 13.5px; font-weight: 700; color: var(--tt-blue-deep);\n  }\n  .tt-badge svg { width: 15px; height: 15px; color: var(--tt-blue); }\n\n  .tt-title {\n    margin: 0; font-family: var(--tt-font);\n    font-size: clamp(26px, 3.6vw, 36px); line-height: 1.1; letter-spacing: -0.03em;\n    font-weight: 800; color: var(--tt-dark); text-wrap: balance;\n  }\n  .tt-title-accent {\n    background: linear-gradient(90deg, var(--tt-blue) 0%, var(--tt-blue-deep) 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n\n  .tt-subtitle {\n    margin: 10px auto 0; max-width: 360px; font-family: var(--tt-font);\n    font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--tt-gray);\n  }\n\n  \/* FILA: flecha ← \/ mazo \/ flecha → *\/\n  .tt-row { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 24px; }\n\n  \/* MAZO — el tamaño del contenedor es el de la carta frontal; las\n     cartas de atrás \"asoman\" fuera de ese margen gracias al transform,\n     por eso la fila necesita gap extra a los costados. *\/\n  .tt-deck {\n    position: relative;\n    width: min(300px, 62vw);\n    aspect-ratio: 9 \/ 16;\n    margin: 0 auto;\n  }\n  .tt-deck:focus-visible { outline: 3px solid var(--tt-blue); outline-offset: 6px; border-radius: 24px; }\n\n  .tt-card {\n    position: absolute; inset: 0;\n    border-radius: 24px; overflow: hidden;\n    background: var(--tt-dark);\n    transform-origin: right center;\n    transition: transform 0.5s cubic-bezier(.65,0,.35,1), opacity 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n  }\n\n  .tt-card--front {\n    transform: translate(0, 0) scale(1);\n    opacity: 1; z-index: 3; filter: none; pointer-events: auto;\n    box-shadow: 0 20px 44px rgba(13,24,52,0.20);\n  }\n  .tt-card--back {\n    transform: translate(30px, 16px) scale(0.86);\n    opacity: 0.65; z-index: 2; filter: brightness(0.72) saturate(0.9); pointer-events: auto;\n    box-shadow: 0 12px 26px rgba(13,24,52,0.16);\n  }\n  .tt-card--back::after {\n    content: '›';\n    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);\n    font-size: 32px; font-weight: 800; color: rgba(255,255,255,0.85);\n    text-shadow: 0 2px 6px rgba(13,24,52,0.4);\n    pointer-events: none; z-index: 2;\n  }\n  .tt-card--hidden {\n    transform: translate(52px, 28px) scale(0.7);\n    opacity: 0; z-index: 1; pointer-events: none;\n  }\n\n  .tt-poster {\n    position: absolute; inset: 0; width: 100%; height: 100%; border: none; cursor: pointer;\n    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;\n    padding: 18px; box-sizing: border-box; color: #fff;\n    background:\n      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.16), transparent 55%),\n      linear-gradient(160deg, var(--tt-blue), var(--tt-blue-deep));\n    background-size: cover;\n    background-position: center;\n  }\n  .tt-poster--image { background-size: cover; background-position: center; }\n  .tt-poster--image::before {\n    content: \"\"; position: absolute; inset: 0;\n    background: linear-gradient(180deg, rgba(13,24,52,0.35) 0%, rgba(13,24,52,0.05) 30%, rgba(13,24,52,0.55) 100%);\n  }\n  .tt-poster \u003e * { position: relative; z-index: 1; }\n\n  .tt-poster__badge {\n    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;\n    padding: 5px 10px; border-radius: 999px; white-space: nowrap;\n    background: rgba(255,255,255,0.18); backdrop-filter: blur(4px);\n    font-family: var(--tt-font); font-size: 11.5px; font-weight: 700;\n  }\n\n  .tt-poster__play {\n    margin: auto;\n    width: 58px; height: 58px; border-radius: 999px;\n    background: rgba(255,255,255,0.94); color: var(--tt-blue-deep);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 10px 24px rgba(13,24,52,0.28);\n    transition: transform 0.25s ease;\n    animation: tt-invite-pulse 2.6s ease-in-out infinite;\n  }\n  @keyframes tt-invite-pulse {\n    0%, 100% { box-shadow: 0 10px 24px rgba(13,24,52,0.28), 0 0 0 0 rgba(79,126,255,0.35); }\n    50%      { box-shadow: 0 10px 24px rgba(13,24,52,0.28), 0 0 0 10px rgba(79,126,255,0); }\n  }\n  .tt-card--front .tt-poster:hover .tt-poster__play,\n  .tt-card--front .tt-poster:focus-visible .tt-poster__play { transform: scale(1.08); }\n  .tt-poster__play svg { width: 22px; height: 22px; margin-left: 3px; }\n\n  .tt-poster__label { font-family: var(--tt-font); font-size: 14px; font-weight: 800; text-align: left; }\n\n  .tt-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--tt-dark); }\n\n  .tt-counter {\n    margin-top: 12px; display: inline-block; padding: 4px 12px;\n    background: var(--tt-tint); border-radius: 999px;\n    font-family: var(--tt-font); font-size: 12px; font-weight: 700; color: var(--tt-blue-deep);\n  }\n\n  \/* .tt-nav lleva position:relative + ::before para ampliar el área\n     táctil sin cambiar el tamaño visual del botón (mejor accesibilidad\n     en móvil, mismo aspecto). *\/\n  .tt-nav {\n    position: relative;\n    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px; border: none;\n    background: #ffffff; color: var(--tt-blue-deep); cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 8px 20px rgba(13,24,52,0.16), 0 0 0 1px var(--tt-line) inset;\n    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;\n  }\n  .tt-nav::before { content: \"\"; position: absolute; inset: -8px; }\n  .tt-nav svg { width: 20px; height: 20px; }\n  .tt-nav:hover, .tt-nav:focus-visible { background: var(--tt-tint); transform: scale(1.08); box-shadow: 0 10px 24px rgba(13,24,52,0.22), 0 0 0 1px var(--tt-line) inset; }\n  .tt-nav:focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 2px; }\n\n  .tt-dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }\n  .tt-dot {\n    position: relative; width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;\n    background: var(--tt-line); cursor: pointer;\n    transition: background 0.3s ease, transform 0.3s ease;\n  }\n  .tt-dot::before { content: \"\"; position: absolute; inset: -10px; }\n  .tt-dot.is-active { background: var(--tt-blue); transform: scale(1.25); }\n  .tt-dot:focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 3px; }\n\n  @media (max-width: 860px) {\n    .tt-section { margin-top: 18px !important; }\n    .tt { padding: 20px 0 22px; }\n    .tt-title { font-size: clamp(23px, 7.5vw, 28px); }\n    .tt-subtitle { font-size: 14px; margin-top: 8px; }\n    .tt-row { margin-top: 18px; gap: 14px; }\n    .tt-deck { width: min(230px, 58vw); }\n    .tt-card--back { transform: translate(18px, 10px) scale(0.88); }\n    .tt-card--hidden { transform: translate(32px, 18px) scale(0.72); }\n    .tt-card--back::after { font-size: 26px; right: 6px; }\n    .tt-nav { width: 38px; height: 38px; }\n    .tt-nav svg { width: 17px; height: 17px; }\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n  (function () {\n    \/\/ Edita esta lista para agregar\/quitar\/reordenar videos.\n    \/\/ src: link .mp4 subido a Archivos de Shopify.\n    \/\/ poster (opcional): URL de una miniatura; si se omite, se usa la\n    \/\/ portada azul de marca.\n    var TT_VIDEOS = [\n      { src: 'https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/be85b459e5b64fe5abee1e0e258ae620.mp4', poster: '', label: 'Ver su testimonio' },\n      { src: 'https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/f3ef643625be4f6fb6f2f62fc514192a.mp4', poster: '', label: 'Ver su testimonio' },\n      { src: 'https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/80b70cd4ae7a42459f6b0ebe43f3bb12.mp4', poster: '', label: 'Ver su testimonio' },\n      { src: 'https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/36bf8703bfea4a478ff56c6cffd05125.mp4', poster: '', label: 'Ver su testimonio' }\n    ];\n\n    var deck = document.querySelector('[data-tt-deck]');\n    if (!deck) return;\n\n    var counter = document.querySelector('[data-tt-counter]');\n    var dotsWrap = document.querySelector('[data-tt-dots]');\n    var prevBtn = document.querySelector('[data-tt-prev]');\n    var nextBtn = document.querySelector('[data-tt-next]');\n    var total = TT_VIDEOS.length;\n    var current = 0;\n    var cards = [];\n    var thumbTimers = [];\n\n    var playIconSVG = '\u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M8 5.5v13l11-6.5-11-6.5Z\" fill=\"currentColor\"\/\u003e\u003c\/svg\u003e';\n\n    function posterMarkup(v, i) {\n      var bgStyle = v.poster ? ' style=\"background-image:url(\\'' + v.poster + '\\')\"' : '';\n      return '\u003cbutton class=\"tt-poster' + (v.poster ? ' tt-poster--image' : '') + '\" type=\"button\" data-tt-poster' + bgStyle + ' aria-label=\"Reproducir video ' + (i + 1) + '\"\u003e' +\n        '\u003cspan class=\"tt-poster__badge\"\u003e' + playIconSVG + 'Reseña real\u003c\/span\u003e' +\n        '\u003cspan class=\"tt-poster__play\"\u003e' + playIconSVG + '\u003c\/span\u003e' +\n        '\u003cspan class=\"tt-poster__label\"\u003e' + v.label + '\u003c\/span\u003e' +\n        '\u003c\/button\u003e';\n    }\n\n    function bindPoster(card, index) {\n      var btn = card.querySelector('[data-tt-poster]');\n      if (!btn) return;\n      btn.addEventListener('click', function () {\n        if (card.classList.contains('tt-card--back')) { goTo(index); return; }\n        if (card.classList.contains('tt-card--front')) { loadVideo(card, TT_VIDEOS[index]); }\n      });\n    }\n\n    \/\/ Genera una miniatura real tomando un fotograma cercano al inicio\n    \/\/ del video (sin descargarlo completo: preload=\"metadata\"). Si el\n    \/\/ navegador bloquea el canvas (CORS) o el video tarda demasiado,\n    \/\/ simplemente no llama a cb y la tarjeta se queda con la portada\n    \/\/ azul de marca — no rompe nada.\n    function captureThumbnail(src, cb) {\n      var done = false;\n      var v = document.createElement('video');\n      v.crossOrigin = 'anonymous';\n      v.preload = 'metadata';\n      v.muted = true;\n      v.playsInline = true;\n      v.src = src;\n\n      function cleanup() {\n        v.removeAttribute('src');\n        try { v.load(); } catch (e) { \/* noop *\/ }\n      }\n\n      function finish() {\n        if (done) return;\n        done = true;\n        try {\n          var canvas = document.createElement('canvas');\n          canvas.width = v.videoWidth || 320;\n          canvas.height = v.videoHeight || 568;\n          canvas.getContext('2d').drawImage(v, 0, 0, canvas.width, canvas.height);\n          cb(canvas.toDataURL('image\/jpeg', 0.72));\n        } catch (e) {\n          cb(null);\n        }\n        cleanup();\n      }\n\n      v.addEventListener('loadeddata', function () {\n        try { v.currentTime = Math.min(0.3, (v.duration || 1) \/ 4); }\n        catch (e) { finish(); }\n      });\n      v.addEventListener('seeked', finish);\n      v.addEventListener('error', function () { if (!done) { done = true; cb(null); cleanup(); } });\n      thumbTimers.push(setTimeout(finish, 4000)); \/\/ por si el video nunca dispara \"seeked\"\n    }\n\n    function applyThumbnail(card, index, dataUrl) {\n      if (!dataUrl) return;\n      TT_VIDEOS[index].poster = dataUrl;\n      var btn = card.querySelector('[data-tt-poster]');\n      if (btn \u0026\u0026 !card.querySelector('video')) {\n        btn.classList.add('tt-poster--image');\n        btn.style.backgroundImage = \"url('\" + dataUrl + \"')\";\n      }\n    }\n\n    function loadVideo(card, v) {\n      var video = document.createElement('video');\n      video.className = 'tt-video';\n      video.src = v.src;\n      if (v.poster) video.poster = v.poster;\n      video.controls = true;\n      video.playsInline = true;\n      video.loop = true;\n      video.autoplay = true;\n      card.innerHTML = '';\n      card.appendChild(video);\n      video.play().catch(function () { \/* el navegador puede requerir que el usuario le dé play con los controles nativos *\/ });\n    }\n\n    function resetCard(index) {\n      var card = cards[index];\n      if (!card || !card.querySelector('video')) return;\n      card.innerHTML = posterMarkup(TT_VIDEOS[index], index);\n      bindPoster(card, index);\n    }\n\n    function buildCards() {\n      TT_VIDEOS.forEach(function (v, i) {\n        var card = document.createElement('div');\n        card.className = 'tt-card';\n        card.dataset.index = i;\n        card.innerHTML = posterMarkup(v, i);\n        deck.appendChild(card);\n        cards.push(card);\n        bindPoster(card, i);\n        captureThumbnail(v.src, function (dataUrl) { applyThumbnail(card, i, dataUrl); });\n      });\n    }\n\n    function updatePositions() {\n      cards.forEach(function (card, i) {\n        var offset = (i - current + total) % total;\n        var btn = card.querySelector('button');\n        card.classList.remove('tt-card--front', 'tt-card--back', 'tt-card--hidden');\n\n        if (offset === 0) {\n          card.classList.add('tt-card--front');\n          card.setAttribute('aria-hidden', 'false');\n          if (btn) btn.tabIndex = 0;\n        } else if (offset === 1 \u0026\u0026 total \u003e 1) {\n          card.classList.add('tt-card--back');\n          card.setAttribute('aria-hidden', 'true');\n          if (btn) btn.tabIndex = -1;\n        } else {\n          card.classList.add('tt-card--hidden');\n          card.setAttribute('aria-hidden', 'true');\n          if (btn) btn.tabIndex = -1;\n        }\n      });\n    }\n\n    function renderDots() {\n      dotsWrap.innerHTML = '';\n      TT_VIDEOS.forEach(function (v, i) {\n        var dot = document.createElement('button');\n        dot.type = 'button';\n        dot.className = 'tt-dot' + (i === current ? ' is-active' : '');\n        dot.setAttribute('role', 'tab');\n        dot.setAttribute('aria-label', 'Ver video ' + (i + 1));\n        dot.addEventListener('click', function () { goTo(i); });\n        dotsWrap.appendChild(dot);\n      });\n    }\n\n    function updateUI() {\n      counter.textContent = (current + 1) + ' \/ ' + total;\n      var dots = dotsWrap.querySelectorAll('.tt-dot');\n      dots.forEach(function (d, i) {\n        d.classList.toggle('is-active', i === current);\n        d.setAttribute('aria-selected', i === current ? 'true' : 'false');\n      });\n    }\n\n    function goTo(index) {\n      var next = ((index % total) + total) % total;\n      if (next === current) return;\n      resetCard(current);\n      current = next;\n      updatePositions();\n      updateUI();\n    }\n\n    prevBtn.addEventListener('click', function () { goTo(current - 1); });\n    nextBtn.addEventListener('click', function () { goTo(current + 1); });\n\n    deck.setAttribute('tabindex', '0');\n    deck.setAttribute('role', 'group');\n    deck.setAttribute('aria-label', 'Videos de reseñas, usa las flechas para navegar');\n    deck.addEventListener('keydown', function (e) {\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); goTo(current + 1); }\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); goTo(current - 1); }\n    });\n\n    var touchStartX = 0, touchStartY = 0;\n    deck.addEventListener('touchstart', function (e) {\n      touchStartX = e.touches[0].clientX;\n      touchStartY = e.touches[0].clientY;\n    }, { passive: true });\n    deck.addEventListener('touchend', function (e) {\n      var dx = e.changedTouches[0].clientX - touchStartX;\n      var dy = e.changedTouches[0].clientY - touchStartY;\n      var threshold = 40;\n      if (Math.abs(dx) \u003e Math.abs(dy) \u0026\u0026 Math.abs(dx) \u003e threshold) {\n        goTo(dx \u003c 0 ? current + 1 : current - 1);\n      } else if (Math.abs(dy) \u003e threshold) {\n        goTo(dy \u003c 0 ? current + 1 : current - 1);\n      }\n    }, { passive: true });\n\n    buildCards();\n    updatePositions();\n    renderDots();\n    updateUI();\n\n    window.addEventListener('beforeunload', function () {\n      thumbTimers.forEach(function (t) { clearTimeout(t); });\n    });\n  })();\n\u003c\/script\u003e\n\n\u003c!-- =============================================================\n     SECCIÓN — IDEALES PARA CADA MOMENTO\n     Carrusel de 2 tarjetas visibles, rota cada 3s mostrando\n     el siguiente par (Trabajo\/Caminata → Compras\/Viajes → Hogar\/Entreno).\n============================================================== --\u003e\n\u003csection class=\"mm-section\"\u003e\n  \u003cdiv class=\"mm-atmosphere\" aria-hidden=\"true\"\u003e\n    \u003cspan class=\"mm-blob mm-blob--a\"\u003e\u003c\/span\u003e\n    \u003cspan class=\"mm-blob mm-blob--b\"\u003e\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"mm\"\u003e\n\n    \u003cdiv class=\"mm-eyebrow\"\u003e\n      \u003cspan class=\"mm-badge\"\u003eSe adaptan a tu día, no al revés\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2 class=\"mm-title\"\u003e\n      PENSADA PARA \u003cspan class=\"mm-title-accent\"\u003eTU DÍA A DÍA\u003c\/span\u003e\n    \u003c\/h2\u003e\n\n    \u003cp class=\"mm-subtitle\"\u003eDe la oficina al gimnasio, \u003cspan class=\"hl\"\u003esin quitártelas\u003c\/span\u003e: comodidad que te acompaña a donde vayas.\u003c\/p\u003e\n\n    \u003cdiv class=\"mm-carousel\" data-mm-carousel\u003e\n      \u003cdiv class=\"mm-track\" data-mm-track aria-live=\"polite\"\u003e\n\n        \u003c!-- PÁGINA 1 --\u003e\n        \u003cdiv class=\"mm-page is-active\" data-mm-page aria-hidden=\"false\"\u003e\n          \u003carticle class=\"mm-card\"\u003e\n            \u003cdiv class=\"mm-card__media\"\u003e\n              \u003cimg class=\"mm-card__gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_16_sept_2026_21_32_59.png?v=1789612421\" alt=\"Plantillas en el trabajo\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('mm-card__media--empty')\"\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"mm-card__footer\"\u003e\n              \u003cspan class=\"mm-card__icon\" aria-hidden=\"true\"\u003e\n                \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M4 6.5A1.5 1.5 0 0 1 5.5 5h13A1.5 1.5 0 0 1 20 6.5v9H4v-9Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003cpath d=\"M2 18h20l-1.2 2.1a1 1 0 0 1-.87.5H4.07a1 1 0 0 1-.87-.5L2 18Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              \u003c\/span\u003e\n              \u003cspan class=\"mm-card__text\"\u003e\n                \u003cb\u003eTrabajo\u003c\/b\u003e\n                \u003ci\u003eConcéntrate, no en tus pies\u003c\/i\u003e\n              \u003c\/span\u003e\n            \u003c\/div\u003e\n          \u003c\/article\u003e\n\n          \u003carticle class=\"mm-card\"\u003e\n            \u003cdiv class=\"mm-card__media\"\u003e\n              \u003cimg class=\"mm-card__gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_16_sept_2026_21_40_46.png?v=1789612855\" alt=\"Plantillas en la caminata\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('mm-card__media--empty')\"\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"mm-card__footer\"\u003e\n              \u003cspan class=\"mm-card__icon\" aria-hidden=\"true\"\u003e\n                \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 24 24\"\u003e\u003ccircle cx=\"13\" cy=\"4\" r=\"2\" fill=\"#ffffff\"\u003e\u003c\/circle\u003e\u003cpath fill=\"#ffffff\" d=\"M13.978 12.27c.245.368.611.647 1.031.787l2.675.892l.633-1.896l-2.675-.892l-1.663-2.495a2.016 2.016 0 0 0-.769-.679l-1.434-.717a1.989 1.989 0 0 0-1.378-.149l-3.193.797a2.002 2.002 0 0 0-1.306 1.046l-1.794 3.589l1.789.895l1.794-3.589l2.223-.556l-1.804 8.346l-3.674 2.527l1.133 1.648l3.675-2.528c.421-.29.713-.725.82-1.225l.517-2.388l2.517 1.888l.925 4.625l1.961-.393l-.925-4.627a2 2 0 0 0-.762-1.206l-2.171-1.628l.647-3.885l1.208 1.813z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              \u003c\/span\u003e\n              \u003cspan class=\"mm-card__text\"\u003e\n                \u003cb\u003eCaminata\u003c\/b\u003e\n                \u003ci\u003eCada paso se siente distinto\u003c\/i\u003e\n              \u003c\/span\u003e\n            \u003c\/div\u003e\n          \u003c\/article\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- PÁGINA 2 --\u003e\n        \u003c!-- Los GIFs originales de esta página tenían derechos de terceros\n             y se quitaron. Reemplaza los src por tus propios clips (ideal\n             en MP4\/WebM). Mientras tanto, la tarjeta degrada con un fondo\n             de marca en vez de mostrar un ícono de imagen rota. --\u003e\n        \u003cdiv class=\"mm-page\" data-mm-page aria-hidden=\"true\"\u003e\n          \u003carticle class=\"mm-card\"\u003e\n            \u003cdiv class=\"mm-card__media\"\u003e\n              \u003cimg class=\"mm-card__gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_16_sept_2026_21_38_29.png?v=1789612721\" alt=\"Plantillas en las compras\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('mm-card__media--empty')\"\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"mm-card__footer\"\u003e\n              \u003cspan class=\"mm-card__icon\" aria-hidden=\"true\"\u003e\n                \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 24 24\"\u003e\u003cpath fill=\"#ffffff\" d=\"M12 21q-.45 0-.863-.163t-.737-.487l-6.7-6.725q-.35-.35-.638-.763T2.575 12h9.3q.425 0 .713.288t.287.712q0 .425-.288.713t-.712.287q-.35 0-.625-.188t-.35-.537l-1.925.525q.275.975 1.075 1.588t1.825.612q1.25 0 2.125-.875T14.875 13q0-.275-.05-.513T14.7 12h1.175q1.25 0 2.125-.875T18.875 9q0-1.25-.875-2.125T15.875 6q-1.025 0-1.825.613T12.975 8.2l1.925.525q.075-.35.35-.537T15.875 8q.425 0 .713.288t.287.712q0 .425-.288.713t-.712.287H2.05q-.025-.2-.037-.363T2 9.275Q2 6.7 3.675 4.85T7.85 3q1.2 0 2.263.475T12 4.8q.8-.85 1.863-1.325T16.125 3q2.5 0 4.188 1.85T22 9.25q0 1.225-.425 2.35t-1.275 2l-6.725 6.75q-.325.325-.725.488T12 21Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              \u003c\/span\u003e\n              \u003cspan class=\"mm-card__text\"\u003e\n                \u003cb\u003eDescanso\u003c\/b\u003e\n                \u003ci\u003eRelaja tus pies\u003c\/i\u003e\n              \u003c\/span\u003e\n            \u003c\/div\u003e\n          \u003c\/article\u003e\n\n          \u003carticle class=\"mm-card\"\u003e\n            \u003cdiv class=\"mm-card__media\"\u003e\n              \u003cimg class=\"mm-card__gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_16_sept_2026_21_51_24.png?v=1789613492\" alt=\"Plantillas en los viajes\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('mm-card__media--empty')\"\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"mm-card__footer\"\u003e\n              \u003cspan class=\"mm-card__icon\" aria-hidden=\"true\"\u003e\n                \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 24 24\"\u003e\u003cpath fill=\"#ffffff\" d=\"M22 16.21v-1.895L14 8V4a2 2 0 0 0-4 0v4.105L2 14.42v1.789l8-2.81V18l-3 2v2l5-2l5 2v-2l-3-2v-4.685l8 2.895z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              \u003c\/span\u003e\n              \u003cspan class=\"mm-card__text\"\u003e\n                \u003cb\u003eViajes\u003c\/b\u003e\n                \u003ci\u003eAterriza ligera, no hinchada\u003c\/i\u003e\n              \u003c\/span\u003e\n            \u003c\/div\u003e\n          \u003c\/article\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- PÁGINA 3 — mismo caso que la anterior con el GIF de \"Hogar\" --\u003e\n        \u003cdiv class=\"mm-page\" data-mm-page aria-hidden=\"true\"\u003e\n          \u003carticle class=\"mm-card\"\u003e\n            \u003cdiv class=\"mm-card__media\"\u003e\n              \u003cimg class=\"mm-card__gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_16_sept_2026_21_58_41.png?v=1789613931\" alt=\"Plantillas en el hogar\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('mm-card__media--empty')\"\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"mm-card__footer\"\u003e\n              \u003cspan class=\"mm-card__icon\" aria-hidden=\"true\"\u003e\n                \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M3.5 11 12 4l8.5 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003cpath d=\"M5.5 9.5V19a1 1 0 0 0 1 1H9a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h2.5a1 1 0 0 0 1-1V9.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              \u003c\/span\u003e\n              \u003cspan class=\"mm-card__text\"\u003e\n                \u003cb\u003eHogar\u003c\/b\u003e\n                \u003ci\u003eTu momento de descanso\u003c\/i\u003e\n              \u003c\/span\u003e\n            \u003c\/div\u003e\n          \u003c\/article\u003e\n\n          \u003carticle class=\"mm-card\"\u003e\n            \u003cdiv class=\"mm-card__media\"\u003e\n              \u003cimg class=\"mm-card__gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_16_sept_2026_22_02_47.png?v=1789614174\" alt=\"Plantillas después del entreno\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('mm-card__media--empty')\"\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"mm-card__footer\"\u003e\n              \u003cspan class=\"mm-card__icon\" aria-hidden=\"true\"\u003e\n                \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 512 512\"\u003e\u003ccircle cx=\"256\" cy=\"156\" r=\"36\" fill=\"#ffffff\"\u003e\u003c\/circle\u003e\u003cpath fill=\"#ffffff\" d=\"M400 16v56H112V16H16v144h96v-56h25.278l7.524 90.289l79.2 39.6V336h-79.138l-7.413 133.426H169.5L175.136 368h161.728l5.636 101.426h32.05L367.136 336H288V233.889l79.2-39.6L374.722 104H400v56h96V16ZM80 72v56H48V48h32Zm256.8 101.71l-80.8 40.4l-80.8-40.4l-5.811-69.71h173.222ZM464 128h-32V48h32Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              \u003c\/span\u003e\n              \u003cspan class=\"mm-card__text\"\u003e\n                \u003cb\u003eEntreno\u003c\/b\u003e\n                \u003ci\u003eRecupera más rápido\u003c\/i\u003e\n              \u003c\/span\u003e\n            \u003c\/div\u003e\n          \u003c\/article\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"mm-dots\" data-mm-dots role=\"tablist\" aria-label=\"Seleccionar par de tarjetas\"\u003e\n        \u003cbutton class=\"mm-dot is-active\" type=\"button\" data-mm-dot=\"0\" role=\"tab\" aria-selected=\"true\" aria-label=\"Trabajo y caminata\"\u003e\u003c\/button\u003e\n        \u003cbutton class=\"mm-dot\" type=\"button\" data-mm-dot=\"1\" role=\"tab\" aria-selected=\"false\" aria-label=\"Compras y viajes\"\u003e\u003c\/button\u003e\n        \u003cbutton class=\"mm-dot\" type=\"button\" data-mm-dot=\"2\" role=\"tab\" aria-selected=\"false\" aria-label=\"Hogar y entreno\"\u003e\u003c\/button\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003cstyle\u003e\n  .mm-section {\n    --mm-font: var(--app-font);\n    --mm-blue: var(--app-blue);\n    --mm-blue-deep: var(--app-blue-deep);\n    --mm-dark: var(--app-dark);\n    --mm-gray: var(--app-gray);\n    --mm-tint: var(--app-tint);\n    --mm-line: var(--app-line);\n\n    content-visibility: auto;\n    contain-intrinsic-size: auto 720px;\n\n    position: relative;\n    width: 100%;\n    margin: 24px 0 0 !important;\n    padding: 0 !important;\n    background: #ffffff;\n    overflow: hidden;\n    border-radius: 24px;\n    isolation: isolate;\n  }\n\n  .mm-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }\n\n  .mm-blob {\n    position: absolute; border-radius: 999px; filter: blur(60px);\n    animation: section-drift 16s ease-in-out infinite;\n    will-change: transform;\n  }\n  .mm-blob--a {\n    width: 340px; height: 340px; top: -140px; right: -120px;\n    background: radial-gradient(circle, rgba(79,126,255,0.26), transparent 70%);\n  }\n  .mm-blob--b {\n    width: 280px; height: 280px; bottom: -110px; left: -100px;\n    background: radial-gradient(circle, rgba(46,79,209,0.20), transparent 70%);\n    animation-delay: -8s;\n  }\n\n  .mm { position: relative; z-index: 1; width: min(960px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 28px; box-sizing: border-box; text-align: center; }\n\n  .mm-eyebrow { display: flex; justify-content: center; margin-bottom: 18px; }\n\n  .mm-badge {\n    display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap;\n    padding: 8px 18px; background: var(--mm-tint);\n    border-radius: 999px;\n    font-family: var(--mm-font); font-size: 13.5px; font-weight: 700; color: var(--mm-blue-deep);\n  }\n\n  .mm-title {\n    margin: 0; font-family: var(--mm-font);\n    font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; letter-spacing: -0.03em;\n    font-weight: 800; color: var(--mm-dark); text-wrap: balance;\n  }\n\n  .mm-title-accent {\n    background: linear-gradient(90deg, var(--mm-blue) 0%, var(--mm-blue-deep) 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n\n  .mm-subtitle {\n    margin: 10px auto 0; max-width: 560px; font-family: var(--mm-font);\n    font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--mm-gray);\n  }\n\n  .mm-carousel { position: relative; margin-top: 24px; }\n\n  .mm-track { position: relative; min-height: 300px; }\n\n  .mm-page {\n    position: absolute; inset: 0;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\n    opacity: 0; visibility: hidden; transform: translateY(10px);\n    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;\n    pointer-events: none;\n  }\n  .mm-page.is-active {\n    opacity: 1; visibility: visible; transform: translateY(0);\n    transition: opacity 0.6s ease, transform 0.6s ease;\n    pointer-events: auto;\n  }\n\n  \/* Entrada escalonada de cada tarjeta (puramente CSS, reacciona a la\n     misma clase \"is-active\" que ya pone el script del carrusel). *\/\n  .mm-page .mm-card {\n    opacity: 0; transform: translateY(10px);\n    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;\n  }\n  .mm-page.is-active .mm-card {\n    opacity: 1; transform: translateY(0);\n  }\n  .mm-page.is-active .mm-card:nth-child(2) { transition-delay: .08s; }\n\n  .mm-card {\n    background: #fff; border-radius: 20px; overflow: hidden;\n    box-shadow: 0 14px 32px rgba(13,24,52,0.10);\n    display: flex; flex-direction: column;\n    text-align: left;\n  }\n  @media (hover: hover) {\n    .mm-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(13,24,52,0.16); }\n    .mm-card:hover .mm-card__icon { transform: scale(1.08) rotate(-3deg); }\n  }\n\n  .mm-card__media { width: 100%; aspect-ratio: 16 \/ 9; background: var(--mm-tint); overflow: hidden; }\n  .mm-card__media--empty {\n    background: linear-gradient(135deg, var(--mm-tint), #eef3ff);\n  }\n  .mm-card__gif {\n    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;\n    transform: scale(var(--mm-gif-zoom, 1.12));\n    transform-origin: center;\n  }\n\n  .mm-card__footer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }\n\n  .mm-card__icon {\n    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center;\n    background: linear-gradient(135deg, var(--mm-blue), var(--mm-blue-deep));\n    color: #fff;\n    transition: transform 0.3s ease;\n  }\n  .mm-card__icon svg { width: 22px; height: 22px; }\n\n  .mm-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n  .mm-card__text b { font-family: var(--mm-font); font-size: 18px; font-weight: 800; color: var(--mm-dark); }\n  .mm-card__text i { font-style: normal; font-family: var(--mm-font); font-size: 14px; font-weight: 500; color: var(--mm-gray); }\n\n  .mm-dots { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }\n  .mm-dot {\n    position: relative; width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;\n    background: var(--mm-line); cursor: pointer;\n    transition: background 0.3s ease, transform 0.3s ease;\n  }\n  .mm-dot::before { content: \"\"; position: absolute; inset: -10px; }\n  .mm-dot.is-active { background: var(--mm-blue); transform: scale(1.25); }\n  .mm-dot:focus-visible { outline: 2px solid var(--mm-blue); outline-offset: 3px; }\n\n  @media (max-width: 860px) {\n    .mm-section { margin-top: 18px !important; }\n    .mm { padding: 20px 0 20px; }\n    .mm-eyebrow { margin-bottom: 12px; }\n    .mm-badge { padding: 6px 14px; font-size: 11.5px; }\n    .mm-title { font-size: clamp(24px, 7.5vw, 30px); line-height: 1.14; }\n    .mm-subtitle { font-size: 14px; margin-top: 8px; }\n    .mm-carousel { margin-top: 16px; }\n    .mm-track { min-height: 200px; }\n    .mm-page { gap: 10px; }\n    .mm-card__media { aspect-ratio: 4 \/ 3; }\n    .mm-card__footer { padding: 10px 12px; gap: 8px; }\n    .mm-card__icon { width: 34px; height: 34px; border-radius: 9px; }\n    .mm-card__icon svg { width: 16px; height: 16px; }\n    .mm-card__text b { font-size: 14px; }\n    .mm-card__text i { font-size: 11.5px; line-height: 1.3; }\n    .mm-dots { margin-top: 14px; }\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n  (function () {\n    var carousel = document.querySelector('[data-mm-carousel]');\n    if (!carousel) return;\n\n    var pages = Array.prototype.slice.call(carousel.querySelectorAll('[data-mm-page]'));\n    var dots = Array.prototype.slice.call(carousel.querySelectorAll('[data-mm-dots] .mm-dot'));\n    var current = 0;\n    var intervalMs = 3000;\n    var timer = null;\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    function goTo(index) {\n      pages[current].classList.remove('is-active');\n      pages[current].setAttribute('aria-hidden', 'true');\n      if (dots[current]) {\n        dots[current].classList.remove('is-active');\n        dots[current].setAttribute('aria-selected', 'false');\n      }\n      current = ((index % pages.length) + pages.length) % pages.length;\n      pages[current].classList.add('is-active');\n      pages[current].setAttribute('aria-hidden', 'false');\n      if (dots[current]) {\n        dots[current].classList.add('is-active');\n        dots[current].setAttribute('aria-selected', 'true');\n      }\n    }\n\n    function next() { goTo(current + 1); }\n\n    dots.forEach(function (dot, i) {\n      dot.addEventListener('click', function () {\n        goTo(i);\n        start();\n      });\n    });\n\n    function start() {\n      if (reduced || pages.length \u003c= 1) return;\n      stop();\n      timer = setInterval(next, intervalMs);\n    }\n\n    function stop() {\n      if (timer) { clearInterval(timer); timer = null; }\n    }\n\n    if ('IntersectionObserver' in window) {\n      var observer = new IntersectionObserver(function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting) start(); else stop();\n        });\n      }, { threshold: 0.3, rootMargin: '150px 0px' });\n      observer.observe(carousel);\n    } else {\n      start();\n    }\n\n    carousel.addEventListener('mouseenter', stop);\n    carousel.addEventListener('mouseleave', start);\n  })();\n\u003c\/script\u003e\n\n\u003c!-- =============================================================\n     SECCIÓN — PLANTILLAS MAGNÉTICAS\n     Orden fijo en todos los tamaños: badge → imagen → título → grilla 2x2.\n============================================================== --\u003e\n\u003csection class=\"zn-section\"\u003e\n  \u003cdiv class=\"zn-atmosphere\" aria-hidden=\"true\"\u003e\n    \u003cspan class=\"zn-blob zn-blob--a\"\u003e\u003c\/span\u003e\n    \u003cspan class=\"zn-blob zn-blob--b\"\u003e\u003c\/span\u003e\n    \u003cspan class=\"zn-blob zn-blob--c\"\u003e\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"zn\"\u003e\n\n    \u003cdiv class=\"zn-eyebrow\"\u003e\n      \u003cspan class=\"zn-badge\"\u003e\n        \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\u003e\n          \u003cpath d=\"M12 3c-4 2-6 5-6 9a6 6 0 0 0 12 0c0-4-2-7-6-9Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n          \u003cpath d=\"M12 21V11\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e\n        Bienestar en cada paso\n      \u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"zn-media\"\u003e\n      \u003cdiv class=\"zn-media__glow\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"zn-media__panel\"\u003e\n        \u003cimg class=\"zn-media__gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/source.gif?v=1789498237\" alt=\"Plantillas magnéticas para pies en acción\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('zn-media__panel--empty')\"\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"zn-content\"\u003e\n      \u003ch2 class=\"zn-title\"\u003e\n        ¿Tus pies terminan\u003cbr\u003e\n        \u003cspan class=\"zn-title-accent\"\u003eagotados?\u003c\/span\u003e\n      \u003c\/h2\u003e\n\n      \u003cp class=\"zn-subtitle\"\u003eAsí es como funciona: estimulan tus puntos de presión \u003cstrong class=\"hl\"\u003emientras caminas\u003c\/strong\u003e, sin rutinas ni aparatos extra.\u003c\/p\u003e\n\n      \u003cul class=\"zn-grid\" data-zn-grid\u003e\n        \u003cli class=\"zn-item\"\u003e\n          \u003cspan class=\"zn-item__icon\"\u003e\n            \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 1024 1024\"\u003e\u003cpath fill=\"currentColor\" d=\"M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          \u003c\/span\u003e\n          \u003cspan class=\"zn-item__text\"\u003e\n            \u003cb\u003eEstimula\u003c\/b\u003e\n            \u003ci\u003ePuntos de presión clave\u003c\/i\u003e\n          \u003c\/span\u003e\n        \u003c\/li\u003e\n\n        \u003cli class=\"zn-item\"\u003e\n          \u003cspan class=\"zn-item__icon\"\u003e\n            \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 48 48\"\u003e\u003cg fill=\"none\"\u003e\u003cpath stroke=\"currentColor\" stroke-width=\"4\" d=\"M15 20.612c-1.424 6.15 6.493 7.715 4.624 12.048c-1.87 4.332-6.055 3.466-5.588 7.798c.468 4.333 6.006 4.394 11.048 1.784c10.083-5.221 12.187-16.625 7.624-21.63c-5.608-6.15-16.284-6.15-17.708 0Z\" fill=\"currentColor\"\u003e\u003c\/path\u003e\u003cellipse cx=\"34.535\" cy=\"13.535\" fill=\"currentColor\" rx=\"2\" ry=\"3\" transform=\"rotate(40 34.535 13.535)\"\u003e\u003c\/ellipse\u003e\u003cellipse cx=\"29.381\" cy=\"10.603\" fill=\"currentColor\" rx=\"2\" ry=\"3\" transform=\"rotate(25 29.38 10.603)\"\u003e\u003c\/ellipse\u003e\u003cellipse cx=\"23.381\" cy=\"9.603\" fill=\"currentColor\" rx=\"2\" ry=\"3\" transform=\"rotate(6 23.38 9.603)\"\u003e\u003c\/ellipse\u003e\u003cellipse cx=\"14\" cy=\"8\" stroke=\"currentColor\" stroke-width=\"4\" rx=\"3\" ry=\"4\" transform=\"rotate(-20 14 8)\" fill=\"currentColor\"\u003e\u003c\/ellipse\u003e\u003cellipse cx=\"38.535\" cy=\"17.536\" fill=\"currentColor\" rx=\"2\" ry=\"3\" transform=\"rotate(50 38.535 17.536)\"\u003e\u003c\/ellipse\u003e\u003c\/g\u003e\u003c\/svg\u003e\n          \u003c\/span\u003e\n          \u003cspan class=\"zn-item__text\"\u003e\n            \u003cb\u003eSensación\u003c\/b\u003e\n            \u003ci\u003eComo un masaje real\u003c\/i\u003e\n          \u003c\/span\u003e\n        \u003c\/li\u003e\n\n        \u003cli class=\"zn-item\"\u003e\n          \u003cspan class=\"zn-item__icon\"\u003e\n            \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 520 472\"\u003e\u003cpath fill=\"currentColor\" d=\"M392 195q-74 0-145-152q-2-3-3.5-6t-3-7t-2.5-6Q225 3 200 3H93Q76 3 63.5 15.5T51 45q0 86-17 116q-46 56-15 162H8v64q0 17 12.5 29.5T51 429h426q18 0 30.5-12.5T520 387v-64q0-19-6.5-39.5t-20-41t-40-34T392 195zm21 44q27 6 43 26.5t18.5 34T477 323h-64v-84zM68 186q25-31 25-141h107q1 3 4.5 9t4.5 8q0 3 4 7q-1 0-7 4l-21 21q-14 16 0 30q6 7 15 7t15-7l17-17q2 5 8.5 15.5T249 137l-21 21q-16 16 0 30q6 7 15 7q8 0 15-7l21-21q2-2 2-4q10 4 26 8v88H63v-7q-5-15-8.5-36T53 230.5T68 186zm409 201H51v-22h426v22zm-320-86q28 0 46-18t18-46q0-27-18-45.5T157 173q-27 0-45.5 18.5T93 237q0 28 18.5 46t45.5 18zm0-85q10 0 16 6t6 15q0 22-22 22q-9 0-15-6t-6-16q0-9 6-15t15-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          \u003c\/span\u003e\n          \u003cspan class=\"zn-item__text\"\u003e\n            \u003cb\u003eÚsalas\u003c\/b\u003e\n            \u003ci\u003eEn cualquier calzado\u003c\/i\u003e\n          \u003c\/span\u003e\n        \u003c\/li\u003e\n\n        \u003cli class=\"zn-item\"\u003e\n          \u003cspan class=\"zn-item__icon\"\u003e\n            \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"96\" height=\"96\" viewbox=\"0 0 32 32\"\u003e\u003cpath fill=\"currentColor\" d=\"M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7zm10 28h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          \u003c\/span\u003e\n          \u003cspan class=\"zn-item__text\"\u003e\n            \u003cb\u003eComodidad\u003c\/b\u003e\n            \u003ci\u003eSe adapta a tu pie\u003c\/i\u003e\n          \u003c\/span\u003e\n        \u003c\/li\u003e\n      \u003c\/ul\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003cstyle\u003e\n  .zn-section {\n    --zn-font: var(--app-font);\n    --zn-blue: var(--app-blue);\n    --zn-blue-deep: var(--app-blue-deep);\n    --zn-dark: var(--app-dark);\n    --zn-gray: var(--app-gray);\n    --zn-tint: var(--app-tint);\n    --zn-line: var(--app-line);\n\n    content-visibility: auto;\n    contain-intrinsic-size: auto 680px;\n\n    position: relative;\n    width: 100%;\n    margin: 24px 0 0 !important;\n    padding: 0 !important;\n    background: #ffffff;\n    overflow: hidden;\n    border-radius: 24px;\n    isolation: isolate;\n  }\n\n  .zn-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }\n\n  .zn-blob {\n    position: absolute; border-radius: 999px; filter: blur(60px);\n    animation: section-drift 16s ease-in-out infinite;\n    will-change: transform;\n  }\n  .zn-blob--a {\n    width: 340px; height: 340px; top: -140px; left: -120px;\n    background: radial-gradient(circle, rgba(79,126,255,0.30), transparent 70%);\n  }\n  .zn-blob--b {\n    width: 300px; height: 300px; bottom: -120px; right: -110px;\n    background: radial-gradient(circle, rgba(46,79,209,0.24), transparent 70%);\n    animation-delay: -6s;\n  }\n  .zn-blob--c {\n    width: 220px; height: 220px; bottom: 30%; left: -90px;\n    background: radial-gradient(circle, rgba(79,126,255,0.16), transparent 70%);\n    animation-delay: -11s;\n  }\n\n  .zn { position: relative; z-index: 1; width: min(600px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 24px; box-sizing: border-box; }\n\n  .zn-eyebrow { display: flex; justify-content: center; margin-bottom: 18px; }\n\n  .zn-badge {\n    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap;\n    padding: 7px 14px; background: rgba(245,248,255,0.9); backdrop-filter: blur(6px);\n    border-radius: 999px;\n    font-family: var(--zn-font); font-size: 13.5px; font-weight: 700; color: var(--zn-blue-deep);\n  }\n  .zn-badge svg { width: 15px; height: 15px; color: var(--zn-blue); }\n\n  .zn-media { position: relative; display: flex; align-items: center; justify-content: center; }\n\n  .zn-media__glow {\n    position: absolute; inset: -8% -6%;\n    background:\n      radial-gradient(closest-side at 28% 22%, rgba(79,126,255,0.24), transparent 62%),\n      radial-gradient(closest-side at 76% 82%, rgba(46,79,209,0.17), transparent 65%);\n    filter: blur(18px); z-index: 0;\n  }\n\n  .zn-media__panel {\n    position: relative; z-index: 1;\n    width: 100%; max-width: 320px; aspect-ratio: 1 \/ 1;\n    border-radius: 20px; overflow: hidden;\n    background: var(--zn-tint);\n    box-shadow: 0 18px 36px rgba(13,24,52,0.16);\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\n  }\n  .zn-media__panel--empty {\n    background: linear-gradient(135deg, var(--zn-tint), #eef3ff);\n  }\n  @media (hover: hover) {\n    .zn-media__panel:hover { transform: translateY(-3px); box-shadow: 0 24px 46px rgba(13,24,52,0.22); }\n  }\n\n  .zn-media__gif { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n  .zn-content { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 16px; }\n\n  .zn-title {\n    margin: 0; font-family: var(--zn-font);\n    font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.03em;\n    font-weight: 800; color: var(--zn-dark); text-wrap: balance;\n  }\n\n  .zn-title-accent {\n    background: linear-gradient(90deg, var(--zn-blue) 0%, var(--zn-blue-deep) 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n\n  .zn-subtitle {\n    margin: 12px auto 0; max-width: 420px; font-family: var(--zn-font);\n    font-size: 16.5px; line-height: 1.55; font-weight: 500; color: var(--zn-gray);\n  }\n  .zn-subtitle strong { color: var(--zn-dark); font-weight: 700; }\n\n  \/* GRILLA 2x2 — visible por defecto. El script solo agrega la\n     clase \"zn-js\" (para animar la entrada) si JS corre correctamente;\n     si algo falla, el contenido nunca queda invisible. *\/\n  .zn-grid {\n    list-style: none; margin: 26px 0 0; padding: 18px 0 0; width: 100%;\n    border-top: 1px solid var(--zn-line);\n    display: grid; grid-template-columns: 1fr 1fr; row-gap: 20px; column-gap: 18px;\n  }\n\n  .zn-item {\n    display: flex; align-items: center; gap: 12px; text-align: left;\n    opacity: 1; transform: none;\n  }\n\n  .zn-grid.zn-js .zn-item { opacity: 0; transform: translateY(8px); }\n\n  .zn-grid.is-active .zn-item { animation: zn-item-in 0.5s ease forwards; }\n  .zn-grid.is-active .zn-item:nth-child(1) { animation-delay: 0.05s; }\n  .zn-grid.is-active .zn-item:nth-child(2) { animation-delay: 0.13s; }\n  .zn-grid.is-active .zn-item:nth-child(3) { animation-delay: 0.21s; }\n  .zn-grid.is-active .zn-item:nth-child(4) { animation-delay: 0.29s; }\n\n  .zn-item__icon {\n    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center;\n    background: linear-gradient(135deg, #e4ecff, #d3e0ff);\n    color: var(--zn-blue-deep);\n    transition: transform 0.25s ease;\n  }\n  .zn-item:hover .zn-item__icon, .zn-item:focus-within .zn-item__icon { transform: scale(1.08) rotate(-4deg); }\n  .zn-item__icon svg { width: 19px; height: 19px; }\n\n  .zn-item__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n  .zn-item__text b {\n    font-family: var(--zn-font); font-size: 16.5px; font-weight: 800; color: var(--zn-dark);\n  }\n  .zn-item__text i {\n    font-style: normal; font-family: var(--zn-font); font-size: 13.5px; font-weight: 500; color: var(--zn-gray);\n  }\n\n  @media (max-width: 860px) {\n    .zn { width: calc(100% - 24px); padding: 16px 0 20px; }\n    .zn-eyebrow { margin-bottom: 14px; }\n    .zn-badge { padding: 7px 13px; font-size: 12.5px; }\n\n    .zn-blob--a { width: 220px; height: 220px; top: -90px; left: -80px; }\n    .zn-blob--b { width: 200px; height: 200px; bottom: -80px; right: -70px; }\n    .zn-blob--c { width: 150px; height: 150px; }\n\n    .zn-media__panel { max-width: 230px; border-radius: 16px; }\n\n    .zn-content { margin-top: 12px; }\n    .zn-title { font-size: clamp(27px, 8.5vw, 34px); line-height: 1.12; }\n    .zn-subtitle { font-size: 15px; max-width: 320px; margin-top: 8px; }\n\n    .zn-grid { margin-top: 18px; padding-top: 14px; row-gap: 16px; column-gap: 12px; }\n    .zn-item { gap: 9px; }\n    .zn-item__icon { width: 36px; height: 36px; border-radius: 10px; }\n    .zn-item__icon svg { width: 16px; height: 16px; }\n    .zn-item__text b { font-size: 14.5px; }\n    .zn-item__text i { font-size: 12.5px; line-height: 1.35; }\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n  (function () {\n    var grid = document.querySelector('[data-zn-grid]');\n    if (!grid) return;\n\n    \/\/ Si el usuario prefiere menos movimiento, dejamos el contenido\n    \/\/ visible desde el inicio y no tocamos nada.\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (reduced) return;\n\n    \/\/ Solo AHORA (con JS funcionando) se activa el estado \"oculto antes\n    \/\/ de animar\". Si este script no llega a correr, la grilla nunca\n    \/\/ pasa por ese estado y queda visible por el CSS base.\n    grid.classList.add('zn-js');\n\n    function activate() { grid.classList.add('is-active'); }\n\n    if (!('IntersectionObserver' in window)) { activate(); return; }\n\n    var observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        if (entry.isIntersecting) { activate(); observer.disconnect(); }\n      });\n    }, { threshold: 0.3, rootMargin: '150px 0px' });\n\n    observer.observe(grid);\n  })();\n\u003c\/script\u003e\n\n\u003c!-- =============================================================\n     SECCIÓN — ANTES \/ DESPUÉS\n     NOTA DE ESTABILIDAD: esta sección NO usa content-visibility:auto.\n     Combinar content-visibility con transform-style:preserve-3d puede\n     hacer que Chrome\/Safari \"salteen\" el pintado de la tarjeta al\n     hacer scroll rápido y la dejen en blanco un instante. Como esta\n     sección es liviana, se prioriza estabilidad sobre ese ahorro.\n============================================================== --\u003e\n\u003csection class=\"ab-section\"\u003e\n  \u003cdiv class=\"ab-atmosphere\" aria-hidden=\"true\"\u003e\n    \u003cspan class=\"ab-blob ab-blob--a\"\u003e\u003c\/span\u003e\n    \u003cspan class=\"ab-blob ab-blob--b\"\u003e\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"ab\"\u003e\n\n    \u003cdiv class=\"ab-eyebrow\"\u003e\n      \u003cspan class=\"ab-badge\"\u003eLa diferencia se siente\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003ch2 class=\"ab-title\"\u003e\n      Un antes.\u003cbr\u003e\n      \u003cspan class=\"ab-title-accent\"\u003eUn después que sí notarás.\u003c\/span\u003e\n    \u003c\/h2\u003e\n\n    \u003cp class=\"ab-subtitle\"\u003eDesliza y comprúebalo \u003cspan class=\"hl\"\u003econ tus propios ojos\u003c\/span\u003e.\u003c\/p\u003e\n\n    \u003cdiv class=\"ab-switch\" data-ab-switch role=\"tablist\" aria-label=\"Comparar antes y después\"\u003e\n      \u003cspan class=\"ab-switch__thumb\" data-ab-thumb aria-hidden=\"true\"\u003e\u003c\/span\u003e\n      \u003cbutton class=\"ab-switch__opt is-active\" type=\"button\" data-ab-opt=\"antes\" role=\"tab\" aria-selected=\"true\"\u003eAntes\u003c\/button\u003e\n      \u003cbutton class=\"ab-switch__opt\" type=\"button\" data-ab-opt=\"despues\" role=\"tab\" aria-selected=\"false\"\u003eDespués\u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"ab-stage\"\u003e\n      \u003cdiv class=\"ab-card\" data-ab-card role=\"button\" tabindex=\"0\" aria-pressed=\"false\" aria-label=\"Voltear tarjeta para ver el después\"\u003e\n        \u003cspan class=\"ab-flip-icon\" aria-hidden=\"true\"\u003e\n          \u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M4 12a8 8 0 0 1 13.9-5.4M20 12a8 8 0 0 1-13.9 5.4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\u003cpath d=\"M18 3v4h-4M6 21v-4h4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n        \u003c\/span\u003e\n        \u003cdiv class=\"ab-card__inner\" data-ab-inner\u003e\n\n          \u003cdiv class=\"ab-face ab-face--front\"\u003e\n            \u003cimg class=\"ab-face__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/1695152185-Untitled_design84.gif?v=1789584785\" alt=\"Persona sosteniéndose el tobillo por incomodidad\" loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" onerror=\"this.onerror=null;this.style.display='none';var p=this.closest('.ab-face');if(p)p.classList.add('ab-face--empty')\"\u003e\n            \u003cdiv class=\"ab-face__tint ab-face__tint--red\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n            \u003cspan class=\"ab-hotspot ab-hotspot--pain\" style=\"--x:52%; --y:46%;\" aria-hidden=\"true\"\u003e\n              \u003cspan class=\"ab-hotspot__ring\"\u003e\u003c\/span\u003e\n              \u003cspan class=\"ab-hotspot__dot\"\u003e\u003c\/span\u003e\n            \u003c\/span\u003e\n            \u003cspan class=\"ab-face__tag ab-face__tag--pain\"\u003eAntes: cansancio y molestia\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"ab-face ab-face--back\"\u003e\n            \u003cimg class=\"ab-face__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/Disenosintitulo_27761655-546f-4b83-a0cf-6655ff8e32e5.webp?v=1789584784\" alt=\"Persona caminando con paso ligero y seguro\" loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" onerror=\"this.onerror=null;this.style.display='none';var p=this.closest('.ab-face');if(p)p.classList.add('ab-face--empty')\"\u003e\n            \u003cdiv class=\"ab-face__tint ab-face__tint--blue\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n            \u003cspan class=\"ab-hotspot ab-hotspot--relief\" style=\"--x:52%; --y:46%;\" aria-hidden=\"true\"\u003e\n              \u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M5 12.5 10 17l9-10\" stroke=\"#fff\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            \u003c\/span\u003e\n            \u003cspan class=\"ab-face__tag ab-face__tag--relief\"\u003eDespués: ligereza real\u003c\/span\u003e\n          \u003c\/div\u003e\n\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cp class=\"ab-hint\" data-ab-hint\u003eToca la tarjeta y descubre el después\u003c\/p\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003cstyle\u003e\n  .ab-section {\n    --ab-font: var(--app-font);\n    --ab-blue: var(--app-blue);\n    --ab-blue-deep: var(--app-blue-deep);\n    --ab-dark: var(--app-dark);\n    --ab-gray: var(--app-gray);\n    --ab-tint: var(--app-tint);\n    --ab-line: var(--app-line);\n    --ab-red: var(--app-red);\n    --ab-red-deep: var(--app-red-deep);\n\n    \/* Sin content-visibility aquí a propósito: ver nota arriba del HTML. *\/\n    position: relative;\n    width: 100%;\n    margin: 24px 0 0 !important;\n    padding: 0 !important;\n    background: #ffffff;\n    overflow: hidden;\n    border-radius: 24px;\n    isolation: isolate;\n    \/* Promueve la sección a su propia capa de composición para evitar\n       que quede \"en blanco\" un frame al entrar\/salir del viewport\n       rápidamente durante scroll veloz. *\/\n    transform: translateZ(0);\n  }\n\n  .ab-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }\n  .ab-blob { position: absolute; border-radius: 999px; filter: blur(50px); animation: section-drift 16s ease-in-out infinite; will-change: transform; }\n  .ab-blob--a { width: 240px; height: 240px; top: -100px; left: -90px; background: radial-gradient(circle, rgba(239,68,68,0.14), transparent 70%); }\n  .ab-blob--b { width: 240px; height: 240px; bottom: -100px; right: -90px; background: radial-gradient(circle, rgba(79,126,255,0.24), transparent 70%); animation-delay: -7s; }\n\n  .ab { position: relative; z-index: 1; width: min(440px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 24px; box-sizing: border-box; text-align: center; }\n\n  .ab-eyebrow { display: flex; justify-content: center; margin-bottom: 12px; }\n  .ab-badge {\n    display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; padding: 6px 12px;\n    background: var(--ab-tint); border-radius: 999px;\n    font-family: var(--ab-font); font-size: 12px; font-weight: 700; color: var(--ab-blue-deep);\n  }\n\n  .ab-title {\n    margin: 0; font-family: var(--ab-font);\n    font-size: clamp(22px, 3.4vw, 30px); line-height: 1.12; letter-spacing: -0.03em;\n    font-weight: 800; color: var(--ab-dark); text-wrap: balance;\n  }\n  .ab-title-accent {\n    background: linear-gradient(90deg, var(--ab-red) 0%, var(--ab-blue-deep) 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n\n  .ab-subtitle { margin: 8px 0 0; font-family: var(--ab-font); font-size: 14px; color: var(--ab-gray); font-weight: 500; }\n\n  .ab-switch {\n    position: relative; display: inline-grid; grid-auto-flow: column;\n    margin: 16px auto 0; padding: 4px; background: var(--ab-tint);\n    border-radius: 999px; width: 190px;\n  }\n  .ab-switch__thumb {\n    position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);\n    background: linear-gradient(135deg, var(--ab-red), var(--ab-red-deep));\n    border-radius: 999px; transition: transform 0.35s cubic-bezier(.65,0,.35,1), background 0.35s ease;\n  }\n  [data-ab-switch].is-despues .ab-switch__thumb {\n    transform: translateX(100%);\n    background: linear-gradient(135deg, var(--ab-blue), var(--ab-blue-deep));\n  }\n  .ab-switch__opt {\n    position: relative; z-index: 1; border: none; background: transparent; cursor: pointer;\n    padding: 7px 0; border-radius: 999px;\n    font-family: var(--ab-font); font-size: 12.5px; font-weight: 700; color: var(--ab-gray);\n    transition: color 0.3s ease;\n  }\n  .ab-switch__opt.is-active { color: #fff; }\n\n  .ab-stage { margin-top: 18px; display: flex; flex-direction: column; align-items: center; }\n\n  .ab-card {\n    position: relative; width: 100%; max-width: 260px; aspect-ratio: 1 \/ 1;\n    perspective: 1400px; cursor: pointer; border-radius: 22px;\n    transition: transform 0.35s ease;\n  }\n  .ab-card:focus-visible { outline: 3px solid var(--ab-blue); outline-offset: 4px; }\n  @media (hover: hover) {\n    .ab-card:hover { transform: translateY(-3px); }\n  }\n\n  .ab-flip-icon {\n    position: absolute; top: 10px; right: 10px; z-index: 2;\n    width: 30px; height: 30px; border-radius: 999px;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);\n    color: var(--ab-blue-deep);\n    box-shadow: 0 4px 10px rgba(13,24,52,0.16);\n    pointer-events: none;\n  }\n  .ab-flip-icon svg { width: 15px; height: 15px; }\n\n  .ab-card__inner {\n    position: relative; width: 100%; height: 100%; transform-style: preserve-3d;\n    transition: transform 0.9s cubic-bezier(.65,0,.35,1);\n    border-radius: 22px; box-shadow: 0 20px 44px rgba(13,24,52,0.18);\n    will-change: transform;\n  }\n  [data-ab-card].is-despues .ab-card__inner { transform: rotateY(180deg); }\n\n  .ab-face {\n    position: absolute; inset: 0; border-radius: 22px; overflow: hidden;\n    backface-visibility: hidden; -webkit-backface-visibility: hidden;\n    background: var(--ab-tint);\n    transform: translateZ(0);\n  }\n  .ab-face--back { transform: rotateY(180deg) translateZ(0); }\n  .ab-face--empty { background: linear-gradient(135deg, var(--ab-tint), #eef3ff); }\n\n  .ab-face__img { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n  .ab-face__tint { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.16; }\n  .ab-face__tint--red { background: radial-gradient(circle at 55% 50%, var(--ab-red), transparent 65%); }\n  .ab-face__tint--blue { background: radial-gradient(circle at 55% 50%, var(--ab-blue), transparent 65%); }\n\n  .ab-hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }\n  .ab-hotspot--pain .ab-hotspot__dot {\n    display: block; width: 14px; height: 14px; border-radius: 999px;\n    background: var(--ab-red); box-shadow: 0 0 0 4px rgba(255,255,255,0.85);\n  }\n  .ab-hotspot__ring {\n    position: absolute; inset: -14px; border-radius: 999px;\n    border: 2px solid var(--ab-red); animation: ab-pulse 1.8s ease-out infinite;\n  }\n  .ab-hotspot--relief {\n    width: 30px; height: 30px; border-radius: 999px;\n    background: linear-gradient(135deg, var(--ab-blue), var(--ab-blue-deep));\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 0 0 4px rgba(255,255,255,0.85);\n  }\n  .ab-hotspot--relief svg { width: 16px; height: 16px; }\n\n  .ab-face__tag {\n    position: absolute; left: 12px; bottom: 12px; padding: 6px 10px;\n    border-radius: 999px; font-family: var(--ab-font); font-size: 11px; font-weight: 700; color: #fff;\n    backdrop-filter: blur(4px);\n  }\n  .ab-face__tag--pain { background: rgba(185,28,28,0.85); }\n  .ab-face__tag--relief { background: rgba(46,79,209,0.85); }\n\n  .ab-hint {\n    margin: 10px 0 0; font-family: var(--ab-font); font-size: 12px; font-weight: 600;\n    color: var(--ab-gray); opacity: 0.8; transition: opacity 0.4s ease;\n  }\n  .ab-hint.is-hidden { opacity: 0; }\n\n  @media (max-width: 860px) {\n    .ab-section { margin-top: 18px !important; }\n    .ab { width: calc(100% - 20px); padding: 18px 0 20px; }\n    .ab-title { font-size: clamp(20px, 6.5vw, 24px); }\n    .ab-subtitle { font-size: 13px; }\n    .ab-card { max-width: 220px; }\n    .ab-face__tag { font-size: 10.5px; padding: 5px 9px; }\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n  (function () {\n    var wrap = document.querySelector('[data-ab-switch]');\n    var card = document.querySelector('[data-ab-card]');\n    var hint = document.querySelector('[data-ab-hint]');\n    if (!wrap || !card) return;\n\n    var opts = Array.prototype.slice.call(wrap.querySelectorAll('[data-ab-opt]'));\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    var autoplayTimers = [];\n\n    function setState(state) {\n      var isDespues = state === 'despues';\n      wrap.classList.toggle('is-despues', isDespues);\n      card.classList.toggle('is-despues', isDespues);\n      card.setAttribute('aria-pressed', isDespues);\n      card.setAttribute('aria-label', isDespues ? 'Voltear tarjeta para ver el antes' : 'Voltear tarjeta para ver el después');\n      opts.forEach(function (opt) {\n        var active = opt.getAttribute('data-ab-opt') === state;\n        opt.classList.toggle('is-active', active);\n        opt.setAttribute('aria-selected', active);\n      });\n    }\n\n    opts.forEach(function (opt) {\n      opt.addEventListener('click', function () { setState(opt.getAttribute('data-ab-opt')); });\n    });\n    card.addEventListener('click', function () {\n      setState(card.classList.contains('is-despues') ? 'antes' : 'despues');\n    });\n    card.addEventListener('keydown', function (e) {\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {\n        e.preventDefault();\n        setState(card.classList.contains('is-despues') ? 'antes' : 'despues');\n      }\n    });\n\n    \/\/ Espera a que ambas imágenes estén realmente decodificadas antes de\n    \/\/ programar la animación automática de volteo. Así, si el usuario\n    \/\/ hace scroll rápido y entra a la sección antes de que las imágenes\n    \/\/ hayan cargado, la animación no se dispara sobre contenido a medio\n    \/\/ pintar (causa raíz del \"parpadeo en blanco\").\n    function imagesReady() {\n      var imgs = Array.prototype.slice.call(card.querySelectorAll('.ab-face__img'));\n      var promises = imgs.map(function (img) {\n        if (img.complete \u0026\u0026 img.naturalWidth \u003e 0) return Promise.resolve();\n        if (typeof img.decode === 'function') {\n          return img.decode().catch(function () { return Promise.resolve(); });\n        }\n        return new Promise(function (resolve) {\n          img.addEventListener('load', resolve, { once: true });\n          img.addEventListener('error', resolve, { once: true });\n        });\n      });\n      return Promise.all(promises);\n    }\n\n    function clearAutoplayTimers() {\n      autoplayTimers.forEach(function (t) { clearTimeout(t); });\n      autoplayTimers = [];\n    }\n\n    if (!reduced \u0026\u0026 'IntersectionObserver' in window) {\n      var played = false;\n      var observer = new IntersectionObserver(function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting \u0026\u0026 !played) {\n            played = true;\n            imagesReady().then(function () {\n              autoplayTimers.push(setTimeout(function () { setState('despues'); }, 900));\n              autoplayTimers.push(setTimeout(function () { setState('antes'); }, 2600));\n            });\n            observer.disconnect();\n          }\n        });\n      }, { threshold: 0.4, rootMargin: '150px 0px' });\n      observer.observe(card);\n    }\n\n    window.addEventListener('beforeunload', clearAutoplayTimers);\n  })();\n\u003c\/script\u003e\n\n\u003c!-- =============================================================\n     SECCIÓN — MURO DE CONFIANZA MIXTO (ULTRA COMPACTO)\n     Diseño premium con line-clamp y textos directos.\n============================================================== --\u003e\n\u003csection class=\"rv-section\"\u003e\n  \u003cdiv class=\"rv-atmosphere\" aria-hidden=\"true\"\u003e\n    \u003cspan class=\"rv-blob rv-blob--a\"\u003e\u003c\/span\u003e\n    \u003cspan class=\"rv-blob rv-blob--b\"\u003e\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"rv-header\"\u003e\n    \u003cdiv class=\"rv-eyebrow\"\u003e\n      \u003cspan class=\"rv-badge\"\u003e\n        \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\u003e\n          \u003cpath d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\" fill=\"currentColor\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e\n        Más de 5,000 clientes felices\n      \u003c\/span\u003e\n    \u003c\/div\u003e\n    \u003ch2 class=\"rv-title\"\u003e\n      Historias reales de\u003cbr\u003e\n      \u003cspan class=\"rv-title-accent\"\u003etransformación\u003c\/span\u003e\n    \u003c\/h2\u003e\n    \u003cp class=\"rv-subtitle\"\u003eNo nos creas a nosotros. Mira a quienes ya cambiaron su \u003cspan class=\"app-highlight\"\u003ecalidad de vida\u003c\/span\u003e.\u003c\/p\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"rv-marquee-wrapper\"\u003e\n    \u003c!-- Fila 1: Se desplaza hacia la izquierda --\u003e\n    \u003cdiv class=\"rv-marquee\" style=\"--duration: 50s; --direction: normal;\"\u003e\n      \u003cdiv class=\"rv-track\"\u003e\n        \n        \u003c!-- TARJETA 1 (CON IMAGEN) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eC\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003eCamila R.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\n            \u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_914375-MLA112471568555_052026-F.webp?v=1789598784\" alt=\"Foto reseña\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"El mejor descubrimiento\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003ePaso 8 horas de pie. Desde que uso Zypher, llego a casa con energía y sin pesadez.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- TARJETA 2 (TEXTO) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eM\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003eMateo V.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"Adiós al dolor\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003eLa sensación de masaje es real. Mis caminatas ahora son un placer absoluto, la diferencia en mis talones es increíble y descanso mucho mejor.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- TARJETA 3 (CON IMAGEN) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eS\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003eSofía T.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\n            \u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_680828-MLA110633133140_052026-F.webp?v=1789598784\" alt=\"Foto reseña\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"Valen cada peso\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003eFueron mi salvación para un viaje largo. Se adaptan perfecto a mis tenis y no sacan ampollas.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- TARJETA 4 (TEXTO) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eD\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003eDavid L.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"Calidad premium\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003eMateriales súper buenos, no hacen sudar el pie en todo el día. El envío fue rápido. Compra 100% recomendada para quienes trabajan de pie.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- DUPLICADO FILA 1 --\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eC\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003eCamila R.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_914375-MLA112471568555_052026-F.webp?v=1789598784\" alt=\"\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"El mejor descubrimiento\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003ePaso 8 horas de pie. Desde que uso Zypher, llego a casa con energía y sin pesadez.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eM\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003eMateo V.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"Adiós al dolor\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003eLa sensación de masaje es real. Mis caminatas ahora son un placer absoluto, la diferencia en mis talones es increíble y descanso mucho mejor.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eS\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003eSofía T.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_680828-MLA110633133140_052026-F.webp?v=1789598784\" alt=\"\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"Valen cada peso\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003eFueron mi salvación para un viaje largo. Se adaptan perfecto a mis tenis y no sacan ampollas.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eD\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003eDavid L.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"Calidad premium\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003eMateriales súper buenos, no hacen sudar el pie en todo el día. El envío fue rápido. Compra 100% recomendada para quienes trabajan de pie.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Fila 2: Se desplaza hacia la derecha --\u003e\n    \u003cdiv class=\"rv-marquee\" style=\"--duration: 55s; --direction: reverse;\"\u003e\n      \u003cdiv class=\"rv-track\"\u003e\n        \n        \u003c!-- TARJETA 5 (TEXTO) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eP\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003ePaula G.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"Las volvería a comprar\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003eLe regalé un par a mi mamá y terminó amándolas. Ya pedí otras dos para mí y mi esposo, nos han servido muchísimo.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- TARJETA 6 (CON IMAGEN) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eA\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003eAndrés F.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\n            \u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_717995-MLA107101096649_022026-F.webp?v=1789598784\" alt=\"Foto reseña\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"Ideales para entrenar\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003eMis talones sufrían mucho en el gym. Zypher me dio el soporte necesario para recuperarme rápido.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- TARJETA 7 (TEXTO) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eL\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003eLaura M.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"Súper cómodas\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003eNo aprietan, son delgadas pero hacen el trabajo perfecto. Me han quitado toda la tensión del arco después de caminar.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- TARJETA 8 (CON IMAGEN) --\u003e\n        \u003cdiv class=\"rv-card\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eJ\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n              \u003cb\u003eJuan C.\u003c\/b\u003e\n              \u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\n            \u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_971505-MLA107103176245_022026-F_1.webp?v=1789598784\" alt=\"Foto reseña\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n            \u003cdiv class=\"rv-stars\" aria-label=\"5 de 5 estrellas\"\u003e★★★★★\u003c\/div\u003e\n            \u003ch3 class=\"rv-card-title\"\u003e\"Llegaron rapidísimo\"\u003c\/h3\u003e\n            \u003cp class=\"rv-card-text\"\u003eExcelente servicio en Colombia, el producto es tal cual lo anuncian. Mis pies lo agradecen enormemente.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- DUPLICADO FILA 2 --\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eP\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003ePaula G.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"Las volvería a comprar\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003eLe regalé un par a mi mamá y terminó amándolas. Ya pedí otras dos para mí y mi esposo, nos han servido muchísimo.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eA\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003eAndrés F.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_717995-MLA107101096649_022026-F.webp?v=1789598784\" alt=\"\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"Ideales para entrenar\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003eMis talones sufrían mucho en el gym. Zypher me dio el soporte necesario para recuperarme rápido.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eL\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003eLaura M.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"Súper cómodas\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003eNo aprietan, son delgadas pero hacen el trabajo perfecto. Me han quitado toda la tensión del arco después de caminar.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"rv-card\" aria-hidden=\"true\"\u003e\n          \u003cdiv class=\"rv-user\"\u003e\n            \u003cdiv class=\"rv-avatar\"\u003eJ\u003c\/div\u003e\n            \u003cdiv class=\"rv-user-info\"\u003e\n\u003cb\u003eJuan C.\u003c\/b\u003e\u003ci\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003eCompra verificada\u003c\/i\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"rv-media\"\u003e\u003cimg class=\"rv-img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/D_NQ_NP_2X_971505-MLA107103176245_022026-F_1.webp?v=1789598784\" alt=\"\" loading=\"lazy\" decoding=\"async\" onerror=\"var m=this.parentElement;this.onerror=null;this.remove();if(m)m.classList.add('rv-media--empty')\"\u003e\u003c\/div\u003e\n          \u003cdiv class=\"rv-content\"\u003e\n\u003cdiv class=\"rv-stars\"\u003e★★★★★\u003c\/div\u003e\n\u003ch3 class=\"rv-card-title\"\u003e\"Llegaron rapidísimo\"\u003c\/h3\u003e\n\u003cp class=\"rv-card-text\"\u003eExcelente servicio en Colombia, el producto es tal cual lo anuncian. Mis pies lo agradecen enormemente.\u003c\/p\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003cstyle\u003e\n  .rv-section {\n    --rv-font: var(--app-font);\n    --rv-blue: var(--app-blue);\n    --rv-blue-deep: var(--app-blue-deep);\n    --rv-dark: var(--app-dark);\n    --rv-gray: var(--app-gray);\n    --rv-tint: var(--app-tint);\n    --rv-gold: #927B42;\n    \n    content-visibility: auto;\n    contain-intrinsic-size: auto 550px;\n    position: relative;\n    width: 100%;\n    margin: 24px 0 0 !important;\n    padding: 24px 0 !important;\n    background: #ffffff;\n    overflow: hidden;\n    border-radius: 24px;\n    isolation: isolate;\n  }\n\n  .rv-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }\n  .rv-blob { position: absolute; border-radius: 999px; filter: blur(60px); animation: section-drift 18s ease-in-out infinite; will-change: transform; }\n  .rv-blob--a { width: 300px; height: 300px; top: -100px; right: -80px; background: radial-gradient(circle, rgba(79,126,255,0.12), transparent 70%); }\n  .rv-blob--b { width: 280px; height: 280px; bottom: -80px; left: -80px; background: radial-gradient(circle, rgba(46,79,209,0.10), transparent 70%); animation-delay: -9s; }\n\n  .rv-header { position: relative; z-index: 1; text-align: center; margin-bottom: 24px; padding: 0 20px; }\n  \n  .rv-eyebrow { display: flex; justify-content: center; margin-bottom: 12px; }\n  .rv-badge {\n    display: inline-flex; align-items: center; gap: 6px;\n    padding: 6px 14px; background: rgba(245,248,255,0.9); backdrop-filter: blur(8px); border-radius: 999px;\n    font-family: var(--rv-font); font-size: 12.5px; font-weight: 700; color: var(--rv-blue-deep);\n    box-shadow: 0 4px 10px rgba(13,24,52,0.03);\n  }\n  .rv-badge svg { width: 14px; height: 14px; color: var(--app-red); }\n\n  .rv-title {\n    margin: 0; font-family: var(--rv-font);\n    font-size: clamp(24px, 3.5vw, 32px); line-height: 1.15; letter-spacing: -0.02em;\n    font-weight: 800; color: var(--rv-dark); text-wrap: balance;\n  }\n  .rv-title-accent {\n    background: linear-gradient(90deg, var(--rv-blue) 0%, var(--rv-blue-deep) 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n\n  .rv-subtitle {\n    margin: 8px auto 0; max-width: 440px; font-family: var(--rv-font);\n    font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--rv-gray);\n  }\n\n  .rv-marquee-wrapper {\n    position: relative; z-index: 1; display: flex; flex-direction: column;\n    --rv-gap: 16px; gap: var(--rv-gap);\n    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);\n    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);\n  }\n\n  .rv-marquee {\n    display: flex; overflow: hidden; user-select: none;\n    gap: var(--rv-gap); align-items: stretch;\n  }\n\n  .rv-track {\n    display: flex; flex-shrink: 0; min-width: 100%;\n    gap: var(--rv-gap); align-items: stretch;\n    animation: marquee-scroll var(--duration) linear infinite var(--direction);\n    will-change: transform;\n  }\n\n  .rv-marquee:hover .rv-track, .rv-marquee:focus-within .rv-track { animation-play-state: paused; }\n\n  @keyframes marquee-scroll {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(calc(-50% - (var(--rv-gap) \/ 2))); }\n  }\n\n  \/* Tarjeta Aún Más Compacta *\/\n  .rv-card {\n    flex: 0 0 auto;\n    width: 270px;\n    background: #ffffff;\n    border-radius: 16px;\n    padding: 16px;\n    box-shadow: 0 8px 20px rgba(13,24,52,0.05);\n    border: 1px solid rgba(226,234,255,0.7);\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n  \n  .rv-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(13,24,52,0.10); }\n\n  .rv-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }\n\n  .rv-avatar {\n    width: 34px; height: 34px; border-radius: 999px;\n    background: linear-gradient(135deg, var(--rv-blue), var(--rv-blue-deep));\n    color: #fff; display: flex; align-items: center; justify-content: center;\n    font-family: var(--rv-font); font-weight: 800; font-size: 13px;\n  }\n\n  .rv-user-info { display: flex; flex-direction: column; gap: 1px; }\n  .rv-user-info b { font-family: var(--rv-font); font-size: 13.5px; font-weight: 700; color: var(--rv-dark); line-height: 1; }\n  .rv-user-info i { \n    display: flex; align-items: center; gap: 3px;\n    font-style: normal; font-family: var(--rv-font); font-size: 11px; font-weight: 600; color: #10b981; \n  }\n  .rv-user-info i svg { width: 12px; height: 12px; }\n\n  .rv-media {\n    width: 100%; aspect-ratio: 16 \/ 10;\n    border-radius: 8px; overflow: hidden; margin-bottom: 12px;\n    background: var(--rv-tint);\n  }\n  .rv-media--empty { background: linear-gradient(135deg, var(--rv-tint), #eef3ff); }\n  .rv-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s ease; }\n  .rv-card:hover .rv-img { transform: scale(1.05); }\n\n  .rv-content { display: flex; flex-direction: column; flex-grow: 1; }\n  .rv-stars { color: var(--rv-gold); font-size: 14px; letter-spacing: 1px; margin-bottom: 6px; line-height: 1; }\n  .rv-card-title { margin: 0 0 4px; font-family: var(--rv-font); font-size: 14.5px; font-weight: 800; color: var(--rv-dark); }\n  \n  \/* TRUNCAMIENTO DE TEXTO (Line-Clamp) *\/\n  .rv-card-text { \n    margin: 0; \n    font-family: var(--rv-font); \n    font-size: 13px; \n    line-height: 1.45; \n    color: var(--rv-gray); \n    \/* Magia para igualar alturas: *\/\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .rv-blob, .rv-track { animation: none; }\n    .rv-track { flex-wrap: wrap; justify-content: center; transform: none; width: auto; }\n    .rv-marquee { flex-wrap: wrap; justify-content: center; overflow: visible; }\n    .rv-card[aria-hidden=\"true\"] { display: none; }\n    .rv-marquee-wrapper { mask-image: none; -webkit-mask-image: none; }\n  }\n\n  \/* Móvil ultra-optimizado *\/\n  @media (max-width: 860px) {\n    .rv-section { padding: 20px 0 24px !important; margin: 12px 0 0 !important; }\n    .rv-header { margin-bottom: 18px; }\n    .rv-title { font-size: clamp(22px, 7vw, 26px); }\n    .rv-subtitle { font-size: 14px; margin-top: 6px; }\n    \n    .rv-marquee-wrapper { --rv-gap: 12px; }\n    \n    .rv-card { width: 240px; padding: 14px; border-radius: 14px; }\n    .rv-avatar { width: 32px; height: 32px; font-size: 12px; }\n    .rv-user-info b { font-size: 13px; }\n    .rv-media { margin-bottom: 10px; border-radius: 6px; }\n    .rv-card-title { font-size: 13.5px; }\n    .rv-card-text { font-size: 12.5px; }\n  }\n\u003c\/style\u003e\n\n\u003c!-- =============================================================\n     SECCIÓN — CIERRE DE VENTA (BUY BOX FINAL)\n     Layout con imagen, urgencia realista y botón de scroll up.\n============================================================== --\u003e\n\u003csection class=\"fc-section\"\u003e\n  \u003cdiv class=\"fc-atmosphere\" aria-hidden=\"true\"\u003e\n    \u003cspan class=\"fc-blob fc-blob--a\"\u003e\u003c\/span\u003e\n    \u003cspan class=\"fc-blob fc-blob--b\"\u003e\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"fc\"\u003e\n    \u003cdiv class=\"fc-grid\"\u003e\n      \n      \u003c!-- COLUMNA IZQUIERDA: IMAGEN DEL PRODUCTO --\u003e\n      \u003cdiv class=\"fc-visual\"\u003e\n        \u003cdiv class=\"fc-visual__glow\" aria-hidden=\"true\"\u003e\u003c\/div\u003e\n        \u003c!-- CAMBIA EL SRC POR LA IMAGEN DE TU PRODUCTO (Ideal un PNG sin fondo o foto cuadrada limpia) --\u003e\n        \u003cimg class=\"fc-visual__img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_16_sept_2026_18_22_41.png?v=1789600976\" alt=\"Plantillas Magnéticas Zypher\" loading=\"lazy\" decoding=\"async\" onerror=\"this.onerror=null;this.style.display='none'\"\u003e\n        \n        \u003c!-- Sello flotante de garantía sobre la imagen --\u003e\n        \u003cdiv class=\"fc-visual__badge\"\u003e\n          \u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003cpath d=\"M9 12l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          Satisfacción Total\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- COLUMNA DERECHA: COPY, URGENCIA Y CTA --\u003e\n      \u003cdiv class=\"fc-content\"\u003e\n        \u003cdiv class=\"fc-eyebrow\"\u003e\n          \u003cspan class=\"fc-badge\"\u003e\n            \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n              \u003cpath d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\u003e\u003c\/path\u003e\n            \u003c\/svg\u003e\n            Tu mejor inversión\n          \u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fc-title\"\u003e\n          ¿Cuántos días más vas a tolerar el \u003cspan class=\"fc-title-accent\"\u003ecansancio?\u003c\/span\u003e\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fc-subtitle\"\u003e\n          Cada día que pospones esta decisión, son 8 horas más de pesadez acumulada. \u003cstrong\u003eDa el paso hoy y vuelve a caminar ligero.\u003c\/strong\u003e\n        \u003c\/p\u003e\n\n        \u003c!-- Nueva Urgencia: Realista y enfocada en pérdida de beneficios --\u003e\n        \u003cdiv class=\"fc-alert\"\u003e\n          \u003cdiv class=\"fc-alert__icon\"\u003e\n            \u003cspan class=\"fc-alert__pulse\"\u003e\u003c\/span\u003e\n            \u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003c\/circle\u003e\u003cpath d=\"M12 8v4l3 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"fc-alert__text\"\u003e\n            \u003cb\u003eStock Crítico:\u003c\/b\u003e Solo quedan \u003cstrong\u003e14 unidades\u003c\/strong\u003e disponibles con Envío Gratis y Pago Contra Entrega.\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Botón de Compra (Lleva arriba a la buy box de Shopify) --\u003e\n        \u003cbutton class=\"fc-button\" type=\"button\" onclick=\"window.scrollTo({top: 0, behavior: 'smooth'});\" aria-label=\"Volver arriba para comprar\"\u003e\n          \u003cspan\u003eSí, quiero mi par ahora\u003c\/span\u003e\n          \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n        \u003c\/button\u003e\n\n        \u003c!-- Micro-copys de confianza --\u003e\n        \u003cdiv class=\"fc-trust\"\u003e\n          \u003cdiv class=\"fc-trust__item\"\u003e\n            \u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M5 12l5 5L20 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            Pago al recibir\n          \u003c\/div\u003e\n          \u003cdiv class=\"fc-trust__dot\"\u003e\u003c\/div\u003e\n          \u003cdiv class=\"fc-trust__item\"\u003e\n            \u003csvg viewbox=\"0 0 24 24\" fill=\"none\"\u003e\u003cpath d=\"M5 12l5 5L20 7\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            Envío a toda Colombia\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003cstyle\u003e\n  .fc-section {\n    --fc-font: var(--app-font);\n    --fc-blue: var(--app-blue);\n    --fc-blue-deep: var(--app-blue-deep);\n    --fc-dark: var(--app-dark);\n    --fc-red: var(--app-red);\n    --fc-gold: #927B42;\n\n    position: relative;\n    width: 100%;\n    margin: 32px 0 0 !important;\n    padding: 0 !important;\n    \/* Fondo Oscuro Premium *\/\n    background: linear-gradient(145deg, #070e20 0%, var(--fc-dark) 100%);\n    overflow: hidden;\n    border-radius: 24px;\n    isolation: isolate;\n  }\n\n  \/* Atmósfera luminosa *\/\n  .fc-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }\n  .fc-blob { position: absolute; border-radius: 999px; filter: blur(80px); animation: section-drift 15s ease-in-out infinite; will-change: transform; }\n  .fc-blob--a { width: 400px; height: 400px; top: -100px; left: -100px; background: radial-gradient(circle, rgba(79,126,255,0.15), transparent 70%); }\n  .fc-blob--b { width: 350px; height: 350px; bottom: -100px; right: -50px; background: radial-gradient(circle, rgba(46,79,209,0.20), transparent 70%); animation-delay: -5s; }\n\n  .fc { position: relative; z-index: 1; width: min(1000px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0; box-sizing: border-box; }\n\n  \/* Layout apilado: imagen arriba, contenido abajo (igual en PC y en\n     móvil). El orden en el DOM ya trae la imagen primero, así que un\n     grid de una sola columna la deja siempre arriba. *\/\n  .fc-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 28px;\n    align-items: center;\n    text-align: center;\n  }\n\n  \/* Visual (imagen del producto) *\/\n  .fc-visual {\n    position: relative;\n    width: 100%;\n    max-width: 380px;\n    margin: 0 auto;\n    aspect-ratio: auto;\n    padding: 12px 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px;\n    background: transparent;\n    border: none;\n  }\n  \n  .fc-visual__glow {\n    position: absolute; inset: 10%;\n    background: radial-gradient(circle, rgba(79,126,255,0.2), transparent 70%);\n    filter: blur(30px); z-index: 0;\n  }\n\n  .fc-visual__img {\n    position: relative; z-index: 1;\n    width: 80%; max-width: 300px; height: auto;\n    object-fit: contain; \/* Para que un PNG sin fondo quede perfecto *\/\n    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3));\n    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n  }\n  .fc-visual:hover .fc-visual__img { transform: scale(1.05) translateY(-5px); }\n\n  .fc-visual__badge {\n    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2;\n    display: inline-flex; align-items: center; gap: 6px;\n    padding: 6px 12px; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);\n    border-radius: 999px; font-family: var(--fc-font); font-size: 11.5px; font-weight: 800;\n    color: var(--fc-dark); box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n    white-space: nowrap;\n  }\n  .fc-visual__badge svg { width: 16px; height: 16px; color: #10b981; }\n\n  \/* Contenido: copy, urgencia y CTA, centrados debajo de la imagen *\/\n  .fc-content { display: flex; flex-direction: column; align-items: center; text-align: center; }\n\n  .fc-eyebrow { margin-bottom: 20px; }\n  .fc-badge {\n    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;\n    padding: 7px 16px; background: rgba(255,255,255,0.08); backdrop-filter: blur(8px);\n    border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;\n    font-family: var(--fc-font); font-size: 13px; font-weight: 700; color: #a1baff;\n  }\n  .fc-badge svg { width: 15px; height: 15px; color: var(--fc-gold); }\n\n  .fc-title {\n    margin: 0; font-family: var(--fc-font);\n    font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em;\n    font-weight: 800; color: #ffffff; text-wrap: balance;\n  }\n  .fc-title-accent {\n    background: linear-gradient(90deg, #8ba8ff 0%, #ffffff 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n\n  .fc-subtitle {\n    margin: 14px 0 0; max-width: 440px; font-family: var(--fc-font);\n    font-size: 16px; line-height: 1.55; font-weight: 400; color: #b4c5e9;\n  }\n  .fc-subtitle strong { color: #ffffff; font-weight: 600; }\n\n  \/* Urgencia Realista *\/\n  .fc-alert {\n    display: flex; align-items: flex-start; gap: 14px;\n    margin: 28px 0 0; padding: 16px;\n    background: rgba(239, 68, 68, 0.08);\n    border: 1px solid rgba(239, 68, 68, 0.2);\n    border-radius: 14px; max-width: 440px;\n  }\n  .fc-alert__icon { position: relative; color: #ff6b6b; display: flex; margin-top: 2px; }\n  .fc-alert__icon svg { width: 22px; height: 22px; position: relative; z-index: 1; }\n  .fc-alert__pulse {\n    position: absolute; inset: 2px; background: rgba(239, 68, 68, 0.4); border-radius: 50%;\n    animation: pulse-alert 2s infinite; z-index: 0;\n  }\n  @keyframes pulse-alert {\n    0% { transform: scale(1); opacity: 1; }\n    100% { transform: scale(2); opacity: 0; }\n  }\n\n  .fc-alert__text { font-family: var(--fc-font); font-size: 14px; line-height: 1.5; color: #f8fafc; }\n  .fc-alert__text b { color: #ff6b6b; font-weight: 800; }\n  .fc-alert__text strong { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); text-underline-offset: 3px; }\n\n  \/* Botón Principal *\/\n  .fc-button {\n    display: inline-flex; align-items: center; justify-content: center; gap: 10px;\n    width: 100%; max-width: 380px; margin-top: 24px; padding: 18px 24px;\n    background: linear-gradient(135deg, var(--fc-blue), var(--fc-blue-deep));\n    border: none; border-radius: 16px; cursor: pointer;\n    font-family: var(--fc-font); font-size: 17px; font-weight: 800; color: #ffffff;\n    box-shadow: 0 8px 24px rgba(46,79,209,0.4), inset 0 1px 1px rgba(255,255,255,0.3);\n    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  }\n  .fc-button:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 14px 32px rgba(46,79,209,0.5), inset 0 1px 1px rgba(255,255,255,0.4);\n    background: linear-gradient(135deg, #5b87ff, #385de6);\n  }\n  .fc-button:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(46,79,209,0.3); }\n  .fc-button svg { width: 22px; height: 22px; transition: transform 0.3s ease; }\n  .fc-button:hover svg { transform: translateX(4px); }\n\n  \/* Micro-copys de Confianza *\/\n  .fc-trust {\n    display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap;\n  }\n  .fc-trust__item {\n    display: flex; align-items: center; gap: 6px;\n    font-family: var(--fc-font); font-size: 13px; font-weight: 600; color: #a1baff;\n  }\n  .fc-trust__item svg { width: 14px; height: 14px; color: #10b981; }\n  .fc-trust__dot { width: 4px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 50%; }\n\n  @media (prefers-reduced-motion: reduce) {\n    .fc-blob { animation: none; }\n    .fc-alert__pulse { animation: none; }\n    .fc-visual:hover .fc-visual__img { transform: none; }\n    .fc-button { transition: none; }\n    .fc-button:hover { transform: none; }\n    .fc-button:hover svg { transform: none; }\n  }\n\n  \/* Responsive Móvil *\/\n  @media (max-width: 860px) {\n    .fc-section { margin-top: 24px !important; border-radius: 20px; }\n    .fc { padding: 32px 0 40px; width: calc(100% - 24px); }\n    \n    .fc-visual__img { max-width: 260px; }\n\n    .fc-badge { padding: 6px 14px; font-size: 12px; }\n    .fc-title { font-size: clamp(26px, 8vw, 32px); line-height: 1.18; }\n    .fc-subtitle { font-size: 14.5px; margin-top: 12px; }\n    \n    .fc-alert { margin-top: 24px; padding: 14px; border-radius: 12px; text-align: left; align-items: center; }\n    .fc-alert__text { font-size: 13px; }\n    \n    .fc-button { margin-top: 20px; padding: 16px 20px; font-size: 16px; max-width: 100%; }\n    .fc-button svg { width: 20px; height: 20px; }\n    \n    .fc-trust { gap: 8px; margin-top: 16px; flex-direction: column; justify-content: center; }\n    .fc-trust__dot { display: none; }\n  }\n\u003c\/style\u003e","brand":"Zypher","offers":[{"title":"Default Title","offer_id":55583594447147,"sku":null,"price":59900.0,"currency_code":"COP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0999\/4079\/4667\/files\/ChatGPT_Image_15_sept_2026_14_33_58.png?v=1789500859","url":"https:\/\/zyphercore.shop\/products\/plantilla-magnetica","provider":"Zypher","version":"1.0","type":"link"}