Description

/* — ESTILOS GENERALES — */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: ‘Figtree’, sans-serif; color: #333; background-color: #f9f9f9; padding-bottom: 80px; }
img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.container { max-width: 600px; margin: 0 auto; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.05); }

/* — HEADER & ANUNCIO — */
.announcement-bar { background-color: #ff7400; color: #fff; text-align: center; padding: 8px; font-weight: bold; font-family: ‘Oswald’, sans-serif; font-size: 0.9rem; }
.header { padding: 15px; border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 50; }
.header img { max-height: 45px; }

/* — GALERÍA — */
.gallery-container { overflow: hidden; width: 100%; }
.gallery-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery-slider::-webkit-scrollbar { display: none; }
.gallery-item { min-width: 100%; scroll-snap-align: center; }

/* — PRODUCTO INFO — */
.product-info { padding: 20px 20px 10px; text-align: center; }
.product-title { font-family: ‘Oswald’, sans-serif; font-size: 1.4rem; text-transform: uppercase; line-height: 1.3; margin-bottom: 10px; }
.price-container { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0; }
.price-regular { font-size: 1.8rem; font-weight: 800; color: #d32f2f; }
.price-compare { font-size: 1.1rem; text-decoration: line-through; color: #999; }
.badge-offer { background: #d32f2f; color: white; padding: 3px 8px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; }

/* — BLOQUES DE CONTENIDO — */
.section-block { padding: 20px; text-align: center; border-bottom: 1px solid #f0f0f0; }
.section-block h2 { font-family: ‘Oswald’, sans-serif; margin-bottom: 15px; color: #111; line-height: 1.3; }
.section-block p { margin-bottom: 15px; line-height: 1.6; }

/* Hook Promesa */
.hook-title { color: #6f13a5; font-size: 1.3rem; margin-bottom: 10px; display: block; }
.urgency-text { color: #d32f2f; font-weight: bold; background: #fff5f5; padding: 5px; border-radius: 5px; display: inline-block; }

/* Oferta Especial Box */
.offer-box { background: #fff9c4; border: 2px dashed #fbc02d; padding: 20px; border-radius: 10px; margin: 20px 0; }
.offer-item { margin-bottom: 15px; }
.offer-item:last-child { margin-bottom: 0; }
.offer-price { font-size: 1.2rem; font-weight: bold; color: #d32f2f; display: block; margin-top: 5px; }

/* Testimonios y Garantía */
.social-proof-header { background: #e8f5e9; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.guarantee-box { margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px; }

/* — BOTÓN FLOTANTE — */
.sticky-cta { position: fixed; bottom: 15px; left: 15px; right: 15px; z-index: 100; }
.btn-buy { background: #2b852e; color: white; border: 3px solid #fdd835; width: 100%; padding: 16px; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; border-radius: 50px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; gap: 8px; animation: pulse 2s infinite; cursor: pointer; }
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } 50% { transform: scale(1.03); box-shadow: 0 10px 25px rgba(43, 133, 46, 0.4); } 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } }

/* — FOOTER — */
.footer { background: #1a1a1a; color: #fff; padding: 40px 20px; text-align: center; font-size: 0.9rem; }

/* ====== CHECKOUT MODAL (namespaced: k10co-*) ====== */
.k10co-overlay{ position:fixed; inset:0; z-index:9999; display:none; overflow-y:auto; -webkit-overflow-scrolling: touch; padding: 0 0 24px; }
.k10co-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.55); }
.k10co-modal{ position:relative; width:min(720px, calc(100% – 22px)); margin: 16px auto; background:#fff; border-radius: 14px; overflow:hidden; box-shadow: 0 18px 60px rgba(0,0,0,.35); color:#222; }
.k10co-header{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding: 14px 16px; border-bottom: 1px solid #eee; background: #fff; }
.k10co-title{ font-family:’Oswald’, sans-serif; font-size: 1.15rem; letter-spacing:.2px; }
.k10co-sub{ font-size:.88rem; color:#666; margin-top:4px; line-height:1.35; }
.k10co-x{ border:0; background:#f3f3f3; width:36px; height:36px; border-radius:10px; cursor:pointer; font-size: 18px; line-height: 36px; }
.k10co-body{ padding: 14px 16px 16px; }
.k10co-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 520px){ .k10co-grid2{ grid-template-columns:1fr; } }
.k10co-field span{ display:block; font-size:.82rem; font-weight:700; color:#333; margin: 0 0 6px; }
.k10co-field input, .k10co-field select, .k10co-field textarea{ width:100%; border:1px solid #ddd; border-radius: 10px; padding: 11px 12px; font-size: 0.98rem; outline:none; }
.k10co-field textarea{ resize: vertical; }
.k10co-field input:focus, .k10co-field select:focus, .k10co-field textarea:focus{ border-color:#2b852e; box-shadow: 0 0 0 3px rgba(43,133,46,.12); }
.k10co-location{ margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.k10co-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.k10co-btn{ border: 1px solid #ddd; background: #f7f7f7; padding: 10px 12px; border-radius: 12px; font-weight: 800; cursor:pointer; }
.k10co-btn:disabled{ opacity:.6; cursor:not-allowed; }
.k10co-btn-primary{ background: #2b852e; color:#fff; border-color: #2b852e; }
.k10co-status{ margin-top: 10px; padding: 10px 12px; border: 1px solid #eee; background: #fafafa; border-radius: 12px; color:#444; font-size: .9rem; line-height: 1.35; }
.k10co-status.ok{ border-color: rgba(43,133,46,.35); background: rgba(43,133,46,.06); }
.k10co-status.bad{ border-color: rgba(211,47,47,.35); background: rgba(211,47,47,.06); }
.k10co-actions{ display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap; }
.k10co-result{ margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid #eee; background: #fafafa; font-size: .92rem; line-height: 1.35; }
.k10co-map{ width:100%; height: 240px; border-radius: 12px; border: 1px solid #eee; overflow:hidden; background: #f2f2f2; }
.k10co-mapnote{ margin-top:8px; font-size:.82rem; color:#666; line-height:1.35; }
.k10co-hp{ position:absolute !important; left:-9999px !important; top:-9999px !important; height:1px; width:1px; opacity:0; }

/* ====== DEBUG LOGS (visible en pantalla) ====== */
.k10co-debug-head{ margin-top: 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.k10co-debug{ margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #222; background: #0f0f10; color: #eaeaea; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace; font-size: 0.78rem; line-height: 1.35; max-height: 180px; overflow:auto; white-space: pre-wrap; word-break: break-word; }
.k10co-debug strong{ color:#fff; }

🚨 TENDENCIAS EN OFERTAS 🔥 ENVÍOS GRATIS 🎁

🌸NOVEDOSA DEPILADORA PORTATIL ELECTRICA YEST UNISEX🙋‍♂️🙋‍♀️

$52.000
$120.000
OFERTA -57%

🚚 ENVÍO GRATIS A TODO COLOMBIA

🌸 OLVIDATE DEL VELLO Y DISFRUTA DE UNA PIEL INCREIBLE SIN DOLOR

🔴 ¡ÚLTIMAS UNIDADES CON DESCUENTO! 🔴

¡Elimina vellos en zonas sensibles de forma permanente y sin dolor!

✨ TECNOLOGÍA SENS-LIGHT ✨

🔋 RECARGABLE POR USB

¡Olvídate de comprar pilas! Úsala donde quieras.

RESULTADOS INCREÍBLES

Quita el vello de raíz y cuida tu piel.

📣 APROVECHA NUESTRA OFERTA EXCLUSIVA 🏆

🔥 OFERTA: 1 DEPILADORA YEST

POR SOLO $52.000

📦 ENVÍO GRATIS Y PAGO CONTRA ENTREGA

❇️ La original: Más de 3.576 clientes satisfechos ⭐️⭐️⭐️⭐️⭐️

❤️ CLIENTES FELICES

✅ GARANTIA DE TU PRODUCTO 🔐

En nuestra tienda virtual, queremos brindarte productos seguros. Tu [ DEPILADORA YES✨ ] cuenta con una garantía de 30 días a partir de la fecha de compra por defectos de fábrica.

🕟 ENTREGAS DE 2 A 5 DÍAS HÁBILES 🚛

Trabajamos con las transportadoras más cumplidas del país 💛💙❤️

Inicializando…

(function() {
try {
/* ================== CONFIG WOOCOMMERCE ================== */
const PRODUCT_ID = “98”; // ID del producto en WooCommerce
const CHECKOUT_BASE = “/checkout/”; // Ruta base del checkout
const COUNTRY_CODE = “CO”; // Código ISO Colombia para Woo

/* ================== UI REFS ================== */
const openCheckoutBtn = document.getElementById(“openCheckout”);
const overlay = document.getElementById(“k10coOverlay”);
const form = document.getElementById(“k10coForm”);

if (!openCheckoutBtn || !overlay || !form) return;

const closeEls = overlay.querySelectorAll(“[data-k10co-close]”);
const hp = document.getElementById(“k10coWebsite”);
const firstName = document.getElementById(“k10coFirstName”);
const lastName = document.getElementById(“k10coLastName”);
const phone = document.getElementById(“k10coPhone”);
const email = document.getElementById(“k10coEmail”);
const notes = document.getElementById(“k10coNotes”);

const gpsBtn = document.getElementById(“k10coGpsBtn”);
const recenterBtn = document.getElementById(“k10coRecenterBtn”);
const copyBtn = document.getElementById(“k10coCopyBtn”);
const statusBox = document.getElementById(“k10coStatus”);

const cityEl = document.getElementById(“k10coCity”);
const deptEl = document.getElementById(“k10coDepartment”);
const addrEl = document.getElementById(“k10coAddress”);

const mapWrap = document.getElementById(“k10coMapWrap”);
const submitBtn = document.getElementById(“k10coSubmit”);
const resultBox = document.getElementById(“k10coResult”);

/* ===== DEBUG REFS ===== */
const debugEl = document.getElementById(“k10coDebug”);
const debugCopyBtn = document.getElementById(“k10coDebugCopy”);
const debugClearBtn = document.getElementById(“k10coDebugClear”);

/* ================== STATE ================== */
let lastAddress = “”;
let lastCoords = null;
let lastAccuracy = null;
let gpsOriginal = null;
let map = null;
let marker = null;
let accuracyCircle = null;

/* ================== DEBUG HELPERS ================== */
function _ts() {
try { return new Date().toLocaleTimeString(“es-CO”, { hour12: false }); } catch (_) { return “”; }
}
function _safeStringify(x) { try { return JSON.stringify(x); } catch (_) { return String(x); } }
function logLine(level, msg, data) {
if (!debugEl) return;
const line = “[” + _ts() + “] ” + level + “: ” + msg + (typeof data !== “undefined” ? ” | ” + _safeStringify(data) : “”);
const current = debugEl.textContent || “”;
const next = (current ? current + “n” : “”) + line;
debugEl.textContent = next.split(“n”).slice(-220).join(“n”);
try { debugEl.scrollTop = debugEl.scrollHeight; } catch (_) {}
}

if (debugClearBtn) { debugClearBtn.addEventListener(“click”, () => { if(debugEl) debugEl.textContent=””; }); }
if (debugCopyBtn) {
debugCopyBtn.addEventListener(“click”, async () => {
try { await navigator.clipboard.writeText(debugEl.textContent || “”); } catch (e) { alert(“Copia manual requerida”); }
});
}

/* ================== HELPERS ================== */
function setStatus(html, kind) {
statusBox.innerHTML = html;
statusBox.classList.remove(“ok”, “bad”);
if (kind === “ok”) statusBox.classList.add(“ok”);
if (kind === “bad”) statusBox.classList.add(“bad”);
}

function openModal() {
overlay.style.display = “block”;
overlay.setAttribute(“aria-hidden”, “false”);
document.body.style.overflow = “hidden”;
setTimeout(() => firstName.focus(), 50);
}
function closeModal() {
overlay.style.display = “none”;
overlay.setAttribute(“aria-hidden”, “true”);
document.body.style.overflow = “”;
resultBox.style.display = “none”;
}

function formatPrettyAddress(addr) {
const road = addr.road || addr.pedestrian || addr.footway || addr.path || “”;
const house = addr.house_number || “”;
const neighbourhood = addr.neighbourhood || addr.suburb || addr.quarter || “”;
const city = addr.city || addr.town || addr.village || addr.municipality || “”;
const state = addr.state || addr.region || “”;
const postcode = addr.postcode || “”;

// Formato Multilínea solicitado
const line1 = [road, house].filter(Boolean).join(” “);
const line2 = [neighbourhood, city].filter(Boolean).join(“, “);
const line3 = [state, postcode].filter(Boolean).join(” “);
const line4 = “Colombia”; // Hardcoded country
return [line1, line2, line3, line4].filter(Boolean).join(“n”);
}

function extractCityDepartment(addr) {
const city = addr.city || addr.town || addr.village || addr.municipality || addr.county || “”;
const department = addr.state || addr.region || addr.state_district || “”;
return { city, department };
}

/* ================== MAPPING ISO COLOMBIA ================== */
// WooCommerce usa códigos ISO (ej: ANT) no nombres completos.
const CO_ISO_MAP = (function() {
const pairs = [
[“amazonas”, “AMA”], [“antioquia”, “ANT”], [“arauca”, “ARA”], [“atlantico”, “ATL”],
[“bogota”, “DC”], [“bogota dc”, “DC”], [“distrito capital”, “DC”],
[“bolivar”, “BOL”], [“boyaca”, “BOY”], [“caldas”, “CAL”], [“caqueta”, “CAQ”],
[“casanare”, “CAS”], [“cauca”, “CAU”], [“cesar”, “CES”], [“choco”, “CHO”],
[“cordoba”, “COR”], [“cundinamarca”, “CUN”], [“guainia”, “GUA”], [“guaviare”, “GUV”],
[“huila”, “HUI”], [“la guajira”, “LAG”], [“guajira”, “LAG”], [“magdalena”, “MAG”],
[“meta”, “MET”], [“narino”, “NAR”], [“norte de santander”, “NSA”], [“putumayo”, “PUT”],
[“quindio”, “QUI”], [“risaralda”, “RIS”], [“san andres”, “SAP”], [“santander”, “SAN”],
[“sucre”, “SUC”], [“tolima”, “TOL”], [“valle del cauca”, “VAC”], [“valle”, “VAC”],
[“vaupes”, “VAU”], [“vichada”, “VID”]
];
const m = {};
pairs.forEach(([k, v]) => {
const key = k.toLowerCase().normalize(“NFD”).replace(/[u0300-u036f]/g, “”).trim();
m[key] = v;
});
return m;
})();

function getDepartmentCode(rawName) {
const clean = String(rawName || “”).toLowerCase().normalize(“NFD”).replace(/[u0300-u036f]/g, “”).trim()
.replace(/^departamento des+/i, “”);

// Búsqueda directa
for (const k in CO_ISO_MAP) {
if (clean.includes(k)) return CO_ISO_MAP[k];
}
// Fallback: devuelve el nombre original si no encuentra ISO (algunos plugins aceptan el nombre)
return String(rawName).trim();
}

/* ================== GEOLOCATION LOGIC ================== */
async function reverseGeocode(lat, lon) {
const url = “https://nominatim.openstreetmap.org/reverse?format=json&lat=” + lat + “&lon=” + lon + “&zoom=18&addressdetails=1”;
const res = await fetch(url);
if (!res.ok) throw new Error(“HTTP ” + res.status);
return await res.json();
}

function ensureMap() {
if (map || !window.L) return;
mapWrap.style.display = “block”;
map = L.map(“k10coMap”).setView([0, 0], 2);
L.tileLayer(“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”, { maxZoom: 19 }).addTo(map);
map.on(“click”, (e) => movePinTo(e.latlng.lat, e.latlng.lng, lastAccuracy, “📌 Ubicación ajustada”));
setTimeout(() => map.invalidateSize(), 50);
}

function setPin(lat, lon, acc) {
ensureMap();
if (!map) return;
const ll = [lat, lon];
if (!marker) {
marker = L.marker(ll, { draggable: true }).addTo(map);
marker.on(“dragend”, () => {
const p = marker.getLatLng();
movePinTo(p.lat, p.lng, lastAccuracy, “📌 Pin arrastrado”);
});
} else marker.setLatLng(ll);

if (typeof acc === “number”) {
if (!accuracyCircle) accuracyCircle = L.circle(ll, { radius: Math.max(acc, 5) }).addTo(map);
else { accuracyCircle.setLatLng(ll); accuracyCircle.setRadius(Math.max(acc, 5)); }
}
map.setView(ll, 17);
}

async function movePinTo(lat, lon, acc, note) {
lastCoords = { lat, lon };
setPin(lat, lon, acc);

setStatus(“🔄 Buscando dirección…”, “ok”);
try {
const data = await reverseGeocode(lat, lon);
const addr = data.address || {};
const pretty = formatPrettyAddress(addr);

if (pretty) {
lastAddress = pretty;
addrEl.value = pretty;
const x = extractCityDepartment(addr);
if (x.city) cityEl.value = x.city;
if (x.department) deptEl.value = x.department; // Muestra nombre legible en input

copyBtn.style.display = “inline-block”;
setStatus(“✅ Dirección detectada
Ver en Mapa“, “ok”);
}
} catch (e) {
setStatus(“⚠️ Ubicación ok, pero dirección no encontrada.”, “”);
}
}

/* ================== URL BUILDER (WOOCOMMERCE) ================== */
function buildWooCheckoutUrl(data) {
const params = new URLSearchParams();

// 1. Agregar al carrito
params.set(“add-to-cart”, PRODUCT_ID);
params.set(“quantity”, “1”);

// 2. Billing Fields (Estándar WooCommerce)
params.set(“billing_first_name”, data.first_name);
params.set(“billing_last_name”, data.last_name);
params.set(“billing_phone”, data.phone);
params.set(“billing_email”, data.email);
params.set(“billing_country”, COUNTRY_CODE);

// Mapeo de departamento a ISO si es posible
const stateISO = getDepartmentCode(data.province);
params.set(“billing_state”, stateISO);

params.set(“billing_city”, data.city);

// Dirección completa en Address 1 como solicitado
params.set(“billing_address_1”, data.address_full);

// Notas del pedido
if (data.note) params.set(“order_comments”, data.note);

// GPS Data (como custom fields si tu Woo los soporta, sino se ignoran)
if (data.gps_lat) params.set(“billing_gps_lat”, data.gps_lat);
if (data.gps_lon) params.set(“billing_gps_lon”, data.gps_lon);

return location.origin + CHECKOUT_BASE + “?” + params.toString();
}

/* ================== EVENTS ================== */
openCheckoutBtn.addEventListener(“click”, openModal);
closeEls.forEach(el => el.addEventListener(“click”, closeModal));

gpsBtn.addEventListener(“click”, () => {
if (!navigator.geolocation) return alert(“GPS no soportado”);
gpsBtn.disabled = true;
gpsBtn.textContent = “⏳ Buscando…”;

navigator.geolocation.getCurrentPosition(
(pos) => {
const { latitude, longitude, accuracy } = pos.coords;
lastAccuracy = accuracy;
gpsOriginal = { lat: latitude, lon: longitude, acc: accuracy };
movePinTo(latitude, longitude, accuracy, “GPS OK”);
gpsBtn.disabled = false;
gpsBtn.textContent = “📍 Detectar de nuevo”;
recenterBtn.style.display = “inline-block”;
recenterBtn.onclick = () => movePinTo(gpsOriginal.lat, gpsOriginal.lon, gpsOriginal.acc);
},
(err) => {
alert(“Error GPS: ” + err.message);
gpsBtn.disabled = false;
gpsBtn.textContent = “📍 Reintentar GPS”;
},
{ enableHighAccuracy: true, timeout: 15000 }
);
});

copyBtn.addEventListener(“click”, () => {
navigator.clipboard.writeText(addrEl.value);
alert(“Dirección copiada”);
});

form.addEventListener(“submit”, (e) => {
e.preventDefault();
if (hp.value) return; // honeypot

const first = firstName.value.trim();
const last = lastName.value.trim();
const ph = phone.value.replace(/[^d+]/g, “”).trim();
const em = email.value.trim();
const ci = cityEl.value.trim();
const dp = deptEl.value.trim();
const ad = addrEl.value.trim(); // Dirección multilínea completa
const nt = notes.value.trim();

if (!first || !last || !ph || !ci || !dp || !ad) {
return alert(“Por favor completa todos los campos obligatorios.”);
}

submitBtn.disabled = true;
submitBtn.textContent = “⏳ Procesando…”;

const data = {
first_name: first,
last_name: last,
phone: ph,
email: em,
city: ci,
province: dp,
address_full: ad,
note: nt,
gps_lat: lastCoords ? String(lastCoords.lat.toFixed(6)) : “”,
gps_lon: lastCoords ? String(lastCoords.lon.toFixed(6)) : “”
};

try {
const url = buildWooCheckoutUrl(data);
logLine(“INFO”, “Redirigiendo a Woo”, { url });
window.location.href = url;
} catch (err) {
alert(“Error al generar enlace: ” + err.message);
submitBtn.disabled = false;
}
});

} catch (fatal) {
console.error(“Fatal error”, fatal);
}
})();