{"product_id":"llaveros-mundo","title":"LLAVEROS MUNDO","description":"\u003cbody\u003e\n\n\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003ctitle\u003eCapri Pets – Llaveros de Cuero Artesanales\u003c\/title\u003e\n\u003clink rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\u003e\n\u003clink rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\u003e\n\u003clink href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,300\u0026amp;family=Inter:wght@400;500;600\u0026amp;display=swap\" rel=\"stylesheet\"\u003e\n\u003cstyle\u003e\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --orange: #FF6B35;\n    --navy: #1B2A4A;\n    --white: #FFFFFF;\n    --cream: #F7F5F2;\n    --navy-light: #2E4270;\n    --text-muted: #8090AA;\n    --card-w: 220px;\n    --card-h: 290px;\n  }\n\n  html { scroll-behavior: smooth; }\n\n  body {\n    font-family: 'Inter', sans-serif;\n    background: var(--white);\n    color: var(--navy);\n    overflow-x: hidden;\n  }\n\n  \/* ── NAV ── *\/\n  nav {\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0 20px; height: 56px;\n    background: rgba(27,42,74,0.96);\n    backdrop-filter: blur(8px);\n  }\n  .nav-logo {\n    font-family: 'Fraunces', serif;\n    font-weight: 900; font-size: 1.25rem; color: var(--white);\n    letter-spacing: -0.02em;\n  }\n  .nav-logo span { color: var(--orange); }\n  .nav-cta {\n    background: var(--orange); color: var(--white);\n    border: none; border-radius: 20px;\n    padding: 8px 18px; font-family: 'Inter', sans-serif;\n    font-size: 0.8rem; font-weight: 600; cursor: pointer;\n    text-decoration: none; transition: opacity .2s;\n  }\n  .nav-cta:hover { opacity: .85; }\n\n  \/* ── HERO ── *\/\n  .hero {\n    min-height: 100svh;\n    background: var(--navy);\n    display: flex; flex-direction: column;\n    align-items: center; justify-content: center;\n    text-align: center;\n    padding: 80px 24px 48px;\n    position: relative; overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute; inset: 0;\n    background:\n      radial-gradient(ellipse 70% 50% at 20% 80%, rgba(255,107,53,.18) 0%, transparent 60%),\n      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,107,53,.10) 0%, transparent 60%);\n    pointer-events: none;\n  }\n  .hero-eyebrow {\n    font-size: 0.72rem; font-weight: 600; letter-spacing: .18em;\n    text-transform: uppercase; color: var(--orange);\n    margin-bottom: 16px;\n  }\n  .hero h1 {\n    font-family: 'Fraunces', serif;\n    font-weight: 900; font-size: clamp(2.4rem, 8vw, 5rem);\n    line-height: 1.0; color: var(--white);\n    letter-spacing: -0.03em; margin-bottom: 20px;\n  }\n  .hero h1 em {\n    font-style: italic; font-weight: 300; color: var(--orange);\n  }\n  .hero-sub {\n    font-size: clamp(0.9rem, 2.5vw, 1.05rem);\n    color: rgba(255,255,255,.65); max-width: 480px;\n    line-height: 1.6; margin-bottom: 36px;\n  }\n  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }\n  .btn-primary {\n    background: var(--orange); color: var(--white);\n    border: none; border-radius: 28px;\n    padding: 14px 28px; font-family: 'Inter', sans-serif;\n    font-size: 0.9rem; font-weight: 600; cursor: pointer;\n    text-decoration: none; transition: transform .2s, box-shadow .2s;\n    box-shadow: 0 4px 20px rgba(255,107,53,.4);\n  }\n  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,107,53,.5); }\n  .btn-ghost {\n    background: transparent; color: var(--white);\n    border: 1.5px solid rgba(255,255,255,.3); border-radius: 28px;\n    padding: 14px 28px; font-family: 'Inter', sans-serif;\n    font-size: 0.9rem; font-weight: 500; cursor: pointer;\n    text-decoration: none; transition: border-color .2s, background .2s;\n  }\n  .btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.06); }\n  .hero-scroll {\n    margin-top: 48px; color: rgba(255,255,255,.35);\n    font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase;\n    display: flex; flex-direction: column; align-items: center; gap: 6px;\n    animation: bounce 2s infinite;\n  }\n  .hero-scroll svg { width: 16px; opacity: .5; }\n  @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }\n\n  \/* ── TRUST STRIP ── *\/\n  .trust {\n    background: var(--cream);\n    padding: 20px 24px;\n    display: flex; justify-content: center; gap: 32px;\n    flex-wrap: wrap;\n  }\n  .trust-item {\n    display: flex; align-items: center; gap: 8px;\n    font-size: 0.8rem; font-weight: 500; color: var(--navy);\n  }\n  .trust-item svg { color: var(--orange); flex-shrink: 0; }\n\n  \/* ── SECTION HEADER ── *\/\n  .section-header {\n    text-align: center; padding: 64px 24px 32px;\n  }\n  .section-header .eyebrow {\n    font-size: 0.72rem; font-weight: 600; letter-spacing: .18em;\n    text-transform: uppercase; color: var(--orange); margin-bottom: 10px;\n  }\n  .section-header h2 {\n    font-family: 'Fraunces', serif; font-weight: 900;\n    font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1;\n    letter-spacing: -0.03em; color: var(--navy);\n  }\n  .section-header p {\n    margin-top: 12px; font-size: 0.95rem; color: var(--text-muted);\n    max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.6;\n  }\n\n  \/* ── SEARCH ── *\/\n  .search-wrap {\n    padding: 0 24px 12px;\n    display: flex; justify-content: center;\n  }\n  .search-box {\n    position: relative; width: 100%; max-width: 420px;\n  }\n  .search-box input {\n    width: 100%;\n    padding: 13px 48px 13px 18px;\n    border: 2px solid #E2E8F0; border-radius: 28px;\n    font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--navy);\n    background: var(--white); outline: none;\n    transition: border-color .2s, box-shadow .2s;\n  }\n  .search-box input:focus {\n    border-color: var(--orange);\n    box-shadow: 0 0 0 3px rgba(255,107,53,.15);\n  }\n  .search-box input::placeholder { color: var(--text-muted); }\n  .search-icon {\n    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);\n    color: var(--text-muted); pointer-events: none;\n  }\n\n  \/* ── FILTER TABS ── *\/\n  .filter-tabs {\n    display: flex; justify-content: center; gap: 8px;\n    padding: 0 24px 28px; flex-wrap: wrap;\n  }\n  .tab {\n    padding: 7px 18px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;\n    border: 1.5px solid #E2E8F0; background: var(--white); color: var(--navy);\n    cursor: pointer; transition: all .18s;\n  }\n  .tab.active, .tab:hover {\n    background: var(--navy); color: var(--white); border-color: var(--navy);\n  }\n  .tab.active { background: var(--orange); border-color: var(--orange); }\n\n  \/* ── COVERFLOW ── *\/\n  .coverflow-section {\n    background: var(--cream);\n    padding: 48px 0 64px;\n    overflow: hidden;\n  }\n  .coverflow-container {\n    position: relative; width: 100%;\n    height: calc(var(--card-h) + 80px);\n    perspective: 1000px;\n    cursor: grab;\n    user-select: none;\n  }\n  .coverflow-container:active { cursor: grabbing; }\n  .coverflow-track {\n    position: absolute; top: 0; left: 50%;\n    height: 100%;\n    transform-style: preserve-3d;\n    will-change: transform;\n    transition: none;\n  }\n  .cf-card {\n    position: absolute;\n    width: var(--card-w); height: var(--card-h);\n    top: 24px;\n    transform-origin: center center;\n    transition: transform .45s cubic-bezier(.25,.46,.45,.94),\n                opacity .45s ease,\n                filter .45s ease;\n    will-change: transform;\n    cursor: pointer;\n  }\n  .cf-card-inner {\n    width: 100%; height: 100%;\n    background: var(--white);\n    border-radius: 18px;\n    overflow: hidden;\n    box-shadow: 0 8px 32px rgba(27,42,74,.14);\n    display: flex; flex-direction: column;\n    transition: box-shadow .3s;\n  }\n  .cf-card.is-center .cf-card-inner {\n    box-shadow: 0 20px 60px rgba(27,42,74,.22), 0 0 0 2.5px var(--orange);\n  }\n  .cf-card-img {\n    width: 100%; flex: 1;\n    object-fit: cover; display: block;\n    background: #E8EEF6;\n  }\n  .cf-card-label {\n    padding: 12px 14px 14px;\n    text-align: center;\n  }\n  .cf-card-label .breed-name {\n    font-family: 'Fraunces', serif; font-weight: 700;\n    font-size: 0.95rem; color: var(--navy); letter-spacing: -0.01em;\n  }\n  .cf-card-label .breed-type {\n    font-size: 0.72rem; font-weight: 500; color: var(--text-muted);\n    text-transform: uppercase; letter-spacing: .1em; margin-top: 2px;\n  }\n  .cf-card-label .price-tag {\n    display: inline-block; margin-top: 8px;\n    background: var(--orange); color: var(--white);\n    padding: 3px 12px; border-radius: 12px;\n    font-size: 0.78rem; font-weight: 700;\n  }\n\n  \/* Dots nav *\/\n  .cf-dots {\n    display: flex; justify-content: center; gap: 6px; margin-top: 28px; padding: 0 24px;\n  }\n  .cf-dot {\n    width: 7px; height: 7px; border-radius: 50%;\n    background: #C8D2E0; cursor: pointer; transition: all .2s;\n    border: none;\n  }\n  .cf-dot.active { background: var(--orange); width: 20px; border-radius: 4px; }\n\n  \/* Arrows *\/\n  .cf-arrows {\n    display: flex; justify-content: center; gap: 12px; margin-top: 20px;\n  }\n  .cf-arrow {\n    width: 44px; height: 44px; border-radius: 50%;\n    border: 1.5px solid #D0D8E8; background: var(--white);\n    display: flex; align-items: center; justify-content: center;\n    cursor: pointer; transition: all .2s; color: var(--navy);\n  }\n  .cf-arrow:hover { border-color: var(--orange); color: var(--orange); background: #FFF4F0; }\n\n  \/* no-results *\/\n  .no-results {\n    text-align: center; padding: 48px 24px; display: none;\n  }\n  .no-results p { font-size: 1rem; color: var(--text-muted); }\n\n  \/* ── HOW IT WORKS ── *\/\n  .how {\n    padding: 64px 24px;\n    max-width: 900px; margin: 0 auto;\n  }\n  .how-grid {\n    display: grid; grid-template-columns: 1fr;\n    gap: 24px; margin-top: 40px;\n  }\n  .how-card {\n    display: flex; gap: 20px; align-items: flex-start;\n    background: var(--cream); border-radius: 16px; padding: 24px;\n  }\n  .how-num {\n    font-family: 'Fraunces', serif; font-weight: 900;\n    font-size: 2.5rem; color: var(--orange); line-height: 1;\n    flex-shrink: 0; min-width: 48px;\n  }\n  .how-card h3 {\n    font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.1rem;\n    color: var(--navy); margin-bottom: 6px;\n  }\n  .how-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }\n\n  \/* ── CTA BANNER ── *\/\n  .cta-banner {\n    background: var(--navy);\n    margin: 0 16px 64px; border-radius: 24px;\n    padding: 48px 24px; text-align: center;\n    position: relative; overflow: hidden;\n  }\n  .cta-banner::before {\n    content: '';\n    position: absolute; bottom: -40px; right: -40px;\n    width: 220px; height: 220px; border-radius: 50%;\n    background: rgba(255,107,53,.12);\n    pointer-events: none;\n  }\n  .cta-banner h2 {\n    font-family: 'Fraunces', serif; font-weight: 900;\n    font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--white);\n    letter-spacing: -0.03em; margin-bottom: 12px;\n  }\n  .cta-banner p { color: rgba(255,255,255,.6); font-size: 0.9rem; margin-bottom: 28px; line-height: 1.6; }\n\n  \/* ── FOOTER ── *\/\n  footer {\n    background: var(--navy);\n    padding: 32px 24px;\n    text-align: center;\n    color: rgba(255,255,255,.4);\n    font-size: 0.8rem;\n  }\n  footer .footer-logo {\n    font-family: 'Fraunces', serif; font-weight: 900;\n    font-size: 1.4rem; color: var(--white); margin-bottom: 8px;\n  }\n  footer .footer-logo span { color: var(--orange); }\n\n  \/* ── RESPONSIVE ── *\/\n  @media (min-width: 640px) {\n    .how-grid { grid-template-columns: 1fr 1fr; }\n    :root { --card-w: 240px; --card-h: 310px; }\n  }\n  @media (min-width: 900px) {\n    .how-grid { grid-template-columns: 1fr 1fr 1fr; }\n    :root { --card-w: 260px; --card-h: 330px; }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .cf-card { transition: none; }\n    .hero-scroll { animation: none; }\n  }\n\n  \/* ── PLACEHOLDER BREED IMAGES (SVG data URIs) ── *\/\n  \/* Generated inline in JS *\/\n\u003c\/style\u003e\n\n\n\n\u003c!-- NAV --\u003e\n\u003cnav\u003e\n  \u003cdiv class=\"nav-logo\"\u003eCapri\u003cspan\u003ePets\u003c\/span\u003e\n\u003c\/div\u003e\n  \u003ca href=\"#razas\" class=\"nav-cta\"\u003eVer llaveros\u003c\/a\u003e\n\u003c\/nav\u003e\n\n\u003c!-- HERO --\u003e\n\u003csection class=\"hero\"\u003e\n  \u003cp class=\"hero-eyebrow\"\u003eCuero artesanal colombiano\u003c\/p\u003e\n  \u003ch1\u003eTu raza,\u003cbr\u003e\u003cem\u003etu llave.\u003c\/em\u003e\n\u003c\/h1\u003e\n  \u003cp class=\"hero-sub\"\u003eLlaveros de cuero curtido a mano con la silueta de tu raza favorita. Más de 60 razas de perros y gatos disponibles.\u003c\/p\u003e\n  \u003cdiv class=\"hero-actions\"\u003e\n    \u003ca href=\"#razas\" class=\"btn-primary\"\u003eExplorar razas\u003c\/a\u003e\n    \u003ca href=\"#como\" class=\"btn-ghost\"\u003e¿Cómo funciona?\u003c\/a\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"hero-scroll\"\u003e\n    \u003cspan\u003eDescubre\u003c\/span\u003e\n    \u003csvg viewbox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\n      \u003cpath d=\"M8 3v10M4 9l4 4 4-4\"\u003e\u003c\/path\u003e\n    \u003c\/svg\u003e\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003c!-- TRUST --\u003e\n\u003cdiv class=\"trust\"\u003e\n  \u003cdiv class=\"trust-item\"\u003e\n    \u003csvg width=\"16\" height=\"16\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n    \u003cspan\u003eCuero 100% genuino\u003c\/span\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"trust-item\"\u003e\n    \u003csvg width=\"16\" height=\"16\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\"\u003e\u003c\/circle\u003e\u003cpath d=\"M12 6v6l4 2\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n    \u003cspan\u003eEnvío en 3–5 días\u003c\/span\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"trust-item\"\u003e\n    \u003csvg width=\"16\" height=\"16\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n    \u003cspan\u003eHecho en Bogotá\u003c\/span\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"trust-item\"\u003e\n    \u003csvg width=\"16\" height=\"16\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e\n    \u003cspan\u003e+500 clientes felices\u003c\/span\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- COVERFLOW SECTION --\u003e\n\u003cdiv id=\"razas\"\u003e\n  \u003cdiv class=\"section-header\"\u003e\n    \u003cp class=\"eyebrow\"\u003eNuestras razas\u003c\/p\u003e\n    \u003ch2\u003eEncuentra la tuya\u003c\/h2\u003e\n    \u003cp\u003eCada llavero es tallado y cosido a mano. Elige tu raza y llévala contigo.\u003c\/p\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Search --\u003e\n  \u003cdiv class=\"search-wrap\"\u003e\n    \u003cdiv class=\"search-box\"\u003e\n      \u003cinput type=\"text\" id=\"searchInput\" placeholder=\"Buscar raza… ej: Golden Retriever\" autocomplete=\"off\"\u003e\n      \u003cspan class=\"search-icon\"\u003e\n        \u003csvg width=\"18\" height=\"18\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\n          \u003ccircle cx=\"11\" cy=\"11\" r=\"8\"\u003e\u003c\/circle\u003e\u003cpath d=\"m21 21-4.35-4.35\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e\n      \u003c\/span\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Filter tabs --\u003e\n  \u003cdiv class=\"filter-tabs\"\u003e\n    \u003cbutton class=\"tab active\" data-filter=\"all\"\u003eTodos\u003c\/button\u003e\n    \u003cbutton class=\"tab\" data-filter=\"perro\"\u003ePerros 🐶\u003c\/button\u003e\n    \u003cbutton class=\"tab\" data-filter=\"gato\"\u003eGatos 🐱\u003c\/button\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Coverflow --\u003e\n  \u003cdiv class=\"coverflow-section\"\u003e\n    \u003cdiv class=\"coverflow-container\" id=\"cfContainer\"\u003e\n      \u003cdiv class=\"coverflow-track\" id=\"cfTrack\"\u003e\u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"no-results\" id=\"noResults\"\u003e\n      \u003cp\u003eNo encontramos esa raza. ¡Pronto añadimos más!\u003c\/p\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"cf-dots\" id=\"cfDots\"\u003e\u003c\/div\u003e\n    \u003cdiv class=\"cf-arrows\"\u003e\n      \u003cbutton class=\"cf-arrow\" id=\"cfPrev\" aria-label=\"Anterior\"\u003e\n        \u003csvg width=\"18\" height=\"18\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M15 18l-6-6 6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n      \u003cbutton class=\"cf-arrow\" id=\"cfNext\" aria-label=\"Siguiente\"\u003e\n        \u003csvg width=\"18\" height=\"18\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M9 18l6-6-6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003c\/button\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- HOW IT WORKS --\u003e\n\u003csection class=\"how\" id=\"como\"\u003e\n  \u003cdiv class=\"section-header\" style=\"padding-top:0\"\u003e\n    \u003cp class=\"eyebrow\"\u003eEl proceso\u003c\/p\u003e\n    \u003ch2\u003eDel cuero a tus llaves\u003c\/h2\u003e\n    \u003cp\u003eCada llavero pasa por tres manos artesanas antes de llegar a ti.\u003c\/p\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"how-grid\"\u003e\n    \u003cdiv class=\"how-card\"\u003e\n      \u003cdiv class=\"how-num\"\u003e01\u003c\/div\u003e\n      \u003cdiv\u003e\n        \u003ch3\u003eElige tu raza\u003c\/h3\u003e\n        \u003cp\u003eMás de 60 razas en el catálogo. Si no está la tuya, escríbenos y la añadimos.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"how-card\"\u003e\n      \u003cdiv class=\"how-num\"\u003e02\u003c\/div\u003e\n      \u003cdiv\u003e\n        \u003ch3\u003eCortamos y tallamos\u003c\/h3\u003e\n        \u003cp\u003eCuero vegetal curtido, cortado a mano y tallado con la silueta exacta de la raza.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"how-card\"\u003e\n      \u003cdiv class=\"how-num\"\u003e03\u003c\/div\u003e\n      \u003cdiv\u003e\n        \u003ch3\u003eLlega a tu puerta\u003c\/h3\u003e\n        \u003cp\u003eEmpacado en caja kraft con tu nombre. Envío a toda Colombia en 3–5 días hábiles.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/section\u003e\n\n\u003c!-- CTA BANNER --\u003e\n\u003cdiv class=\"cta-banner\"\u003e\n  \u003ch2\u003e¿No encuentras tu raza?\u003c\/h2\u003e\n  \u003cp\u003eTenemos más de 60 razas y seguimos creciendo. Escríbenos por WhatsApp y te respondemos en minutos.\u003c\/p\u003e\n  \u003ca href=\"https:\/\/wa.me\/573000000000?text=Hola!+Quiero+un+llavero+de+mi+raza\" class=\"btn-primary\" target=\"_blank\" rel=\"noopener\"\u003e\n    Escribir por WhatsApp\n  \u003c\/a\u003e\n\u003c\/div\u003e\n\n\u003c!-- FOOTER --\u003e\n\u003cfooter\u003e\n  \u003cdiv class=\"footer-logo\"\u003eCapri\u003cspan\u003ePets\u003c\/span\u003e\n\u003c\/div\u003e\n  \u003cp\u003e© 2025 Capri Pets · Bogotá, Colombia · capripets.com\u003c\/p\u003e\n  \u003cp style=\"margin-top:6px\"\u003eLlaveros de cuero artesanales para amantes de perros y gatos\u003c\/p\u003e\n\u003c\/footer\u003e\n\n\u003cscript\u003e\n\/\/ ── BREED DATA ──────────────────────────────────────────────────────────────\n\/\/ Placeholder breed images generated as colored SVG canvases with silhouettes\n\/\/ In production replace imgUrl with real Shopify CDN URLs\n\nconst BREEDS = [\n  \/\/ PERROS\n  { name: \"Golden Retriever\",   type: \"perro\", emoji: \"🐕\", color: \"#D4A017\" },\n  { name: \"Labrador\",           type: \"perro\", emoji: \"🐕\", color: \"#C8A97A\" },\n  { name: \"Bulldog Francés\",    type: \"perro\", emoji: \"🐕\", color: \"#8C7B6E\" },\n  { name: \"Beagle\",             type: \"perro\", emoji: \"🐕\", color: \"#A0855A\" },\n  { name: \"Poodle\",             type: \"perro\", emoji: \"🐕\", color: \"#E8D5C4\" },\n  { name: \"Shih Tzu\",          type: \"perro\", emoji: \"🐕\", color: \"#D4B483\" },\n  { name: \"Yorkshire Terrier\",  type: \"perro\", emoji: \"🐕\", color: \"#6B4F32\" },\n  { name: \"Chihuahua\",          type: \"perro\", emoji: \"🐕\", color: \"#C49A6C\" },\n  { name: \"Border Collie\",      type: \"perro\", emoji: \"🐕\", color: \"#2C2C2C\" },\n  { name: \"Husky Siberiano\",    type: \"perro\", emoji: \"🐕\", color: \"#607D8B\" },\n  { name: \"Dálmata\",            type: \"perro\", emoji: \"🐕\", color: \"#F5F5F5\" },\n  { name: \"Pastor Alemán\",      type: \"perro\", emoji: \"🐕\", color: \"#7B5B3A\" },\n  { name: \"Rottweiler\",         type: \"perro\", emoji: \"🐕\", color: \"#1A1A1A\" },\n  { name: \"Boxer\",              type: \"perro\", emoji: \"🐕\", color: \"#C4874A\" },\n  { name: \"Dachshund\",          type: \"perro\", emoji: \"🐕\", color: \"#8B4513\" },\n  { name: \"Pomerania\",          type: \"perro\", emoji: \"🐕\", color: \"#E8A87C\" },\n  { name: \"Maltés\",             type: \"perro\", emoji: \"🐕\", color: \"#F0EDE8\" },\n  { name: \"Schnauzer\",          type: \"perro\", emoji: \"🐕\", color: \"#9E9E9E\" },\n  { name: \"Bulldog Inglés\",     type: \"perro\", emoji: \"🐕\", color: \"#B8A090\" },\n  { name: \"Cocker Spaniel\",     type: \"perro\", emoji: \"🐕\", color: \"#D4924A\" },\n  \/\/ GATOS\n  { name: \"Persa\",              type: \"gato\",  emoji: \"🐈\", color: \"#F0E0D0\" },\n  { name: \"Siamés\",             type: \"gato\",  emoji: \"🐈\", color: \"#E8D5B0\" },\n  { name: \"Maine Coon\",         type: \"gato\",  emoji: \"🐈\", color: \"#9E7E5A\" },\n  { name: \"Ragdoll\",            type: \"gato\",  emoji: \"🐈\", color: \"#D4C4B8\" },\n  { name: \"British Shorthair\",  type: \"gato\",  emoji: \"🐈\", color: \"#7890A8\" },\n  { name: \"Bengalí\",            type: \"gato\",  emoji: \"🐈\", color: \"#C8A050\" },\n  { name: \"Abisinio\",           type: \"gato\",  emoji: \"🐈\", color: \"#C07840\" },\n  { name: \"Scottish Fold\",      type: \"gato\",  emoji: \"🐈\", color: \"#B0A090\" },\n  { name: \"Sphynx\",             type: \"gato\",  emoji: \"🐈\", color: \"#D4A87A\" },\n  { name: \"Russian Blue\",       type: \"gato\",  emoji: \"🐈\", color: \"#708090\" },\n  { name: \"Angora Turco\",       type: \"gato\",  emoji: \"🐈\", color: \"#F0EDE8\" },\n  { name: \"Burmés\",             type: \"gato\",  emoji: \"🐈\", color: \"#704030\" },\n];\n\n\/\/ Generate a placeholder SVG image for a breed card\nfunction breedSVG(breed) {\n  const bg = breed.color;\n  const em = breed.emoji;\n  return `data:image\/svg+xml;charset=utf-8,${encodeURIComponent(`\u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"260\" height=\"210\" viewBox=\"0 0 260 210\"\u003e\u003crect width=\"260\" height=\"210\" fill=\"${bg}\"\/\u003e\u003crect width=\"260\" height=\"210\" fill=\"rgba(0,0,0,0.08)\"\/\u003e\u003ctext x=\"130\" y=\"115\" font-size=\"72\" text-anchor=\"middle\" dominant-baseline=\"middle\"\u003e${em}\u003c\/text\u003e\u003ctext x=\"130\" y=\"172\" font-size=\"11\" text-anchor=\"middle\" fill=\"rgba(255,255,255,0.6)\" font-family=\"sans-serif\" letter-spacing=\"2\"\u003eCUERO ARTESANAL\u003c\/text\u003e\u003c\/svg\u003e`)}`;\n}\n\n\/\/ ── COVERFLOW ENGINE ────────────────────────────────────────────────────────\nconst GAP = 180; \/\/ px between card centers\nlet currentIndex = 0;\nlet filtered = [...BREEDS];\nlet isDragging = false;\nlet startX = 0;\nlet dragDelta = 0;\nlet animating = false;\n\nconst track = document.getElementById('cfTrack');\nconst dotsEl = document.getElementById('cfDots');\nconst container = document.getElementById('cfContainer');\nconst noResults = document.getElementById('noResults');\n\nfunction buildCards() {\n  track.innerHTML = '';\n  dotsEl.innerHTML = '';\n\n  if (filtered.length === 0) {\n    container.style.display = 'none';\n    noResults.style.display = 'block';\n    dotsEl.style.display = 'none';\n    document.querySelector('.cf-arrows').style.display = 'none';\n    return;\n  }\n  container.style.display = 'block';\n  noResults.style.display = 'none';\n  dotsEl.style.display = 'flex';\n  document.querySelector('.cf-arrows').style.display = 'flex';\n\n  filtered.forEach((breed, i) =\u003e {\n    const card = document.createElement('div');\n    card.className = 'cf-card';\n    card.dataset.index = i;\n    card.innerHTML = `\n      \u003cdiv class=\"cf-card-inner\"\u003e\n        \u003cimg class=\"cf-card-img\" src=\"${breedSVG(breed)}\" alt=\"${breed.name}\" draggable=\"false\"\u003e\n        \u003cdiv class=\"cf-card-label\"\u003e\n          \u003cdiv class=\"breed-name\"\u003e${breed.name}\u003c\/div\u003e\n          \u003cdiv class=\"breed-type\"\u003e${breed.type === 'perro' ? 'Perro' : 'Gato'}\u003c\/div\u003e\n          \u003cspan class=\"price-tag\"\u003e$35.000\u003c\/span\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e`;\n    card.addEventListener('click', () =\u003e { if (!isDragging) goTo(i); });\n    track.appendChild(card);\n\n    if (i \u003c Math.min(filtered.length, 20)) {\n      const dot = document.createElement('button');\n      dot.className = 'cf-dot' + (i === currentIndex ? ' active' : '');\n      dot.setAttribute('aria-label', `Ir a ${breed.name}`);\n      dot.addEventListener('click', () =\u003e goTo(i));\n      dotsEl.appendChild(dot);\n    }\n  });\n\n  if (currentIndex \u003e= filtered.length) currentIndex = 0;\n  updatePositions(currentIndex, true);\n}\n\nfunction getCardW() {\n  return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--card-w'));\n}\n\nfunction updatePositions(centerIdx, instant = false) {\n  const cards = track.querySelectorAll('.cf-card');\n  const cardW = getCardW();\n\n  cards.forEach((card, i) =\u003e {\n    const offset = i - centerIdx;\n    const absOff = Math.abs(offset);\n    const tx = offset * GAP;\n    const rotY = offset \u003c 0 ? 45 : offset \u003e 0 ? -45 : 0;\n    const scale = absOff === 0 ? 1 : absOff === 1 ? 0.82 : Math.max(0.65, 0.82 - (absOff - 1) * 0.1);\n    const tz = absOff === 0 ? 0 : -80 - absOff * 30;\n    const opacity = absOff \u003e 3 ? 0 : absOff === 0 ? 1 : Math.max(0.35, 1 - absOff * 0.2);\n\n    const t = instant ? 'none' : '';\n    card.style.transition = t ? 'none' : undefined;\n    card.style.transform = `translateX(${tx - cardW \/ 2}px) translateZ(${tz}px) rotateY(${rotY}deg) scale(${scale})`;\n    card.style.opacity = opacity;\n    card.style.zIndex = 100 - absOff;\n    card.classList.toggle('is-center', offset === 0);\n    if (offset \u003c -3 || offset \u003e 3) card.style.visibility = 'hidden';\n    else card.style.visibility = 'visible';\n  });\n\n  \/\/ Update dots\n  const dots = dotsEl.querySelectorAll('.cf-dot');\n  dots.forEach((d, i) =\u003e d.classList.toggle('active', i === centerIdx));\n}\n\nfunction goTo(idx, instant = false) {\n  if (idx \u003c 0) idx = filtered.length - 1;\n  if (idx \u003e= filtered.length) idx = 0;\n  currentIndex = idx;\n  updatePositions(currentIndex, instant);\n}\n\n\/\/ ── Drag \/ Swipe ────────────────────────────────────────────────────────────\nlet pointerDown = false;\nlet pointerStartX = 0;\nlet moved = false;\n\ncontainer.addEventListener('pointerdown', e =\u003e {\n  pointerDown = true;\n  pointerStartX = e.clientX;\n  moved = false;\n  container.setPointerCapture(e.pointerId);\n});\n\ncontainer.addEventListener('pointermove', e =\u003e {\n  if (!pointerDown) return;\n  const dx = e.clientX - pointerStartX;\n  if (Math.abs(dx) \u003e 6) moved = true;\n  if (moved) {\n    \/\/ Live drag preview\n    const cards = track.querySelectorAll('.cf-card');\n    const drag = dx \/ GAP;\n    const fakeIdx = currentIndex - drag;\n    const cardW = getCardW();\n    cards.forEach((card, i) =\u003e {\n      const offset = i - fakeIdx;\n      const absOff = Math.abs(offset);\n      const tx = offset * GAP;\n      const rotY = offset \u003c 0 ? 45 : offset \u003e 0 ? -45 : 0;\n      const scale = Math.max(0.55, 1 - absOff * 0.18);\n      const tz = -Math.min(absOff * 60, 200);\n      card.style.transition = 'none';\n      card.style.transform = `translateX(${tx - cardW \/ 2}px) translateZ(${tz}px) rotateY(${rotY}deg) scale(${scale})`;\n      card.style.opacity = absOff \u003e 3 ? 0 : Math.max(0.3, 1 - absOff * 0.2);\n      card.style.zIndex = 100 - Math.round(absOff);\n    });\n  }\n});\n\ncontainer.addEventListener('pointerup', e =\u003e {\n  if (!pointerDown) return;\n  pointerDown = false;\n  const dx = e.clientX - pointerStartX;\n  if (Math.abs(dx) \u003e 40) {\n    goTo(currentIndex + (dx \u003c 0 ? 1 : -1));\n  } else {\n    goTo(currentIndex);\n  }\n});\n\ncontainer.addEventListener('pointercancel', () =\u003e {\n  pointerDown = false;\n  goTo(currentIndex);\n});\n\n\/\/ Touch swipe (fallback for non-pointer browsers)\ncontainer.addEventListener('touchstart', e =\u003e {\n  startX = e.touches[0].clientX;\n}, { passive: true });\ncontainer.addEventListener('touchend', e =\u003e {\n  const dx = e.changedTouches[0].clientX - startX;\n  if (Math.abs(dx) \u003e 40) goTo(currentIndex + (dx \u003c 0 ? 1 : -1));\n}, { passive: true });\n\n\/\/ Keyboard\ncontainer.setAttribute('tabindex', '0');\ncontainer.addEventListener('keydown', e =\u003e {\n  if (e.key === 'ArrowLeft') goTo(currentIndex - 1);\n  if (e.key === 'ArrowRight') goTo(currentIndex + 1);\n});\n\n\/\/ Arrow buttons\ndocument.getElementById('cfPrev').addEventListener('click', () =\u003e goTo(currentIndex - 1));\ndocument.getElementById('cfNext').addEventListener('click', () =\u003e goTo(currentIndex + 1));\n\n\/\/ Mouse wheel\ncontainer.addEventListener('wheel', e =\u003e {\n  e.preventDefault();\n  if (e.deltaX \u003e 30 || e.deltaY \u003e 30) goTo(currentIndex + 1);\n  else if (e.deltaX \u003c -30 || e.deltaY \u003c -30) goTo(currentIndex - 1);\n}, { passive: false });\n\n\/\/ ── SEARCH + FILTER ─────────────────────────────────────────────────────────\nlet activeFilter = 'all';\n\nfunction applyFilters() {\n  const q = document.getElementById('searchInput').value.toLowerCase().trim();\n  filtered = BREEDS.filter(b =\u003e {\n    const matchType = activeFilter === 'all' || b.type === activeFilter;\n    const matchQ = !q || b.name.toLowerCase().includes(q);\n    return matchType \u0026\u0026 matchQ;\n  });\n  currentIndex = 0;\n  buildCards();\n}\n\ndocument.getElementById('searchInput').addEventListener('input', applyFilters);\n\ndocument.querySelectorAll('.tab').forEach(tab =\u003e {\n  tab.addEventListener('click', () =\u003e {\n    document.querySelectorAll('.tab').forEach(t =\u003e t.classList.remove('active'));\n    tab.classList.add('active');\n    activeFilter = tab.dataset.filter;\n    applyFilters();\n  });\n});\n\n\/\/ ── INIT ────────────────────────────────────────────────────────────────────\nbuildCards();\n\n\/\/ Auto-advance (pauses on interaction)\nlet autoTimer = setInterval(() =\u003e {\n  if (!pointerDown) goTo(currentIndex + 1);\n}, 4000);\n\ncontainer.addEventListener('pointerdown', () =\u003e clearInterval(autoTimer));\n\u003c\/script\u003e\n\n\u003c\/body\u003e","brand":"Fast Bundle","offers":[{"title":"Default Title","offer_id":59977983950929,"sku":"97f01011-aeb9-449f-954c-47ac59b7c650","price":200000.0,"currency_code":"COP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0665\/7677\/7297\/files\/ChatGPTImage3ago2026_02_18_32p.m._894bf6c5-ad22-4ad4-ae66-42639dead598.png?v=1785960611","url":"https:\/\/capripets.com\/en\/products\/llaveros-mundo","provider":"Capri","version":"1.0","type":"link"}