{"product_id":"truly","title":"TRULY","description":"\u003c!--\n================================================================\n  TRULY SOFT SERVE — Product Page (Shopify · shrine-theme-pro)\n  Modelo AIDA · Mobile-first · Sin CTAs · Sin precios en texto\n  Animaciones suaves al scroll vía IntersectionObserver\n================================================================\n\n  INSTRUCCIONES PARA USARLO EN SHOPIFY:\n  1. Sube las 10 imágenes a Shopify (Configuración \u003e Archivos).\n  2. Copia el URL de cada imagen desde Shopify (terminan en\n     cdn.shopify.com\/s\/files\/...).\n  3. Reemplaza cada \"REEMPLAZAR-CON-URL-...\" con el URL real.\n     Los nombres de archivo abajo te guían por el orden:\n       01 → hero (imagen 1)\n       02 → beneficios (imagen 2)\n       03 → antes\/después (imagen 3)\n       04 → ingredientes (imagen 4)\n       05 → cómo usarlo (imagen 5)\n       06 → testimonios (imagen 6)\n       07 → comparación (imagen 7)\n       08 → confianza (imagen 8)\n       09 → cierre (imagen 9)\n       10 → FAQ (imagen 10)\n  4. En el editor de producto de Shopify, abre la vista de \"Código\n     fuente\" (\u003c\u003e) y pega TODO este bloque (desde \u003cstyle\u003e hasta el\n     \u003c\/script\u003e final).\n  5. Guarda. Listo. ✨\n================================================================\n--\u003e\n\n\u003cstyle\u003e\n  \/* ---------- Scope: todos los estilos viven dentro de .truly-pdp ---------- *\/\n  .truly-pdp,\n  .truly-pdp *,\n  .truly-pdp *::before,\n  .truly-pdp *::after { box-sizing: border-box; }\n\n  .truly-pdp {\n    --truly-bg: transparent;\n    --truly-text: #2A1F1A;\n    --truly-muted: #7A6C63;\n    --truly-accent: #C9A06E;\n    --truly-accent-soft: #E5CFB3;\n    --truly-divider: #E5DFD4;\n    --truly-radius: 14px;\n    --truly-radius-lg: 20px;\n    --truly-shadow: 0 6px 24px rgba(180, 140, 100, 0.10);\n\n    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;\n    color: var(--truly-text);\n    line-height: 1.6;\n    max-width: 720px;\n    margin: 0 auto;\n    padding: 8px 0 32px;\n    background: var(--truly-bg);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  .truly-pdp img {\n    display: block;\n    width: 100%;\n    height: auto;\n    border-radius: var(--truly-radius-lg);\n    box-shadow: var(--truly-shadow);\n    transition: transform 0.7s ease;\n  }\n\n  .truly-pdp .truly-section {\n    padding: 28px 12px;\n  }\n\n  .truly-pdp .truly-image-wrap {\n    overflow: hidden;\n    border-radius: var(--truly-radius-lg);\n  }\n\n  .truly-pdp .truly-lead {\n    margin: 22px 6px 0;\n    font-size: 16px;\n    line-height: 1.65;\n    color: var(--truly-muted);\n    text-align: center;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n  }\n\n  .truly-pdp .truly-lead strong {\n    color: var(--truly-text);\n    font-weight: 600;\n  }\n\n  .truly-pdp .truly-divider {\n    display: block;\n    width: 48px;\n    height: 1.5px;\n    margin: 22px auto 0;\n    background: var(--truly-accent);\n    border-radius: 2px;\n  }\n\n  .truly-pdp .truly-section:last-child .truly-divider {\n    display: none;\n  }\n\n  \/* ---------- Animaciones reveal al scroll ---------- *\/\n  .truly-pdp .reveal {\n    opacity: 0;\n    transform: translateY(24px);\n    transition:\n      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),\n      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);\n    will-change: opacity, transform;\n  }\n\n  .truly-pdp .reveal.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* Suave zoom al entrar la imagen en pantalla *\/\n  .truly-pdp .reveal.is-visible img {\n    animation: trulySoftZoom 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;\n  }\n\n  @keyframes trulySoftZoom {\n    0%   { transform: scale(1.035); }\n    100% { transform: scale(1); }\n  }\n\n  \/* Respeta a quienes prefieren menos movimiento *\/\n  @media (prefers-reduced-motion: reduce) {\n    .truly-pdp .reveal {\n      opacity: 1;\n      transform: none;\n      transition: none;\n    }\n    .truly-pdp .reveal.is-visible img {\n      animation: none;\n    }\n    .truly-pdp img { transition: none; }\n  }\n\n  \/* ---------- Tablet \/ Desktop ---------- *\/\n  @media (min-width: 768px) {\n    .truly-pdp {\n      padding: 16px 0 48px;\n    }\n    .truly-pdp .truly-section {\n      padding: 44px 16px;\n    }\n    .truly-pdp .truly-lead {\n      font-size: 17.5px;\n      margin-top: 28px;\n      max-width: 560px;\n      margin-left: auto;\n      margin-right: auto;\n    }\n    .truly-pdp .truly-divider {\n      margin-top: 30px;\n    }\n  }\n\u003c\/style\u003e\n\n\u003cdiv class=\"truly-pdp\"\u003e\n\n  \u003c!-- ============ A · ATENCIÓN ============ --\u003e\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-01-hero.jpg\" alt=\"TRULY Soft Serve After Shave Oil — Piel suave, luminosa y sin irritación\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Un aceite \u003cstrong\u003eligero, vegano y multifuncional\u003c\/strong\u003e que se absorbe en segundos\n      y deja la piel sedosa, calmada y radiante desde la primera aplicación.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============ I · INTERÉS ============ --\u003e\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-02-beneficios.jpg\" alt=\"Beneficios que tu piel siente al instante con Soft Serve\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Resultados que tu piel celebra: \u003cstrong\u003ecalma, hidratación y luminosidad\u003c\/strong\u003e\n      en una sola gota, sin sensación pegajosa.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-03-antes-despues.jpg\" alt=\"Resultados visibles del día 1 al día 30 con uso constante\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Pequeños gestos diarios, \u003cstrong\u003etransformaciones reales\u003c\/strong\u003e.\n      La diferencia se nota en el espejo y, sobre todo, al tacto.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-04-ingredientes.jpg\" alt=\"Ingredientes premium: fresa, ácido hialurónico y péptidos\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Una fórmula \u003cstrong\u003elimpia y vegana\u003c\/strong\u003e, con ingredientes que tu piel\n      reconoce, absorbe y agradece.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============ D · DESEO ============ --\u003e\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-05-como-usar.jpg\" alt=\"Cómo usar Soft Serve en 3 pasos sencillos\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      \u003cstrong\u003eRápido, práctico y suave.\u003c\/strong\u003e Se incorpora a tu rutina diaria\n      sin complicaciones, en menos de un minuto.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-06-testimonios.jpg\" alt=\"Testimonios reales de clientas TRULY: Andrea, Sofía y Valentina\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Las \u003cstrong\u003eexperiencias hablan más que mil promesas\u003c\/strong\u003e:\n      mujeres reales, resultados reales.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-07-comparacion.jpg\" alt=\"Por qué elegir TRULY frente a productos comunes del mercado\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Más que un aftershave: una \u003cstrong\u003eexperiencia premium\u003c\/strong\u003e que se siente,\n      se ve y se huele desde la primera gota.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============ A · ACCIÓN (sin CTA) ============ --\u003e\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-08-confianza.jpg\" alt=\"Compra con confianza: pago al recibir, envío seguro y alta satisfacción\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Pedirlo es fácil, recibirlo es seguro y disfrutarlo es \u003cstrong\u003edelicioso\u003c\/strong\u003e.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-09-cierre.jpg\" alt=\"Piel suave, luminosa y deliciosa al tacto con TRULY Soft Serve\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cp class=\"truly-lead\"\u003e\n      Tu momento de cuidado empieza hoy, con la \u003cstrong\u003esuavidad que tu piel se merece\u003c\/strong\u003e.\n    \u003c\/p\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"truly-section reveal\"\u003e\n    \u003cdiv class=\"truly-image-wrap\"\u003e\n      \u003cimg src=\"REEMPLAZAR-CON-URL-10-faq.jpg\" alt=\"Preguntas frecuentes sobre TRULY Soft Serve After Shave Oil\" loading=\"lazy\" decoding=\"async\"\u003e\n    \u003c\/div\u003e\n    \u003cspan class=\"truly-divider\"\u003e\u003c\/span\u003e\n  \u003c\/section\u003e\n\n\u003c\/div\u003e\n\n\u003cscript\u003e\n  \/* IntersectionObserver para animaciones suaves al scroll.\n     Liviano (~0.6 KB), sin dependencias, no afecta el tiempo de carga. *\/\n  (function () {\n    var root = document.querySelector('.truly-pdp');\n    if (!root) return;\n\n    var targets = root.querySelectorAll('.reveal');\n\n    \/* Fallback: si el navegador no soporta IO, mostramos todo visible *\/\n    if (!('IntersectionObserver' in window)) {\n      for (var i = 0; i \u003c targets.length; i++) {\n        targets[i].classList.add('is-visible');\n      }\n      return;\n    }\n\n    var io = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-visible');\n          io.unobserve(entry.target);\n        }\n      });\n    }, {\n      threshold: 0.14,\n      rootMargin: '0px 0px -8% 0px'\n    });\n\n    targets.forEach(function (el) { io.observe(el); });\n  })();\n\u003c\/script\u003e","brand":"Click \u0026 Compra","offers":[{"title":"Default Title","offer_id":55697261428809,"sku":null,"price":0.0,"currency_code":"COP","in_stock":false}],"url":"https:\/\/clicycompras.shop\/products\/truly","provider":"Click \u0026 Compra","version":"1.0","type":"link"}