El Caf\u00e9 de Juanjo \u2014 Medell\u00edn<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIABLES & RESET\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n:root {\n --espresso: #0F0805;\n --roast: #1A0E08;\n --mahogany: #261209;\n --walnut: #341A0C;\n --bark: #4A2510;\n --gold: #C8922A;\n --gold-light: #E8B44A;\n --gold-pale: #F5D48A;\n --cream: #FAF0DC;\n --ivory: #FDF8F0;\n --white: #FFFFFF;\n --muted: rgba(250,240,220,0.65);\n --dim: rgba(250,240,220,0.40);\n --wa: #25D366;\n --border: rgba(200,146,42,0.18);\n --border-soft:rgba(200,146,42,0.10);\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; }\n\nbody {\n font-family: 'Outfit', sans-serif;\n background: var(--espresso);\n color: var(--cream);\n overflow-x: hidden;\n font-size: 16px;\n line-height: 1.6;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCROLLBAR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n::-webkit-scrollbar { width: 4px; }\n::-webkit-scrollbar-track { background: var(--espresso); }\n::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVEGACI\u00d3N\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.nav {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 500;\n padding: 0 40px;\n height: 68px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(15,8,5,0.90);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border);\n}\n.nav-logo {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--white);\n letter-spacing: 1px;\n}\n.nav-logo span { color: var(--gold-light); font-style: italic; }\n.nav-links { display: flex; gap: 32px; align-items: center; }\n.nav-links a {\n color: var(--muted);\n text-decoration: none;\n font-size: 0.82rem;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n font-weight: 500;\n transition: color 0.3s;\n}\n.nav-links a:hover { color: var(--gold-light); }\n.nav-wa {\n display: flex; align-items: center; gap: 7px;\n background: var(--wa);\n color: #fff !important;\n padding: 8px 18px;\n border-radius: 40px;\n font-size: 0.82rem !important;\n font-weight: 600 !important;\n letter-spacing: 0.5px !important;\n text-transform: none !important;\n transition: box-shadow 0.3s, transform 0.2s !important;\n}\n.nav-wa:hover { box-shadow: 0 0 20px rgba(37,211,102,0.4); transform: translateY(-1px) !important; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: var(--espresso);\n padding-top: 68px;\n}\n.hero-bg {\n position: absolute; inset: 0;\n background-image: url('https:\/\/images.unsplash.com\/photo-1509042239860-f550ce710b93?q=80&w=1920');\n background-size: cover;\n background-position: center;\n opacity: 0.18;\n transform: scale(1.05);\n animation: heroZoom 18s ease-in-out infinite alternate;\n}\n@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.12); } }\n.hero-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(135deg,\n rgba(15,8,5,0.95) 0%,\n rgba(26,14,8,0.80) 50%,\n rgba(15,8,5,0.92) 100%);\n}\n.hero-grain {\n position: absolute; inset: 0;\n opacity: 0.04;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n background-size: 200px;\n}\n.hero-glow {\n position: absolute;\n width: 600px; height: 600px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(200,146,42,0.12) 0%, transparent 70%);\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.hero-content {\n position: relative;\n z-index: 10;\n padding: 80px 60px;\n max-width: 760px;\n}\n.hero-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 0.75rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 32px;\n opacity: 0;\n animation: riseIn 0.9s 0.1s ease forwards;\n}\n.hero-eyebrow::before {\n content: '';\n width: 32px; height: 1px;\n background: var(--gold);\n flex-shrink: 0;\n}\n.hero-h1 {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(4rem, 9vw, 7.5rem);\n font-weight: 700;\n line-height: 0.92;\n color: var(--white);\n letter-spacing: -1px;\n margin-bottom: 12px;\n opacity: 0;\n animation: riseIn 0.9s 0.25s ease forwards;\n}\n.hero-h1 em {\n color: var(--gold-light);\n font-style: italic;\n font-weight: 400;\n}\n.hero-sub {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(1.3rem, 3vw, 1.8rem);\n color: var(--muted);\n font-style: italic;\n line-height: 1.5;\n margin-bottom: 48px;\n max-width: 500px;\n opacity: 0;\n animation: riseIn 0.9s 0.4s ease forwards;\n}\n.hero-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 14px;\n opacity: 0;\n animation: riseIn 0.9s 0.55s ease forwards;\n}\n@keyframes riseIn {\n from { opacity: 0; transform: translateY(28px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* Part\u00edculas de vapor *\/\n.steam-particle {\n position: absolute;\n width: 3px; height: 3px;\n border-radius: 50%;\n background: var(--gold);\n animation: steamFloat var(--dur, 9s) var(--del, 0s) infinite ease-in-out;\n opacity: 0;\n pointer-events: none;\n}\n@keyframes steamFloat {\n 0% { opacity: 0; transform: translateY(0) scale(0.5); }\n 20% { opacity: 0.4; }\n 80% { opacity: 0.1; }\n 100% { opacity: 0; transform: translateY(-200px) scale(1.5); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOTONES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.btn {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n padding: 15px 32px;\n border-radius: 50px;\n font-family: 'Outfit', sans-serif;\n font-size: 0.95rem;\n font-weight: 600;\n text-decoration: none;\n letter-spacing: 0.5px;\n transition: all 0.3s;\n cursor: pointer;\n border: none;\n}\n.btn-gold {\n background: var(--gold);\n color: var(--espresso);\n box-shadow: 0 6px 24px rgba(200,146,42,0.35);\n}\n.btn-gold:hover { background: var(--gold-light); box-shadow: 0 8px 32px rgba(200,146,42,0.5); transform: translateY(-2px); }\n.btn-wa {\n background: var(--wa);\n color: #fff;\n box-shadow: 0 6px 24px rgba(37,211,102,0.28);\n}\n.btn-wa:hover { box-shadow: 0 8px 32px rgba(37,211,102,0.45); transform: translateY(-2px); }\n.btn-outline {\n background: transparent;\n color: var(--cream);\n border: 1.5px solid rgba(250,240,220,0.25);\n}\n.btn-outline:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DIVISOR DECORATIVO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ornament {\n text-align: center;\n padding: 40px 0;\n color: var(--gold);\n font-size: 1.2rem;\n letter-spacing: 12px;\n opacity: 0.4;\n}\n.gold-line {\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent);\n opacity: 0.25;\n margin: 0;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCIONES BASE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.section {\n padding: 100px 60px;\n position: relative;\n}\n.section-alt { background: var(--roast); }\n.section-dark { background: var(--espresso); }\n.section-mid { background: var(--mahogany); }\n\n.eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 0.75rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 18px;\n font-weight: 500;\n}\n.eyebrow::before {\n content: '';\n width: 24px; height: 1px;\n background: var(--gold);\n}\n.display-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 700;\n color: var(--white);\n line-height: 1.05;\n margin-bottom: 24px;\n}\n.display-title em { color: var(--gold-light); font-style: italic; font-weight: 400; }\n.body-text {\n font-size: 1.1rem;\n color: var(--cream);\n line-height: 1.85;\n max-width: 620px;\n font-weight: 300;\n}\n.body-text strong { color: var(--gold-light); font-weight: 600; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HISTORIA \u2014 LAYOUT 2 COLUMNAS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.historia-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n.historia-img-wrap {\n position: relative;\n}\n.historia-img-main {\n width: 100%;\n aspect-ratio: 3\/4;\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid var(--border);\n}\n.historia-img-main img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: sepia(20%) brightness(0.9);\n transition: transform 0.6s ease;\n}\n.historia-img-main:hover img { transform: scale(1.04); }\n.historia-img-float {\n position: absolute;\n bottom: -32px; right: -32px;\n width: 52%;\n aspect-ratio: 1;\n border-radius: 4px;\n overflow: hidden;\n border: 3px solid var(--espresso);\n box-shadow: 0 20px 60px rgba(0,0,0,0.6);\n}\n.historia-img-float img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: sepia(15%) brightness(0.85);\n}\n.historia-text { padding-right: 20px; }\n.historia-quote {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.6rem;\n font-style: italic;\n color: var(--gold-pale);\n line-height: 1.4;\n margin-bottom: 28px;\n padding-left: 20px;\n border-left: 2px solid var(--gold);\n}\n.firma {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid var(--border);\n}\n.firma-dot {\n width: 40px; height: 40px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--gold), var(--bark));\n display: flex; align-items: center; justify-content: center;\n font-size: 1.1rem;\n flex-shrink: 0;\n}\n.firma-name { font-size: 0.85rem; color: var(--gold); font-weight: 600; letter-spacing: 1px; }\n.firma-sub { font-size: 0.78rem; color: var(--dim); margin-top: 2px; }\n\n\/* Tags de perfil de sabor *\/\n.flavor-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 32px;\n}\n.ftag {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 18px;\n border-radius: 40px;\n background: rgba(200,146,42,0.10);\n border: 1px solid var(--border);\n color: var(--cream);\n font-size: 0.88rem;\n font-weight: 400;\n transition: background 0.3s;\n}\n.ftag:hover { background: rgba(200,146,42,0.20); }\n.ftag-icon { font-size: 0.95rem; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n STATS BAR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stats-strip {\n background: var(--walnut);\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n padding: 48px 60px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 0;\n}\n.stat-item {\n text-align: center;\n padding: 0 20px;\n border-right: 1px solid var(--border);\n}\n.stat-item:last-child { border-right: none; }\n.stat-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 3.2rem;\n font-weight: 700;\n color: var(--gold-light);\n line-height: 1;\n display: block;\n}\n.stat-label {\n font-size: 0.78rem;\n color: var(--muted);\n letter-spacing: 1.5px;\n text-transform: uppercase;\n margin-top: 6px;\n display: block;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PRODUCTOS \u2014 GRID ESPACIOSO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.prod-section-head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: 60px;\n flex-wrap: wrap;\n gap: 24px;\n}\n.prod-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n margin-bottom: 48px;\n}\n.prod-card {\n background: var(--walnut);\n border: 1px solid var(--border-soft);\n border-radius: 8px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;\n position: relative;\n}\n.prod-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 24px 60px rgba(0,0,0,0.5);\n border-color: var(--border);\n}\n.prod-img-wrap {\n position: relative;\n height: 200px;\n overflow: hidden;\n}\n.prod-img-wrap img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: brightness(0.75) sepia(15%);\n transition: transform 0.5s ease, filter 0.4s;\n}\n.prod-card:hover .prod-img-wrap img {\n transform: scale(1.06);\n filter: brightness(0.85) sepia(5%);\n}\n.prod-img-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(15,8,5,0.85) 0%, transparent 50%);\n}\n.prod-cat-badge {\n position: absolute;\n top: 14px; left: 14px;\n background: rgba(15,8,5,0.75);\n border: 1px solid var(--border);\n color: var(--gold);\n font-size: 0.68rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 5px 12px;\n border-radius: 20px;\n backdrop-filter: blur(8px);\n font-weight: 500;\n}\n.prod-body {\n padding: 24px 24px 28px;\n}\n.prod-name {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--white);\n line-height: 1.2;\n margin-bottom: 8px;\n}\n.prod-desc {\n font-size: 0.92rem;\n color: var(--cream);\n line-height: 1.65;\n margin-bottom: 18px;\n font-weight: 300;\n}\n.prod-sizes {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 20px;\n}\n.psize {\n font-size: 0.78rem;\n background: rgba(200,146,42,0.14);\n color: var(--gold-light);\n border: 1px solid rgba(200,146,42,0.28);\n padding: 4px 12px;\n border-radius: 20px;\n letter-spacing: 0.5px;\n font-weight: 500;\n}\n.prod-cta {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 0.82rem;\n color: var(--gold);\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n transition: gap 0.2s;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-family: 'Outfit', sans-serif;\n}\n.prod-cta:hover { gap: 10px; color: var(--gold-light); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GALER\u00cdA\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.gallery-section {\n padding: 100px 60px;\n background: var(--espresso);\n}\n.gallery-head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: 48px;\n flex-wrap: wrap;\n gap: 20px;\n}\n.gallery-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n grid-template-rows: 260px 260px;\n gap: 12px;\n}\n.g-item {\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n background: var(--walnut);\n border: 1px solid var(--border-soft);\n cursor: pointer;\n}\n.g-item:first-child { grid-row: 1 \/ 3; }\n.g-item img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: brightness(0.7) sepia(10%);\n transition: transform 0.5s ease, filter 0.4s;\n}\n.g-item:hover img { transform: scale(1.05); filter: brightness(0.85) sepia(5%); }\n.g-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(15,8,5,0.7) 0%, transparent 55%);\n opacity: 0;\n transition: opacity 0.3s;\n display: flex;\n align-items: flex-end;\n padding: 20px;\n}\n.g-item:hover .g-overlay { opacity: 1; }\n.g-overlay-text {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1rem;\n font-style: italic;\n color: var(--cream);\n}\n\n\/* Zona de carga para galer\u00eda *\/\n.gallery-upload-area {\n margin-top: 16px;\n border: 2px dashed rgba(200,146,42,0.25);\n border-radius: 8px;\n padding: 40px;\n text-align: center;\n background: rgba(200,146,42,0.03);\n cursor: pointer;\n transition: all 0.3s;\n position: relative;\n}\n.gallery-upload-area:hover, .gallery-upload-area.dragover {\n border-color: rgba(200,146,42,0.5);\n background: rgba(200,146,42,0.07);\n}\n.gallery-upload-area input[type=\"file\"] {\n position: absolute; inset: 0;\n opacity: 0; cursor: pointer;\n width: 100%; height: 100%;\n}\n.upload-icon-wrap { font-size: 2rem; color: var(--gold); margin-bottom: 12px; }\n.upload-text { font-size: 0.95rem; color: var(--muted); }\n.upload-text strong { color: var(--cream); font-weight: 500; }\n.upload-hint { font-size: 0.78rem; color: var(--dim); margin-top: 6px; }\n\n\/* Grid de fotos subidas *\/\n.uploaded-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 12px;\n margin-top: 24px;\n}\n.up-item {\n aspect-ratio: 4\/3;\n border-radius: 6px;\n overflow: hidden;\n border: 1px solid var(--border-soft);\n position: relative;\n background: var(--walnut);\n cursor: pointer;\n}\n.up-item img, .up-item video {\n width: 100%; height: 100%;\n object-fit: cover;\n}\n.up-del {\n position: absolute;\n top: 8px; right: 8px;\n width: 28px; height: 28px;\n border-radius: 50%;\n background: rgba(15,8,5,0.8);\n border: 1px solid rgba(200,146,42,0.3);\n color: var(--gold);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.75rem;\n opacity: 0;\n transition: opacity 0.2s;\n z-index: 2;\n}\n.up-item:hover .up-del { opacity: 1; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GOURMET FEATURE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.gourmet-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n.gourmet-img {\n width: 100%;\n aspect-ratio: 4\/3;\n border-radius: 6px;\n overflow: hidden;\n border: 1px solid var(--border);\n order: 1;\n}\n.gourmet-img img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: sepia(10%) brightness(0.85);\n transition: transform 0.6s;\n}\n.gourmet-img:hover img { transform: scale(1.04); }\n.gourmet-content { order: 2; }\n.gourmet-list {\n list-style: none;\n margin: 28px 0;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n.gourmet-list li {\n display: flex;\n align-items: flex-start;\n gap: 14px;\n font-size: 1rem;\n color: var(--cream);\n line-height: 1.6;\n font-weight: 300;\n}\n.gourmet-list li::before {\n content: '';\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--gold);\n margin-top: 8px;\n flex-shrink: 0;\n}\n.product-tags-row {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 32px;\n}\n.ptag {\n font-size: 0.82rem;\n background: rgba(200,146,42,0.12);\n color: var(--gold-light);\n border: 1px solid rgba(200,146,42,0.25);\n padding: 6px 16px;\n border-radius: 30px;\n font-weight: 500;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EXPERIENCIAS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.exp-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2px;\n margin-top: 60px;\n}\n.exp-card {\n padding: 48px 36px;\n background: var(--walnut);\n border: 1px solid var(--border-soft);\n position: relative;\n overflow: hidden;\n transition: background 0.4s;\n}\n.exp-card:hover { background: var(--bark); }\n.exp-card::after {\n content: '';\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s;\n}\n.exp-card:hover::after { transform: scaleX(1); }\n.exp-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 3.5rem;\n font-weight: 700;\n color: rgba(200,146,42,0.18);\n line-height: 1;\n margin-bottom: 24px;\n}\n.exp-icon { font-size: 2rem; margin-bottom: 20px; display: block; }\n.exp-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--white);\n margin-bottom: 14px;\n}\n.exp-desc {\n font-size: 0.95rem;\n color: var(--cream);\n line-height: 1.75;\n font-weight: 300;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FUNDACI\u00d3N\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.fund-section {\n padding: 100px 60px;\n background: var(--mahogany);\n position: relative;\n overflow: hidden;\n}\n.fund-glow {\n position: absolute;\n width: 700px; height: 700px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(200,146,42,0.08) 0%, transparent 70%);\n top: 50%; right: -200px;\n transform: translateY(-50%);\n pointer-events: none;\n}\n.fund-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n position: relative;\n z-index: 1;\n}\n.fund-badge-lg {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: rgba(200,146,42,0.12);\n border: 1px solid rgba(200,146,42,0.28);\n color: var(--gold-light);\n padding: 10px 22px;\n border-radius: 40px;\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: 1px;\n margin-bottom: 28px;\n}\n.fund-visual {\n background: var(--walnut);\n border: 1px solid var(--border);\n border-radius: 8px;\n padding: 48px;\n text-align: center;\n}\n.fund-heart { font-size: 4rem; display: block; margin-bottom: 20px; }\n.fund-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 2rem;\n font-weight: 700;\n color: var(--white);\n margin-bottom: 16px;\n line-height: 1.2;\n}\n.fund-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 3.5rem;\n font-weight: 700;\n color: var(--gold-light);\n line-height: 1;\n}\n.fund-num-label { font-size: 0.8rem; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CIERRE \/ FRASE FINAL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.cierre {\n padding: 120px 60px;\n background: var(--espresso);\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n.cierre-glow {\n position: absolute;\n width: 800px; height: 400px;\n border-radius: 50%;\n background: radial-gradient(ellipse, rgba(200,146,42,0.09) 0%, transparent 70%);\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.cierre-quote {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(2rem, 5vw, 3.5rem);\n font-weight: 400;\n font-style: italic;\n color: var(--white);\n line-height: 1.25;\n max-width: 700px;\n margin: 0 auto 48px;\n position: relative;\n z-index: 1;\n}\n.cierre-quote em { color: var(--gold-light); font-style: normal; font-weight: 700; }\n.cierre-chips {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n margin-bottom: 48px;\n position: relative;\n z-index: 1;\n}\n.chip {\n display: flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.12);\n color: var(--cream);\n padding: 10px 20px;\n border-radius: 40px;\n font-size: 0.9rem;\n text-decoration: none;\n transition: background 0.3s, border-color 0.3s;\n font-weight: 400;\n}\n.chip:hover { background: rgba(200,146,42,0.12); border-color: var(--border); color: var(--gold-light); }\n.cierre-cta { position: relative; z-index: 1; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.footer {\n background: #000;\n padding: 60px;\n border-top: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 24px;\n}\n.footer-logo {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.3rem;\n font-weight: 700;\n color: var(--cream);\n}\n.footer-logo span { color: var(--gold-light); font-style: italic; }\n.footer-text { font-size: 0.8rem; color: var(--dim); letter-spacing: 0.5px; margin-top: 4px; }\n.footer-links { display: flex; gap: 20px; }\n.footer-links a { color: var(--muted); font-size: 1.1rem; text-decoration: none; transition: color 0.3s; }\n.footer-links a:hover { color: var(--gold-light); }\n.footer-copy { font-size: 0.78rem; color: var(--dim); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WA FLOTANTE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.wa-float {\n position: fixed;\n bottom: 28px; right: 28px;\n width: 58px; height: 58px;\n background: var(--wa);\n color: #fff;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.55rem;\n text-decoration: none;\n box-shadow: 0 6px 24px rgba(37,211,102,0.45);\n z-index: 9999;\n animation: wapulse 2.5s infinite;\n transition: transform 0.2s;\n}\n.wa-float:hover { transform: scale(1.1); }\n@keyframes wapulse {\n 0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45); }\n 50% { box-shadow: 0 6px 36px rgba(37,211,102,0.7); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n REVEAL ANIMATION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s, transform 0.7s; }\n.reveal.on { opacity: 1; transform: translateY(0); }\n.reveal.d1 { transition-delay: 0.08s; }\n.reveal.d2 { transition-delay: 0.17s; }\n.reveal.d3 { transition-delay: 0.26s; }\n.reveal.d4 { transition-delay: 0.35s; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 1024px) {\n .historia-layout, .gourmet-layout, .fund-layout { grid-template-columns: 1fr; gap: 48px; }\n .historia-img-float { bottom: -20px; right: -20px; }\n .gourmet-img { order: 0; }\n .gourmet-content { order: 1; }\n .prod-grid { grid-template-columns: repeat(2, 1fr); }\n .exp-grid { grid-template-columns: 1fr 1fr; }\n .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }\n .g-item:first-child { grid-row: auto; }\n}\n@media (max-width: 768px) {\n .nav { padding: 0 20px; }\n .nav-links { display: none; }\n .section, .gallery-section, .fund-section, .cierre { padding: 70px 24px; }\n .hero-content { padding: 60px 24px; }\n .stats-strip { grid-template-columns: 1fr 1fr; padding: 40px 24px; gap: 24px; }\n .stat-item { border-right: none; padding: 16px 0; }\n .prod-grid { grid-template-columns: 1fr; }\n .exp-grid { grid-template-columns: 1fr; }\n .gallery-grid { grid-template-columns: 1fr 1fr; }\n .footer { padding: 40px 24px; flex-direction: column; text-align: center; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<nav class=\"nav\">\n <div class=\"nav-logo\">El Caf\u00e9 de <span>Juanjo<\/span><\/div>\n <div class=\"nav-links\">\n <a href=\"#historia\">Historia<\/a>\n <a href=\"#catalogo\">Cat\u00e1logo<\/a>\n <a href=\"#galeria\">Galer\u00eda<\/a>\n <a href=\"#fundacion\">Prop\u00f3sito<\/a>\n <a class=\"nav-wa\" href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> WhatsApp\n <\/a>\n <\/div>\n<\/nav>\n\n\n<section class=\"hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-grain\"><\/div>\n <div class=\"hero-glow\"><\/div>\n <div id=\"steam-container\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-eyebrow\">Medell\u00edn \u00b7 Caf\u00e9 de origen \u00b7 Causa social<\/div>\n <h1 class=\"hero-h1\">El Caf\u00e9<br>de <em>Juanjo<\/em><\/h1>\n <p class=\"hero-sub\">“A veces un caf\u00e9 es la invitaci\u00f3n para entrar en tu vida”<\/p>\n <div class=\"hero-actions\">\n <a class=\"btn btn-gold\" href=\"#catalogo\">\n <i class=\"fa-solid fa-mug-hot\"><\/i> Ver cat\u00e1logo\n <\/a>\n <a class=\"btn btn-wa\" href=\"https:\/\/wa.me\/573113246234?text=Hola!%20Me%20interesa%20El%20Caf\u00e9%20de%20Juanjo%20\u2615\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> WhatsApp\n <\/a>\n <a class=\"btn btn-outline\" href=\"#historia\">Nuestra historia \u2193<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"stats-strip\">\n <div class=\"stat-item\">\n <span class=\"stat-num\">100%<\/span>\n <span class=\"stat-label\">Ar\u00e1biga de origen<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">1.800<\/span>\n <span class=\"stat-label\">Metros sobre el nivel del mar<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">9+<\/span>\n <span class=\"stat-label\">Productos en cat\u00e1logo<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">\u221e<\/span>\n <span class=\"stat-label\">Compras con prop\u00f3sito<\/span>\n <\/div>\n<\/div>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"historia\" class=\"section section-alt reveal\">\n <div class=\"historia-layout\">\n <div class=\"historia-img-wrap\">\n <div class=\"historia-img-main\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1495474472287-4d71bcdd2085?q=80&w=800\" alt=\"Caf\u00e9 de Juanjo\">\n <\/div>\n <div class=\"historia-img-float\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1501854140801-50d01698950b?q=80&w=600\" alt=\"Familia Juanjo\">\n <\/div>\n <\/div>\n <div class=\"historia-text\">\n <div class=\"eyebrow\">Qui\u00e9nes somos<\/div>\n <h2 class=\"display-title\">M\u00e1s que un caf\u00e9,<br>una <em>causa de vida<\/em><\/h2>\n <div class=\"historia-quote\">“Cada taza que disfrutas financia sus terapias y el sue\u00f1o de llegar a m\u00e1s familias.”<\/div>\n <p class=\"body-text\" style=\"color:#FAF0DC;\">\n Somos <strong>Juan Rodrigo Higuera y Catalina Trespalacios<\/strong>, padres de Juan Jos\u00e9, nacido en 2013 con <strong>hiperinsulinismo cong\u00e9nito difuso<\/strong>, una enfermedad rara que le gener\u00f3 una lesi\u00f3n cerebral. Hoy nuestro sue\u00f1o es crecer para apoyar a m\u00e1s familias, contribuir a fundaciones y brindarles condiciones de vida de excelente calidad.\n <\/p>\n <div class=\"flavor-tags\">\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udf3f<\/span> 100% Ar\u00e1biga<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udfd4<\/span> 1.600\u20131.800 m.s.n.m<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udf6b<\/span> Notas a chocolate<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udf4b<\/span> Acidez media c\u00edtrica<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\u2696\ufe0f<\/span> Cuerpo balanceado<\/span>\n <\/div>\n <div class=\"firma\">\n <div class=\"firma-dot\">\u2615<\/div>\n <div>\n <div class=\"firma-name\">Juan Rodrigo & Catalina<\/div>\n <div class=\"firma-sub\">Padres de Juanjo \u00b7 Fundadores<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"catalogo\" class=\"section section-dark reveal\">\n <div class=\"prod-section-head\">\n <div>\n <div class=\"eyebrow\">Cat\u00e1logo<\/div>\n <h2 class=\"display-title\">Nuestros <em>productos<\/em><\/h2>\n <\/div>\n <a class=\"btn btn-outline\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20ver%20el%20cat\u00e1logo%20completo\" target=\"_blank\">\n Cat\u00e1logo completo \u2192\n <\/a>\n <\/div>\n <div class=\"prod-grid\">\n\n \n <div class=\"prod-card reveal d1\" onclick=\"wa('Caf\u00e9 en Grano')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1447933601403-0c6688de566e?q=80&w=800\" alt=\"Caf\u00e9 en Grano\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Caf\u00e9 base<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 en Grano<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">\n Tostado premium con notas dulces y achocolatadas. Perfecto para moler al momento.\n<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">250 g<\/span><span class=\"psize\">500 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d2\" onclick=\"wa('Caf\u00e9 Molido')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514432324607-a09d9b4aefdd?q=80&w=800\" alt=\"Caf\u00e9 Molido\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Caf\u00e9 base<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 Molido<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Listo para preparar. Molienda ideal para filtro, prensa francesa o cafetera italiana.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">250 g<\/span><span class=\"psize\">500 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d3\" onclick=\"wa('Caf\u00e9 Liofilizado')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509042239860-f550ce710b93?q=80&w=800\" alt=\"Caf\u00e9 Liofilizado\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Instant\u00e1neo<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 Liofilizado<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Instant\u00e1neo de calidad premium. Sin perder el aroma ni el sabor del origen.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">105 g vidrio<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d1\" onclick=\"wa('Caf\u00e9 Infusi\u00f3n')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1527515545081-5db817172677?q=80&w=800\" alt=\"Caf\u00e9 Infusi\u00f3n\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Sachets<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 Infusi\u00f3n<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">En sachets convenientes. Versiones: Fuerte, Suave y Panela. Para el d\u00eda a d\u00eda.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">30 sachets<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d2\" onclick=\"wa('Mocachino Gourmet')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1572442388796-11668a67e53d?q=80&w=800\" alt=\"Mocachino\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Gourmet<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Mocachino Gourmet<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Caf\u00e9 premium con chocolate artesanal. Un placer indulgente con solo agua caliente.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">210 g<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d3\" onclick=\"wa('Caf\u00e9s Funcionales')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742502-ec7c0e9f34b1?q=80&w=800\" alt=\"Caf\u00e9s Funcionales\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Funcional<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9s Funcionales<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Con Reishi, C\u00farcuma o Sin cafe\u00edna. Lattes funcionales para bienestar y salud.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">Lattes<\/span><span class=\"psize\">Reishi<\/span><span class=\"psize\">C\u00farcuma<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d1\" onclick=\"wa('Capuchino Gourmet')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534040385115-33dcb3acba5b?q=80&w=800\" alt=\"Capuchino\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Gourmet<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Capuchino Gourmet<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Cremoso y suave al instante. Sabor de cafeter\u00eda en la comodidad de tu hogar.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">210 g<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d2\" onclick=\"wa('Chocolate Gourmet')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1604329760661-e71dc83f8f26?q=80&w=800\" alt=\"Chocolate Gourmet\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Gourmet<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Chocolate Gourmet<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Chocolate soluble premium en frasco de vidrio o bolsa resellable. Ideal como regalo.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">210 g<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d3\" onclick=\"wa('Accesorios cafeteros')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498804103079-a6351b050096?q=80&w=800\" alt=\"Accesorios\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Accesorios<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Accesorios Cafeteros<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Prensa francesa, termos, cucharas medidoras y m\u00e1s. Personalizados con tu marca.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">Personalizados<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <div style=\"text-align:center;\">\n <a class=\"btn btn-wa\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20asesor\u00eda%20del%20cat\u00e1logo%20del%20Caf\u00e9%20de%20Juanjo\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> Asesor\u00eda personalizada\n <\/a>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"galeria\" class=\"gallery-section reveal\">\n <div class=\"gallery-head\">\n <div>\n <div class=\"eyebrow\">Galer\u00eda<\/div>\n <h2 class=\"display-title\">Nuestro <em>mundo<\/em><\/h2>\n <\/div>\n <p style=\"color:var(--muted);font-size:0.95rem;max-width:320px;text-align:right;font-weight:300;\">\n Momentos, productos y la esencia del Caf\u00e9 de Juanjo en cada imagen.\n <\/p>\n <\/div>\n\n \n <div class=\"gallery-grid\" id=\"main-gallery\">\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.55-PM-5.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">El ritual del buen caf\u00e9<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.56-PM-1.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Cada taza, una historia<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.56-PM-5.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Origen de altura<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.59-PM-7.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Arte en cada preparaci\u00f3n<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.57-PM-3.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Hecho con amor<\/div><\/div>\n <\/div>\n <\/div>\n\n \n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section class=\"section section-mid reveal\">\n <div class=\"gourmet-layout\">\n <div class=\"gourmet-img\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.57-PM-1.jpeg\" alt=\"Gourmet\">\n <\/div>\n <div class=\"gourmet-content\">\n <div class=\"eyebrow\">Colecci\u00f3n especial<\/div>\n <h2 class=\"display-title\">Gourmet de<br><em>autor<\/em><\/h2>\n <p class=\"body-text\" style=\"color:#FAF0DC;\">\n Mocachino, capuchino y chocolate gourmet elaborados con ingredientes seleccionados. Solo necesitas agua caliente para vivir la experiencia de una cafeter\u00eda de alto nivel.\n <\/p>\n <ul class=\"gourmet-list\">\n <li style=\"color:#FAF0DC;\">Presentaci\u00f3n en frasco de vidrio o bolsa resellable premium<\/li>\n <li style=\"color:#FAF0DC;\">Sin aditivos artificiales \u00b7 Sabor aut\u00e9ntico garantizado<\/li>\n <li style=\"color:#FAF0DC;\">Ideal como regalo corporativo o detalle personal<\/li>\n <\/ul>\n <div class=\"product-tags-row\">\n <span class=\"ptag\">Vidrio 210 g<\/span>\n <span class=\"ptag\">Vidrio 250 g<\/span>\n <span class=\"ptag\">Bolsa 250 g<\/span>\n <\/div>\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20informaci\u00f3n%20sobre%20los%20productos%20gourmet\" target=\"_blank\">\n <i class=\"fa-solid fa-box-open\"><\/i> Ver colecci\u00f3n gourmet\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section class=\"section section-dark reveal\">\n <div class=\"eyebrow\">M\u00e1s all\u00e1 de la taza<\/div>\n <h2 class=\"display-title\">Experiencias <em>cafeteras<\/em><\/h2>\n <p class=\"body-text\" style=\"margin-bottom:0;color:#FAF0DC;\">\n Llevamos el universo del caf\u00e9 a donde t\u00fa est\u00e9s. Desde nuestro espacio o en el tuyo.\n <\/p>\n <div class=\"exp-grid\">\n <div class=\"exp-card reveal d1\">\n <div class=\"exp-num\">01<\/div>\n <span class=\"exp-icon\">\ud83c\udfe0<\/span>\n <div class=\"exp-title\">En nuestro punto de venta<\/div>\n <p class=\"exp-desc\" style=\"color:#FAF0DC;\">\n Historia del caf\u00e9, m\u00e9todos de preparaci\u00f3n artesanal y degustaci\u00f3n guiada en nuestro espacio. Una experiencia sensorial completa.\n <\/p>\n <\/div>\n <div class=\"exp-card reveal d2\">\n <div class=\"exp-num\">02<\/div>\n <span class=\"exp-icon\">\ud83c\udfe2<\/span>\n <div class=\"exp-title\">En tu empresa o residencia<\/div>\n <p class=\"exp-desc\" style=\"color:#FAF0DC;\">\n Llevamos la experiencia a tu espacio. Modalidad grupal con barismo en vivo o con kit individual por asistente.\n <\/p>\n <\/div>\n <div class=\"exp-card reveal d3\">\n <div class=\"exp-num\">03<\/div>\n <span class=\"exp-icon\">\ud83c\udf89<\/span>\n <div class=\"exp-title\">Eventos y celebraciones<\/div>\n <p class=\"exp-desc\" style=\"color:#FAF0DC;\">\n Charla del caf\u00e9, bebidas fr\u00edas o calientes, maridajes gastron\u00f3micos y momentos \u00fanicos para tu evento especial.\n <\/p>\n <\/div>\n <\/div>\n <div style=\"text-align:center;margin-top:48px;\">\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20cotizar%20una%20experiencia%20cafetera\" target=\"_blank\">\n <i class=\"fa-solid fa-calendar-check\"><\/i> Cotizar experiencia\n <\/a>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"fundacion\" class=\"fund-section reveal\">\n <div class=\"fund-glow\"><\/div>\n <div class=\"fund-layout\">\n <div>\n <div class=\"eyebrow\">Nuestro prop\u00f3sito<\/div>\n <h2 class=\"display-title\">Impacto real<br>con cada <em>compra<\/em><\/h2>\n <div class=\"fund-badge-lg\">\n <span>\ud83d\udc9b<\/span> Unidos para Sonre\u00edr\n <\/div>\n <p class=\"body-text\" style=\"color:#FAF0DC;margin-bottom:24px;\">\n Con la compra del Caf\u00e9 de Juanjo, apoyamos la <strong>Fundaci\u00f3n Unidos para Sonre\u00edr<\/strong> y su F\u00f3rmula M\u00e1gica de la Felicidad, impactando vidas a trav\u00e9s de la rehabilitaci\u00f3n y el apoyo integral a personas con discapacidad.\n <\/p>\n <p class=\"body-text\" style=\"color:#FAF0DC;\">\n <strong>Un porcentaje de cada venta<\/strong> es donado directamente a la fundaci\u00f3n. Al elegir nuestro caf\u00e9, eres parte de algo mucho m\u00e1s grande que una taza.\n <\/p>\n <div style=\"margin-top:36px;\">\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\">\n <i class=\"fa-solid fa-heart\"><\/i> Compra con prop\u00f3sito\n <\/a>\n <\/div>\n <\/div>\n <div class=\"fund-visual\">\n <span class=\"fund-heart\">\ud83d\udc9b<\/span>\n <div class=\"fund-title\">Unidos para Sonre\u00edr<\/div>\n <div style=\"margin-top:28px;padding-top:28px;border-top:1px solid var(--border);\">\n <div class=\"fund-num\">100%<\/div>\n <div class=\"fund-num-label\">Transparencia en cada donaci\u00f3n<\/div>\n <\/div>\n <div style=\"margin-top:24px;padding-top:24px;border-top:1px solid var(--border);\">\n <div class=\"fund-num\" style=\"font-size:2.5rem;\">\u267e<\/div>\n <div class=\"fund-num-label\">Familias impactadas<\/div>\n <\/div>\n <p style=\"font-size:0.88rem;color:var(--muted);margin-top:28px;line-height:1.6;font-weight:300;\">\n Rehabilitaci\u00f3n integral \u00b7 Equipos especializados \u00b7 Apoyo a familias con necesidades especiales\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section class=\"cierre reveal\">\n <div class=\"cierre-glow\"><\/div>\n <div class=\"cierre-quote\">\n “Si no sabes por d\u00f3nde empezar\u2026<br><em>\u00a1empieza por un caf\u00e9!<\/em>”\n <\/div>\n <div class=\"cierre-chips\">\n <a class=\"chip\" href=\"https:\/\/instagram.com\/elcafedejuanjo\" target=\"_blank\">\n <i class=\"fa-brands fa-instagram\"><\/i> @elcafedejuanjo\n <\/a>\n <a class=\"chip\" href=\"mailto:elcafedejuanjo2024@gmail.com\">\n <i class=\"fa-regular fa-envelope\"><\/i> elcafedejuanjo2024@gmail.com\n <\/a>\n <a class=\"chip\" href=\"tel:+573113246234\">\n <i class=\"fa-solid fa-phone\"><\/i> 311 324 6234\n <\/a>\n <\/div>\n <div class=\"cierre-cta\">\n <a class=\"btn btn-wa\" style=\"font-size:1.05rem;padding:18px 40px;\" href=\"https:\/\/wa.me\/573113246234?text=Hola!%20Quiero%20asesor\u00eda%20sobre%20el%20Caf\u00e9%20de%20Juanjo%20\u2615\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> Hablar con nosotros\n <\/a>\n <\/div>\n<\/section>\n\n\n<footer class=\"footer\">\n <div>\n <div class=\"footer-logo\">El Caf\u00e9 de <span>Juanjo<\/span><\/div>\n <div class=\"footer-text\">Medell\u00edn, Colombia \u00b7 Caf\u00e9 de origen con causa social<\/div>\n <\/div>\n <div class=\"footer-links\">\n <a href=\"https:\/\/instagram.com\/elcafedejuanjo\" target=\"_blank\" title=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\" title=\"WhatsApp\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\n <a href=\"mailto:elcafedejuanjo2024@gmail.com\" title=\"Email\"><i class=\"fa-regular fa-envelope\"><\/i><\/a>\n <\/div>\n <div class=\"footer-copy\">\u00a9 2026 El Caf\u00e9 de Juanjo \u00b7 Todos los derechos reservados<\/div>\n<\/footer>\n\n\n<a class=\"wa-float\" href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\" title=\"WhatsApp\">\n <i class=\"fa-brands fa-whatsapp\"><\/i>\n<\/a>\n\n<script>\n\/\/ \u2500\u2500 STEAM PARTICLES HERO \u2500\u2500\nconst steamContainer = document.getElementById('steam-container');\nfor (let i = 0; i < 18; i++) {\n const el = document.createElement('div');\n el.className = 'steam-particle';\n const size = Math.random() * 4 + 2;\n el.style.cssText = `\n width:${size}px;height:${size}px;\n left:${Math.random()*100}%;\n bottom:${Math.random()*30}%;\n --dur:${7 + Math.random() * 8}s;\n --del:${Math.random() * 6}s;\n position:absolute;\n `;\n steamContainer.appendChild(el);\n}\n\n\/\/ \u2500\u2500 REVEAL ON SCROLL \u2500\u2500\nconst io = new IntersectionObserver(entries => {\n entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('on'); });\n}, { threshold: 0.08 });\ndocument.querySelectorAll('.reveal').forEach(el => io.observe(el));\n\n\/\/ \u2500\u2500 WHATSAPP PRODUCT \u2500\u2500\nfunction wa(prod) {\n window.open(\n 'https:\/\/wa.me\/573113246234?text=' + encodeURIComponent('Hola! Me interesa: ' + prod + ' del Caf\u00e9 de Juanjo \u2615'),\n '_blank'\n );\n}\n\n\/\/ \u2500\u2500 GALER\u00cdA UPLOAD \u2500\u2500\nconst fileInput = document.getElementById('file-input');\nconst uploadZone = document.getElementById('upload-zone');\nconst uploadedGrid = document.getElementById('uploaded-grid');\nlet uploads = [];\n\nfileInput.addEventListener('change', e => processFiles(e.target.files));\nuploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('dragover'); });\nuploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));\nuploadZone.addEventListener('drop', e => {\n e.preventDefault();\n uploadZone.classList.remove('dragover');\n processFiles(e.dataTransfer.files);\n});\n\nfunction processFiles(files) {\n Array.from(files).forEach(file => {\n if (!file.type.startsWith('image\/') && !file.type.startsWith('video\/')) return;\n const reader = new FileReader();\n reader.onload = ev => {\n const id = Date.now() + Math.random();\n uploads.push({ id, type: file.type.startsWith('image\/') ? 'img' : 'video', src: ev.target.result, name: file.name });\n renderUploads();\n };\n reader.readAsDataURL(file);\n });\n}\n\nfunction renderUploads() {\n uploadedGrid.innerHTML = '';\n uploads.forEach(u => {\n const div = document.createElement('div');\n div.className = 'up-item';\n div.innerHTML = u.type === 'img'\n ? `<img decoding=\"async\" src=\"${u.src}\" alt=\"${u.name}\">`\n : `<video src=\"${u.src}\" muted preload=\"metadata\"><\/video>`;\n const del = document.createElement('button');\n del.className = 'up-del';\n del.innerHTML = '<i class=\"fa-solid fa-xmark\"><\/i>';\n del.onclick = (e) => { e.stopPropagation(); uploads = uploads.filter(x => x.id !== u.id); renderUploads(); };\n div.appendChild(del);\n uploadedGrid.appendChild(div);\n });\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"author":1,"featured_media":27707,"comment_status":"open","ping_status":"closed","template":"","meta":{"_srk_meta_title":"","_srk_meta_description":"","_srk_robots_meta":[],"_srk_canonical_url":"","_srk_advanced_settings":[],"_srk_last_sync":0},"listing-category":[170,232,233],"list-tags":[],"location":[167],"class_list":["post-27706","listing","type-listing","status-publish","has-post-thumbnail","hentry","listing-category-emprendedores","listing-category-artesanal","listing-category-cafe","location-medellin"],"cubewp_post_meta":[],"taxonomies":["Emprendedores","Artesanal","Caf\u00e9","Medell\u00edn"],"_links":{"self":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/listing\/27706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/listing"}],"about":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/types\/listing"}],"author":[{"embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/comments?post=27706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/media\/27707"}],"wp:attachment":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/media?parent=27706"}],"wp:term":[{"taxonomy":"listing-category","embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/listing-category?post=27706"},{"taxonomy":"list-tags","embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/list-tags?post=27706"},{"taxonomy":"location","embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/location?post=27706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":27706,"date":"2026-05-15T01:08:19","date_gmt":"2026-05-15T06:08:19","guid":{"rendered":"https:\/\/aqifue.com\/?post_type=listing&p=27706"},"modified":"2026-05-18T23:56:23","modified_gmt":"2026-05-19T04:56:23","slug":"el-cafe-de-juanjo","status":"publish","type":"listing","link":"https:\/\/aqifue.com\/en\/listing\/el-cafe-de-juanjo\/","title":{"rendered":"El Caf\u00e9 de Juanjo"},"content":{"rendered":"\n\n\n\n\n\nEl Caf\u00e9 de Juanjo \u2014 Medell\u00edn<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIABLES & RESET\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n:root {\n --espresso: #0F0805;\n --roast: #1A0E08;\n --mahogany: #261209;\n --walnut: #341A0C;\n --bark: #4A2510;\n --gold: #C8922A;\n --gold-light: #E8B44A;\n --gold-pale: #F5D48A;\n --cream: #FAF0DC;\n --ivory: #FDF8F0;\n --white: #FFFFFF;\n --muted: rgba(250,240,220,0.65);\n --dim: rgba(250,240,220,0.40);\n --wa: #25D366;\n --border: rgba(200,146,42,0.18);\n --border-soft:rgba(200,146,42,0.10);\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; }\n\nbody {\n font-family: 'Outfit', sans-serif;\n background: var(--espresso);\n color: var(--cream);\n overflow-x: hidden;\n font-size: 16px;\n line-height: 1.6;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCROLLBAR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n::-webkit-scrollbar { width: 4px; }\n::-webkit-scrollbar-track { background: var(--espresso); }\n::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVEGACI\u00d3N\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.nav {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 500;\n padding: 0 40px;\n height: 68px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(15,8,5,0.90);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border);\n}\n.nav-logo {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--white);\n letter-spacing: 1px;\n}\n.nav-logo span { color: var(--gold-light); font-style: italic; }\n.nav-links { display: flex; gap: 32px; align-items: center; }\n.nav-links a {\n color: var(--muted);\n text-decoration: none;\n font-size: 0.82rem;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n font-weight: 500;\n transition: color 0.3s;\n}\n.nav-links a:hover { color: var(--gold-light); }\n.nav-wa {\n display: flex; align-items: center; gap: 7px;\n background: var(--wa);\n color: #fff !important;\n padding: 8px 18px;\n border-radius: 40px;\n font-size: 0.82rem !important;\n font-weight: 600 !important;\n letter-spacing: 0.5px !important;\n text-transform: none !important;\n transition: box-shadow 0.3s, transform 0.2s !important;\n}\n.nav-wa:hover { box-shadow: 0 0 20px rgba(37,211,102,0.4); transform: translateY(-1px) !important; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: var(--espresso);\n padding-top: 68px;\n}\n.hero-bg {\n position: absolute; inset: 0;\n background-image: url('https:\/\/images.unsplash.com\/photo-1509042239860-f550ce710b93?q=80&w=1920');\n background-size: cover;\n background-position: center;\n opacity: 0.18;\n transform: scale(1.05);\n animation: heroZoom 18s ease-in-out infinite alternate;\n}\n@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.12); } }\n.hero-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(135deg,\n rgba(15,8,5,0.95) 0%,\n rgba(26,14,8,0.80) 50%,\n rgba(15,8,5,0.92) 100%);\n}\n.hero-grain {\n position: absolute; inset: 0;\n opacity: 0.04;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n background-size: 200px;\n}\n.hero-glow {\n position: absolute;\n width: 600px; height: 600px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(200,146,42,0.12) 0%, transparent 70%);\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.hero-content {\n position: relative;\n z-index: 10;\n padding: 80px 60px;\n max-width: 760px;\n}\n.hero-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 0.75rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 32px;\n opacity: 0;\n animation: riseIn 0.9s 0.1s ease forwards;\n}\n.hero-eyebrow::before {\n content: '';\n width: 32px; height: 1px;\n background: var(--gold);\n flex-shrink: 0;\n}\n.hero-h1 {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(4rem, 9vw, 7.5rem);\n font-weight: 700;\n line-height: 0.92;\n color: var(--white);\n letter-spacing: -1px;\n margin-bottom: 12px;\n opacity: 0;\n animation: riseIn 0.9s 0.25s ease forwards;\n}\n.hero-h1 em {\n color: var(--gold-light);\n font-style: italic;\n font-weight: 400;\n}\n.hero-sub {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(1.3rem, 3vw, 1.8rem);\n color: var(--muted);\n font-style: italic;\n line-height: 1.5;\n margin-bottom: 48px;\n max-width: 500px;\n opacity: 0;\n animation: riseIn 0.9s 0.4s ease forwards;\n}\n.hero-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 14px;\n opacity: 0;\n animation: riseIn 0.9s 0.55s ease forwards;\n}\n@keyframes riseIn {\n from { opacity: 0; transform: translateY(28px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* Part\u00edculas de vapor *\/\n.steam-particle {\n position: absolute;\n width: 3px; height: 3px;\n border-radius: 50%;\n background: var(--gold);\n animation: steamFloat var(--dur, 9s) var(--del, 0s) infinite ease-in-out;\n opacity: 0;\n pointer-events: none;\n}\n@keyframes steamFloat {\n 0% { opacity: 0; transform: translateY(0) scale(0.5); }\n 20% { opacity: 0.4; }\n 80% { opacity: 0.1; }\n 100% { opacity: 0; transform: translateY(-200px) scale(1.5); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BOTONES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.btn {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n padding: 15px 32px;\n border-radius: 50px;\n font-family: 'Outfit', sans-serif;\n font-size: 0.95rem;\n font-weight: 600;\n text-decoration: none;\n letter-spacing: 0.5px;\n transition: all 0.3s;\n cursor: pointer;\n border: none;\n}\n.btn-gold {\n background: var(--gold);\n color: var(--espresso);\n box-shadow: 0 6px 24px rgba(200,146,42,0.35);\n}\n.btn-gold:hover { background: var(--gold-light); box-shadow: 0 8px 32px rgba(200,146,42,0.5); transform: translateY(-2px); }\n.btn-wa {\n background: var(--wa);\n color: #fff;\n box-shadow: 0 6px 24px rgba(37,211,102,0.28);\n}\n.btn-wa:hover { box-shadow: 0 8px 32px rgba(37,211,102,0.45); transform: translateY(-2px); }\n.btn-outline {\n background: transparent;\n color: var(--cream);\n border: 1.5px solid rgba(250,240,220,0.25);\n}\n.btn-outline:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DIVISOR DECORATIVO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ornament {\n text-align: center;\n padding: 40px 0;\n color: var(--gold);\n font-size: 1.2rem;\n letter-spacing: 12px;\n opacity: 0.4;\n}\n.gold-line {\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent);\n opacity: 0.25;\n margin: 0;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECCIONES BASE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.section {\n padding: 100px 60px;\n position: relative;\n}\n.section-alt { background: var(--roast); }\n.section-dark { background: var(--espresso); }\n.section-mid { background: var(--mahogany); }\n\n.eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 0.75rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 18px;\n font-weight: 500;\n}\n.eyebrow::before {\n content: '';\n width: 24px; height: 1px;\n background: var(--gold);\n}\n.display-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 700;\n color: var(--white);\n line-height: 1.05;\n margin-bottom: 24px;\n}\n.display-title em { color: var(--gold-light); font-style: italic; font-weight: 400; }\n.body-text {\n font-size: 1.1rem;\n color: var(--cream);\n line-height: 1.85;\n max-width: 620px;\n font-weight: 300;\n}\n.body-text strong { color: var(--gold-light); font-weight: 600; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HISTORIA \u2014 LAYOUT 2 COLUMNAS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.historia-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n.historia-img-wrap {\n position: relative;\n}\n.historia-img-main {\n width: 100%;\n aspect-ratio: 3\/4;\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid var(--border);\n}\n.historia-img-main img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: sepia(20%) brightness(0.9);\n transition: transform 0.6s ease;\n}\n.historia-img-main:hover img { transform: scale(1.04); }\n.historia-img-float {\n position: absolute;\n bottom: -32px; right: -32px;\n width: 52%;\n aspect-ratio: 1;\n border-radius: 4px;\n overflow: hidden;\n border: 3px solid var(--espresso);\n box-shadow: 0 20px 60px rgba(0,0,0,0.6);\n}\n.historia-img-float img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: sepia(15%) brightness(0.85);\n}\n.historia-text { padding-right: 20px; }\n.historia-quote {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.6rem;\n font-style: italic;\n color: var(--gold-pale);\n line-height: 1.4;\n margin-bottom: 28px;\n padding-left: 20px;\n border-left: 2px solid var(--gold);\n}\n.firma {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid var(--border);\n}\n.firma-dot {\n width: 40px; height: 40px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--gold), var(--bark));\n display: flex; align-items: center; justify-content: center;\n font-size: 1.1rem;\n flex-shrink: 0;\n}\n.firma-name { font-size: 0.85rem; color: var(--gold); font-weight: 600; letter-spacing: 1px; }\n.firma-sub { font-size: 0.78rem; color: var(--dim); margin-top: 2px; }\n\n\/* Tags de perfil de sabor *\/\n.flavor-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 32px;\n}\n.ftag {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 18px;\n border-radius: 40px;\n background: rgba(200,146,42,0.10);\n border: 1px solid var(--border);\n color: var(--cream);\n font-size: 0.88rem;\n font-weight: 400;\n transition: background 0.3s;\n}\n.ftag:hover { background: rgba(200,146,42,0.20); }\n.ftag-icon { font-size: 0.95rem; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n STATS BAR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stats-strip {\n background: var(--walnut);\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n padding: 48px 60px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 0;\n}\n.stat-item {\n text-align: center;\n padding: 0 20px;\n border-right: 1px solid var(--border);\n}\n.stat-item:last-child { border-right: none; }\n.stat-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 3.2rem;\n font-weight: 700;\n color: var(--gold-light);\n line-height: 1;\n display: block;\n}\n.stat-label {\n font-size: 0.78rem;\n color: var(--muted);\n letter-spacing: 1.5px;\n text-transform: uppercase;\n margin-top: 6px;\n display: block;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PRODUCTOS \u2014 GRID ESPACIOSO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.prod-section-head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: 60px;\n flex-wrap: wrap;\n gap: 24px;\n}\n.prod-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n margin-bottom: 48px;\n}\n.prod-card {\n background: var(--walnut);\n border: 1px solid var(--border-soft);\n border-radius: 8px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;\n position: relative;\n}\n.prod-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 24px 60px rgba(0,0,0,0.5);\n border-color: var(--border);\n}\n.prod-img-wrap {\n position: relative;\n height: 200px;\n overflow: hidden;\n}\n.prod-img-wrap img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: brightness(0.75) sepia(15%);\n transition: transform 0.5s ease, filter 0.4s;\n}\n.prod-card:hover .prod-img-wrap img {\n transform: scale(1.06);\n filter: brightness(0.85) sepia(5%);\n}\n.prod-img-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(15,8,5,0.85) 0%, transparent 50%);\n}\n.prod-cat-badge {\n position: absolute;\n top: 14px; left: 14px;\n background: rgba(15,8,5,0.75);\n border: 1px solid var(--border);\n color: var(--gold);\n font-size: 0.68rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 5px 12px;\n border-radius: 20px;\n backdrop-filter: blur(8px);\n font-weight: 500;\n}\n.prod-body {\n padding: 24px 24px 28px;\n}\n.prod-name {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--white);\n line-height: 1.2;\n margin-bottom: 8px;\n}\n.prod-desc {\n font-size: 0.92rem;\n color: var(--cream);\n line-height: 1.65;\n margin-bottom: 18px;\n font-weight: 300;\n}\n.prod-sizes {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 20px;\n}\n.psize {\n font-size: 0.78rem;\n background: rgba(200,146,42,0.14);\n color: var(--gold-light);\n border: 1px solid rgba(200,146,42,0.28);\n padding: 4px 12px;\n border-radius: 20px;\n letter-spacing: 0.5px;\n font-weight: 500;\n}\n.prod-cta {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 0.82rem;\n color: var(--gold);\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n transition: gap 0.2s;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-family: 'Outfit', sans-serif;\n}\n.prod-cta:hover { gap: 10px; color: var(--gold-light); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GALER\u00cdA\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.gallery-section {\n padding: 100px 60px;\n background: var(--espresso);\n}\n.gallery-head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: 48px;\n flex-wrap: wrap;\n gap: 20px;\n}\n.gallery-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n grid-template-rows: 260px 260px;\n gap: 12px;\n}\n.g-item {\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n background: var(--walnut);\n border: 1px solid var(--border-soft);\n cursor: pointer;\n}\n.g-item:first-child { grid-row: 1 \/ 3; }\n.g-item img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: brightness(0.7) sepia(10%);\n transition: transform 0.5s ease, filter 0.4s;\n}\n.g-item:hover img { transform: scale(1.05); filter: brightness(0.85) sepia(5%); }\n.g-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(15,8,5,0.7) 0%, transparent 55%);\n opacity: 0;\n transition: opacity 0.3s;\n display: flex;\n align-items: flex-end;\n padding: 20px;\n}\n.g-item:hover .g-overlay { opacity: 1; }\n.g-overlay-text {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1rem;\n font-style: italic;\n color: var(--cream);\n}\n\n\/* Zona de carga para galer\u00eda *\/\n.gallery-upload-area {\n margin-top: 16px;\n border: 2px dashed rgba(200,146,42,0.25);\n border-radius: 8px;\n padding: 40px;\n text-align: center;\n background: rgba(200,146,42,0.03);\n cursor: pointer;\n transition: all 0.3s;\n position: relative;\n}\n.gallery-upload-area:hover, .gallery-upload-area.dragover {\n border-color: rgba(200,146,42,0.5);\n background: rgba(200,146,42,0.07);\n}\n.gallery-upload-area input[type=\"file\"] {\n position: absolute; inset: 0;\n opacity: 0; cursor: pointer;\n width: 100%; height: 100%;\n}\n.upload-icon-wrap { font-size: 2rem; color: var(--gold); margin-bottom: 12px; }\n.upload-text { font-size: 0.95rem; color: var(--muted); }\n.upload-text strong { color: var(--cream); font-weight: 500; }\n.upload-hint { font-size: 0.78rem; color: var(--dim); margin-top: 6px; }\n\n\/* Grid de fotos subidas *\/\n.uploaded-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 12px;\n margin-top: 24px;\n}\n.up-item {\n aspect-ratio: 4\/3;\n border-radius: 6px;\n overflow: hidden;\n border: 1px solid var(--border-soft);\n position: relative;\n background: var(--walnut);\n cursor: pointer;\n}\n.up-item img, .up-item video {\n width: 100%; height: 100%;\n object-fit: cover;\n}\n.up-del {\n position: absolute;\n top: 8px; right: 8px;\n width: 28px; height: 28px;\n border-radius: 50%;\n background: rgba(15,8,5,0.8);\n border: 1px solid rgba(200,146,42,0.3);\n color: var(--gold);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.75rem;\n opacity: 0;\n transition: opacity 0.2s;\n z-index: 2;\n}\n.up-item:hover .up-del { opacity: 1; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GOURMET FEATURE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.gourmet-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n.gourmet-img {\n width: 100%;\n aspect-ratio: 4\/3;\n border-radius: 6px;\n overflow: hidden;\n border: 1px solid var(--border);\n order: 1;\n}\n.gourmet-img img {\n width: 100%; height: 100%;\n object-fit: cover;\n filter: sepia(10%) brightness(0.85);\n transition: transform 0.6s;\n}\n.gourmet-img:hover img { transform: scale(1.04); }\n.gourmet-content { order: 2; }\n.gourmet-list {\n list-style: none;\n margin: 28px 0;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n.gourmet-list li {\n display: flex;\n align-items: flex-start;\n gap: 14px;\n font-size: 1rem;\n color: var(--cream);\n line-height: 1.6;\n font-weight: 300;\n}\n.gourmet-list li::before {\n content: '';\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--gold);\n margin-top: 8px;\n flex-shrink: 0;\n}\n.product-tags-row {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 32px;\n}\n.ptag {\n font-size: 0.82rem;\n background: rgba(200,146,42,0.12);\n color: var(--gold-light);\n border: 1px solid rgba(200,146,42,0.25);\n padding: 6px 16px;\n border-radius: 30px;\n font-weight: 500;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EXPERIENCIAS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.exp-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2px;\n margin-top: 60px;\n}\n.exp-card {\n padding: 48px 36px;\n background: var(--walnut);\n border: 1px solid var(--border-soft);\n position: relative;\n overflow: hidden;\n transition: background 0.4s;\n}\n.exp-card:hover { background: var(--bark); }\n.exp-card::after {\n content: '';\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s;\n}\n.exp-card:hover::after { transform: scaleX(1); }\n.exp-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 3.5rem;\n font-weight: 700;\n color: rgba(200,146,42,0.18);\n line-height: 1;\n margin-bottom: 24px;\n}\n.exp-icon { font-size: 2rem; margin-bottom: 20px; display: block; }\n.exp-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--white);\n margin-bottom: 14px;\n}\n.exp-desc {\n font-size: 0.95rem;\n color: var(--cream);\n line-height: 1.75;\n font-weight: 300;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FUNDACI\u00d3N\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.fund-section {\n padding: 100px 60px;\n background: var(--mahogany);\n position: relative;\n overflow: hidden;\n}\n.fund-glow {\n position: absolute;\n width: 700px; height: 700px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(200,146,42,0.08) 0%, transparent 70%);\n top: 50%; right: -200px;\n transform: translateY(-50%);\n pointer-events: none;\n}\n.fund-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n position: relative;\n z-index: 1;\n}\n.fund-badge-lg {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: rgba(200,146,42,0.12);\n border: 1px solid rgba(200,146,42,0.28);\n color: var(--gold-light);\n padding: 10px 22px;\n border-radius: 40px;\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: 1px;\n margin-bottom: 28px;\n}\n.fund-visual {\n background: var(--walnut);\n border: 1px solid var(--border);\n border-radius: 8px;\n padding: 48px;\n text-align: center;\n}\n.fund-heart { font-size: 4rem; display: block; margin-bottom: 20px; }\n.fund-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 2rem;\n font-weight: 700;\n color: var(--white);\n margin-bottom: 16px;\n line-height: 1.2;\n}\n.fund-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 3.5rem;\n font-weight: 700;\n color: var(--gold-light);\n line-height: 1;\n}\n.fund-num-label { font-size: 0.8rem; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CIERRE \/ FRASE FINAL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.cierre {\n padding: 120px 60px;\n background: var(--espresso);\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n.cierre-glow {\n position: absolute;\n width: 800px; height: 400px;\n border-radius: 50%;\n background: radial-gradient(ellipse, rgba(200,146,42,0.09) 0%, transparent 70%);\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.cierre-quote {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(2rem, 5vw, 3.5rem);\n font-weight: 400;\n font-style: italic;\n color: var(--white);\n line-height: 1.25;\n max-width: 700px;\n margin: 0 auto 48px;\n position: relative;\n z-index: 1;\n}\n.cierre-quote em { color: var(--gold-light); font-style: normal; font-weight: 700; }\n.cierre-chips {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n margin-bottom: 48px;\n position: relative;\n z-index: 1;\n}\n.chip {\n display: flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.12);\n color: var(--cream);\n padding: 10px 20px;\n border-radius: 40px;\n font-size: 0.9rem;\n text-decoration: none;\n transition: background 0.3s, border-color 0.3s;\n font-weight: 400;\n}\n.chip:hover { background: rgba(200,146,42,0.12); border-color: var(--border); color: var(--gold-light); }\n.cierre-cta { position: relative; z-index: 1; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.footer {\n background: #000;\n padding: 60px;\n border-top: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 24px;\n}\n.footer-logo {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.3rem;\n font-weight: 700;\n color: var(--cream);\n}\n.footer-logo span { color: var(--gold-light); font-style: italic; }\n.footer-text { font-size: 0.8rem; color: var(--dim); letter-spacing: 0.5px; margin-top: 4px; }\n.footer-links { display: flex; gap: 20px; }\n.footer-links a { color: var(--muted); font-size: 1.1rem; text-decoration: none; transition: color 0.3s; }\n.footer-links a:hover { color: var(--gold-light); }\n.footer-copy { font-size: 0.78rem; color: var(--dim); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WA FLOTANTE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.wa-float {\n position: fixed;\n bottom: 28px; right: 28px;\n width: 58px; height: 58px;\n background: var(--wa);\n color: #fff;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.55rem;\n text-decoration: none;\n box-shadow: 0 6px 24px rgba(37,211,102,0.45);\n z-index: 9999;\n animation: wapulse 2.5s infinite;\n transition: transform 0.2s;\n}\n.wa-float:hover { transform: scale(1.1); }\n@keyframes wapulse {\n 0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45); }\n 50% { box-shadow: 0 6px 36px rgba(37,211,102,0.7); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n REVEAL ANIMATION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s, transform 0.7s; }\n.reveal.on { opacity: 1; transform: translateY(0); }\n.reveal.d1 { transition-delay: 0.08s; }\n.reveal.d2 { transition-delay: 0.17s; }\n.reveal.d3 { transition-delay: 0.26s; }\n.reveal.d4 { transition-delay: 0.35s; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 1024px) {\n .historia-layout, .gourmet-layout, .fund-layout { grid-template-columns: 1fr; gap: 48px; }\n .historia-img-float { bottom: -20px; right: -20px; }\n .gourmet-img { order: 0; }\n .gourmet-content { order: 1; }\n .prod-grid { grid-template-columns: repeat(2, 1fr); }\n .exp-grid { grid-template-columns: 1fr 1fr; }\n .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }\n .g-item:first-child { grid-row: auto; }\n}\n@media (max-width: 768px) {\n .nav { padding: 0 20px; }\n .nav-links { display: none; }\n .section, .gallery-section, .fund-section, .cierre { padding: 70px 24px; }\n .hero-content { padding: 60px 24px; }\n .stats-strip { grid-template-columns: 1fr 1fr; padding: 40px 24px; gap: 24px; }\n .stat-item { border-right: none; padding: 16px 0; }\n .prod-grid { grid-template-columns: 1fr; }\n .exp-grid { grid-template-columns: 1fr; }\n .gallery-grid { grid-template-columns: 1fr 1fr; }\n .footer { padding: 40px 24px; flex-direction: column; text-align: center; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<nav class=\"nav\">\n <div class=\"nav-logo\">El Caf\u00e9 de <span>Juanjo<\/span><\/div>\n <div class=\"nav-links\">\n <a href=\"#historia\">Historia<\/a>\n <a href=\"#catalogo\">Cat\u00e1logo<\/a>\n <a href=\"#galeria\">Galer\u00eda<\/a>\n <a href=\"#fundacion\">Prop\u00f3sito<\/a>\n <a class=\"nav-wa\" href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> WhatsApp\n <\/a>\n <\/div>\n<\/nav>\n\n\n<section class=\"hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-grain\"><\/div>\n <div class=\"hero-glow\"><\/div>\n <div id=\"steam-container\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-eyebrow\">Medell\u00edn \u00b7 Caf\u00e9 de origen \u00b7 Causa social<\/div>\n <h1 class=\"hero-h1\">El Caf\u00e9<br>de <em>Juanjo<\/em><\/h1>\n <p class=\"hero-sub\">“A veces un caf\u00e9 es la invitaci\u00f3n para entrar en tu vida”<\/p>\n <div class=\"hero-actions\">\n <a class=\"btn btn-gold\" href=\"#catalogo\">\n <i class=\"fa-solid fa-mug-hot\"><\/i> Ver cat\u00e1logo\n <\/a>\n <a class=\"btn btn-wa\" href=\"https:\/\/wa.me\/573113246234?text=Hola!%20Me%20interesa%20El%20Caf\u00e9%20de%20Juanjo%20\u2615\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> WhatsApp\n <\/a>\n <a class=\"btn btn-outline\" href=\"#historia\">Nuestra historia \u2193<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"stats-strip\">\n <div class=\"stat-item\">\n <span class=\"stat-num\">100%<\/span>\n <span class=\"stat-label\">Ar\u00e1biga de origen<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">1.800<\/span>\n <span class=\"stat-label\">Metros sobre el nivel del mar<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">9+<\/span>\n <span class=\"stat-label\">Productos en cat\u00e1logo<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">\u221e<\/span>\n <span class=\"stat-label\">Compras con prop\u00f3sito<\/span>\n <\/div>\n<\/div>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"historia\" class=\"section section-alt reveal\">\n <div class=\"historia-layout\">\n <div class=\"historia-img-wrap\">\n <div class=\"historia-img-main\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1495474472287-4d71bcdd2085?q=80&w=800\" alt=\"Caf\u00e9 de Juanjo\">\n <\/div>\n <div class=\"historia-img-float\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1501854140801-50d01698950b?q=80&w=600\" alt=\"Familia Juanjo\">\n <\/div>\n <\/div>\n <div class=\"historia-text\">\n <div class=\"eyebrow\">Qui\u00e9nes somos<\/div>\n <h2 class=\"display-title\">M\u00e1s que un caf\u00e9,<br>una <em>causa de vida<\/em><\/h2>\n <div class=\"historia-quote\">“Cada taza que disfrutas financia sus terapias y el sue\u00f1o de llegar a m\u00e1s familias.”<\/div>\n <p class=\"body-text\" style=\"color:#FAF0DC;\">\n Somos <strong>Juan Rodrigo Higuera y Catalina Trespalacios<\/strong>, padres de Juan Jos\u00e9, nacido en 2013 con <strong>hiperinsulinismo cong\u00e9nito difuso<\/strong>, una enfermedad rara que le gener\u00f3 una lesi\u00f3n cerebral. Hoy nuestro sue\u00f1o es crecer para apoyar a m\u00e1s familias, contribuir a fundaciones y brindarles condiciones de vida de excelente calidad.\n <\/p>\n <div class=\"flavor-tags\">\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udf3f<\/span> 100% Ar\u00e1biga<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udfd4<\/span> 1.600\u20131.800 m.s.n.m<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udf6b<\/span> Notas a chocolate<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\ud83c\udf4b<\/span> Acidez media c\u00edtrica<\/span>\n <span class=\"ftag\"><span class=\"ftag-icon\">\u2696\ufe0f<\/span> Cuerpo balanceado<\/span>\n <\/div>\n <div class=\"firma\">\n <div class=\"firma-dot\">\u2615<\/div>\n <div>\n <div class=\"firma-name\">Juan Rodrigo & Catalina<\/div>\n <div class=\"firma-sub\">Padres de Juanjo \u00b7 Fundadores<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"catalogo\" class=\"section section-dark reveal\">\n <div class=\"prod-section-head\">\n <div>\n <div class=\"eyebrow\">Cat\u00e1logo<\/div>\n <h2 class=\"display-title\">Nuestros <em>productos<\/em><\/h2>\n <\/div>\n <a class=\"btn btn-outline\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20ver%20el%20cat\u00e1logo%20completo\" target=\"_blank\">\n Cat\u00e1logo completo \u2192\n <\/a>\n <\/div>\n <div class=\"prod-grid\">\n\n \n <div class=\"prod-card reveal d1\" onclick=\"wa('Caf\u00e9 en Grano')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1447933601403-0c6688de566e?q=80&w=800\" alt=\"Caf\u00e9 en Grano\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Caf\u00e9 base<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 en Grano<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">\n Tostado premium con notas dulces y achocolatadas. Perfecto para moler al momento.\n<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">250 g<\/span><span class=\"psize\">500 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d2\" onclick=\"wa('Caf\u00e9 Molido')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514432324607-a09d9b4aefdd?q=80&w=800\" alt=\"Caf\u00e9 Molido\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Caf\u00e9 base<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 Molido<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Listo para preparar. Molienda ideal para filtro, prensa francesa o cafetera italiana.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">250 g<\/span><span class=\"psize\">500 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d3\" onclick=\"wa('Caf\u00e9 Liofilizado')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509042239860-f550ce710b93?q=80&w=800\" alt=\"Caf\u00e9 Liofilizado\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Instant\u00e1neo<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 Liofilizado<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Instant\u00e1neo de calidad premium. Sin perder el aroma ni el sabor del origen.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">105 g vidrio<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d1\" onclick=\"wa('Caf\u00e9 Infusi\u00f3n')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1527515545081-5db817172677?q=80&w=800\" alt=\"Caf\u00e9 Infusi\u00f3n\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Sachets<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9 Infusi\u00f3n<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">En sachets convenientes. Versiones: Fuerte, Suave y Panela. Para el d\u00eda a d\u00eda.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">30 sachets<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d2\" onclick=\"wa('Mocachino Gourmet')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1572442388796-11668a67e53d?q=80&w=800\" alt=\"Mocachino\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Gourmet<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Mocachino Gourmet<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Caf\u00e9 premium con chocolate artesanal. Un placer indulgente con solo agua caliente.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">210 g<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d3\" onclick=\"wa('Caf\u00e9s Funcionales')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742502-ec7c0e9f34b1?q=80&w=800\" alt=\"Caf\u00e9s Funcionales\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Funcional<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Caf\u00e9s Funcionales<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Con Reishi, C\u00farcuma o Sin cafe\u00edna. Lattes funcionales para bienestar y salud.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">Lattes<\/span><span class=\"psize\">Reishi<\/span><span class=\"psize\">C\u00farcuma<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d1\" onclick=\"wa('Capuchino Gourmet')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534040385115-33dcb3acba5b?q=80&w=800\" alt=\"Capuchino\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Gourmet<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Capuchino Gourmet<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Cremoso y suave al instante. Sabor de cafeter\u00eda en la comodidad de tu hogar.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">210 g<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d2\" onclick=\"wa('Chocolate Gourmet')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1604329760661-e71dc83f8f26?q=80&w=800\" alt=\"Chocolate Gourmet\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Gourmet<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Chocolate Gourmet<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Chocolate soluble premium en frasco de vidrio o bolsa resellable. Ideal como regalo.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">210 g<\/span><span class=\"psize\">250 g<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"prod-card reveal d3\" onclick=\"wa('Accesorios cafeteros')\">\n <div class=\"prod-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498804103079-a6351b050096?q=80&w=800\" alt=\"Accesorios\">\n <div class=\"prod-img-overlay\"><\/div>\n <span class=\"prod-cat-badge\">Accesorios<\/span>\n <\/div>\n <div class=\"prod-body\">\n <div class=\"prod-name\">Accesorios Cafeteros<\/div>\n <p class=\"prod-desc\" style=\"color: white;\">Prensa francesa, termos, cucharas medidoras y m\u00e1s. Personalizados con tu marca.<\/p>\n <div class=\"prod-sizes\"><span class=\"psize\">Personalizados<\/span><\/div>\n <button class=\"prod-cta\">Pedir ahora <i class=\"fa-brands fa-whatsapp\"><\/i><\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <div style=\"text-align:center;\">\n <a class=\"btn btn-wa\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20asesor\u00eda%20del%20cat\u00e1logo%20del%20Caf\u00e9%20de%20Juanjo\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> Asesor\u00eda personalizada\n <\/a>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"galeria\" class=\"gallery-section reveal\">\n <div class=\"gallery-head\">\n <div>\n <div class=\"eyebrow\">Galer\u00eda<\/div>\n <h2 class=\"display-title\">Nuestro <em>mundo<\/em><\/h2>\n <\/div>\n <p style=\"color:var(--muted);font-size:0.95rem;max-width:320px;text-align:right;font-weight:300;\">\n Momentos, productos y la esencia del Caf\u00e9 de Juanjo en cada imagen.\n <\/p>\n <\/div>\n\n \n <div class=\"gallery-grid\" id=\"main-gallery\">\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.55-PM-5.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">El ritual del buen caf\u00e9<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.56-PM-1.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Cada taza, una historia<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.56-PM-5.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Origen de altura<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.59-PM-7.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Arte en cada preparaci\u00f3n<\/div><\/div>\n <\/div>\n <div class=\"g-item\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.57-PM-3.jpeg\">\n <div class=\"g-overlay\"><div class=\"g-overlay-text\">Hecho con amor<\/div><\/div>\n <\/div>\n <\/div>\n\n \n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section class=\"section section-mid reveal\">\n <div class=\"gourmet-layout\">\n <div class=\"gourmet-img\">\n <img decoding=\"async\" src=\"http:\/\/aqifue.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-14-at-1.35.57-PM-1.jpeg\" alt=\"Gourmet\">\n <\/div>\n <div class=\"gourmet-content\">\n <div class=\"eyebrow\">Colecci\u00f3n especial<\/div>\n <h2 class=\"display-title\">Gourmet de<br><em>autor<\/em><\/h2>\n <p class=\"body-text\" style=\"color:#FAF0DC;\">\n Mocachino, capuchino y chocolate gourmet elaborados con ingredientes seleccionados. Solo necesitas agua caliente para vivir la experiencia de una cafeter\u00eda de alto nivel.\n <\/p>\n <ul class=\"gourmet-list\">\n <li style=\"color:#FAF0DC;\">Presentaci\u00f3n en frasco de vidrio o bolsa resellable premium<\/li>\n <li style=\"color:#FAF0DC;\">Sin aditivos artificiales \u00b7 Sabor aut\u00e9ntico garantizado<\/li>\n <li style=\"color:#FAF0DC;\">Ideal como regalo corporativo o detalle personal<\/li>\n <\/ul>\n <div class=\"product-tags-row\">\n <span class=\"ptag\">Vidrio 210 g<\/span>\n <span class=\"ptag\">Vidrio 250 g<\/span>\n <span class=\"ptag\">Bolsa 250 g<\/span>\n <\/div>\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20informaci\u00f3n%20sobre%20los%20productos%20gourmet\" target=\"_blank\">\n <i class=\"fa-solid fa-box-open\"><\/i> Ver colecci\u00f3n gourmet\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section class=\"section section-dark reveal\">\n <div class=\"eyebrow\">M\u00e1s all\u00e1 de la taza<\/div>\n <h2 class=\"display-title\">Experiencias <em>cafeteras<\/em><\/h2>\n <p class=\"body-text\" style=\"margin-bottom:0;color:#FAF0DC;\">\n Llevamos el universo del caf\u00e9 a donde t\u00fa est\u00e9s. Desde nuestro espacio o en el tuyo.\n <\/p>\n <div class=\"exp-grid\">\n <div class=\"exp-card reveal d1\">\n <div class=\"exp-num\">01<\/div>\n <span class=\"exp-icon\">\ud83c\udfe0<\/span>\n <div class=\"exp-title\">En nuestro punto de venta<\/div>\n <p class=\"exp-desc\" style=\"color:#FAF0DC;\">\n Historia del caf\u00e9, m\u00e9todos de preparaci\u00f3n artesanal y degustaci\u00f3n guiada en nuestro espacio. Una experiencia sensorial completa.\n <\/p>\n <\/div>\n <div class=\"exp-card reveal d2\">\n <div class=\"exp-num\">02<\/div>\n <span class=\"exp-icon\">\ud83c\udfe2<\/span>\n <div class=\"exp-title\">En tu empresa o residencia<\/div>\n <p class=\"exp-desc\" style=\"color:#FAF0DC;\">\n Llevamos la experiencia a tu espacio. Modalidad grupal con barismo en vivo o con kit individual por asistente.\n <\/p>\n <\/div>\n <div class=\"exp-card reveal d3\">\n <div class=\"exp-num\">03<\/div>\n <span class=\"exp-icon\">\ud83c\udf89<\/span>\n <div class=\"exp-title\">Eventos y celebraciones<\/div>\n <p class=\"exp-desc\" style=\"color:#FAF0DC;\">\n Charla del caf\u00e9, bebidas fr\u00edas o calientes, maridajes gastron\u00f3micos y momentos \u00fanicos para tu evento especial.\n <\/p>\n <\/div>\n <\/div>\n <div style=\"text-align:center;margin-top:48px;\">\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/573113246234?text=Quiero%20cotizar%20una%20experiencia%20cafetera\" target=\"_blank\">\n <i class=\"fa-solid fa-calendar-check\"><\/i> Cotizar experiencia\n <\/a>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section id=\"fundacion\" class=\"fund-section reveal\">\n <div class=\"fund-glow\"><\/div>\n <div class=\"fund-layout\">\n <div>\n <div class=\"eyebrow\">Nuestro prop\u00f3sito<\/div>\n <h2 class=\"display-title\">Impacto real<br>con cada <em>compra<\/em><\/h2>\n <div class=\"fund-badge-lg\">\n <span>\ud83d\udc9b<\/span> Unidos para Sonre\u00edr\n <\/div>\n <p class=\"body-text\" style=\"color:#FAF0DC;margin-bottom:24px;\">\n Con la compra del Caf\u00e9 de Juanjo, apoyamos la <strong>Fundaci\u00f3n Unidos para Sonre\u00edr<\/strong> y su F\u00f3rmula M\u00e1gica de la Felicidad, impactando vidas a trav\u00e9s de la rehabilitaci\u00f3n y el apoyo integral a personas con discapacidad.\n <\/p>\n <p class=\"body-text\" style=\"color:#FAF0DC;\">\n <strong>Un porcentaje de cada venta<\/strong> es donado directamente a la fundaci\u00f3n. Al elegir nuestro caf\u00e9, eres parte de algo mucho m\u00e1s grande que una taza.\n <\/p>\n <div style=\"margin-top:36px;\">\n <a class=\"btn btn-gold\" href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\">\n <i class=\"fa-solid fa-heart\"><\/i> Compra con prop\u00f3sito\n <\/a>\n <\/div>\n <\/div>\n <div class=\"fund-visual\">\n <span class=\"fund-heart\">\ud83d\udc9b<\/span>\n <div class=\"fund-title\">Unidos para Sonre\u00edr<\/div>\n <div style=\"margin-top:28px;padding-top:28px;border-top:1px solid var(--border);\">\n <div class=\"fund-num\">100%<\/div>\n <div class=\"fund-num-label\">Transparencia en cada donaci\u00f3n<\/div>\n <\/div>\n <div style=\"margin-top:24px;padding-top:24px;border-top:1px solid var(--border);\">\n <div class=\"fund-num\" style=\"font-size:2.5rem;\">\u267e<\/div>\n <div class=\"fund-num-label\">Familias impactadas<\/div>\n <\/div>\n <p style=\"font-size:0.88rem;color:var(--muted);margin-top:28px;line-height:1.6;font-weight:300;\">\n Rehabilitaci\u00f3n integral \u00b7 Equipos especializados \u00b7 Apoyo a familias con necesidades especiales\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n<div class=\"gold-line\"><\/div>\n\n\n<section class=\"cierre reveal\">\n <div class=\"cierre-glow\"><\/div>\n <div class=\"cierre-quote\">\n “Si no sabes por d\u00f3nde empezar\u2026<br><em>\u00a1empieza por un caf\u00e9!<\/em>”\n <\/div>\n <div class=\"cierre-chips\">\n <a class=\"chip\" href=\"https:\/\/instagram.com\/elcafedejuanjo\" target=\"_blank\">\n <i class=\"fa-brands fa-instagram\"><\/i> @elcafedejuanjo\n <\/a>\n <a class=\"chip\" href=\"mailto:elcafedejuanjo2024@gmail.com\">\n <i class=\"fa-regular fa-envelope\"><\/i> elcafedejuanjo2024@gmail.com\n <\/a>\n <a class=\"chip\" href=\"tel:+573113246234\">\n <i class=\"fa-solid fa-phone\"><\/i> 311 324 6234\n <\/a>\n <\/div>\n <div class=\"cierre-cta\">\n <a class=\"btn btn-wa\" style=\"font-size:1.05rem;padding:18px 40px;\" href=\"https:\/\/wa.me\/573113246234?text=Hola!%20Quiero%20asesor\u00eda%20sobre%20el%20Caf\u00e9%20de%20Juanjo%20\u2615\" target=\"_blank\">\n <i class=\"fa-brands fa-whatsapp\"><\/i> Hablar con nosotros\n <\/a>\n <\/div>\n<\/section>\n\n\n<footer class=\"footer\">\n <div>\n <div class=\"footer-logo\">El Caf\u00e9 de <span>Juanjo<\/span><\/div>\n <div class=\"footer-text\">Medell\u00edn, Colombia \u00b7 Caf\u00e9 de origen con causa social<\/div>\n <\/div>\n <div class=\"footer-links\">\n <a href=\"https:\/\/instagram.com\/elcafedejuanjo\" target=\"_blank\" title=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\" title=\"WhatsApp\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\n <a href=\"mailto:elcafedejuanjo2024@gmail.com\" title=\"Email\"><i class=\"fa-regular fa-envelope\"><\/i><\/a>\n <\/div>\n <div class=\"footer-copy\">\u00a9 2026 El Caf\u00e9 de Juanjo \u00b7 Todos los derechos reservados<\/div>\n<\/footer>\n\n\n<a class=\"wa-float\" href=\"https:\/\/wa.me\/573113246234\" target=\"_blank\" title=\"WhatsApp\">\n <i class=\"fa-brands fa-whatsapp\"><\/i>\n<\/a>\n\n<script>\n\/\/ \u2500\u2500 STEAM PARTICLES HERO \u2500\u2500\nconst steamContainer = document.getElementById('steam-container');\nfor (let i = 0; i < 18; i++) {\n const el = document.createElement('div');\n el.className = 'steam-particle';\n const size = Math.random() * 4 + 2;\n el.style.cssText = `\n width:${size}px;height:${size}px;\n left:${Math.random()*100}%;\n bottom:${Math.random()*30}%;\n --dur:${7 + Math.random() * 8}s;\n --del:${Math.random() * 6}s;\n position:absolute;\n `;\n steamContainer.appendChild(el);\n}\n\n\/\/ \u2500\u2500 REVEAL ON SCROLL \u2500\u2500\nconst io = new IntersectionObserver(entries => {\n entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('on'); });\n}, { threshold: 0.08 });\ndocument.querySelectorAll('.reveal').forEach(el => io.observe(el));\n\n\/\/ \u2500\u2500 WHATSAPP PRODUCT \u2500\u2500\nfunction wa(prod) {\n window.open(\n 'https:\/\/wa.me\/573113246234?text=' + encodeURIComponent('Hola! Me interesa: ' + prod + ' del Caf\u00e9 de Juanjo \u2615'),\n '_blank'\n );\n}\n\n\/\/ \u2500\u2500 GALER\u00cdA UPLOAD \u2500\u2500\nconst fileInput = document.getElementById('file-input');\nconst uploadZone = document.getElementById('upload-zone');\nconst uploadedGrid = document.getElementById('uploaded-grid');\nlet uploads = [];\n\nfileInput.addEventListener('change', e => processFiles(e.target.files));\nuploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('dragover'); });\nuploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));\nuploadZone.addEventListener('drop', e => {\n e.preventDefault();\n uploadZone.classList.remove('dragover');\n processFiles(e.dataTransfer.files);\n});\n\nfunction processFiles(files) {\n Array.from(files).forEach(file => {\n if (!file.type.startsWith('image\/') && !file.type.startsWith('video\/')) return;\n const reader = new FileReader();\n reader.onload = ev => {\n const id = Date.now() + Math.random();\n uploads.push({ id, type: file.type.startsWith('image\/') ? 'img' : 'video', src: ev.target.result, name: file.name });\n renderUploads();\n };\n reader.readAsDataURL(file);\n });\n}\n\nfunction renderUploads() {\n uploadedGrid.innerHTML = '';\n uploads.forEach(u => {\n const div = document.createElement('div');\n div.className = 'up-item';\n div.innerHTML = u.type === 'img'\n ? `<img decoding=\"async\" src=\"${u.src}\" alt=\"${u.name}\">`\n : `<video src=\"${u.src}\" muted preload=\"metadata\"><\/video>`;\n const del = document.createElement('button');\n del.className = 'up-del';\n del.innerHTML = '<i class=\"fa-solid fa-xmark\"><\/i>';\n del.onclick = (e) => { e.stopPropagation(); uploads = uploads.filter(x => x.id !== u.id); renderUploads(); };\n div.appendChild(del);\n uploadedGrid.appendChild(div);\n });\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"author":1,"featured_media":27707,"comment_status":"open","ping_status":"closed","template":"","meta":{"_srk_meta_title":"","_srk_meta_description":"","_srk_robots_meta":[],"_srk_canonical_url":"","_srk_advanced_settings":[],"_srk_last_sync":0},"listing-category":[170,232,233],"list-tags":[],"location":[167],"class_list":["post-27706","listing","type-listing","status-publish","has-post-thumbnail","hentry","listing-category-emprendedores","listing-category-artesanal","listing-category-cafe","location-medellin"],"cubewp_post_meta":[],"taxonomies":["Emprendedores","Artesanal","Caf\u00e9","Medell\u00edn"],"_links":{"self":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/listing\/27706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/listing"}],"about":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/types\/listing"}],"author":[{"embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/comments?post=27706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/media\/27707"}],"wp:attachment":[{"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/media?parent=27706"}],"wp:term":[{"taxonomy":"listing-category","embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/listing-category?post=27706"},{"taxonomy":"list-tags","embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/list-tags?post=27706"},{"taxonomy":"location","embeddable":true,"href":"https:\/\/aqifue.com\/en\/wp-json\/wp\/v2\/location?post=27706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}