// app.jsx — ensambla la landing + panel de Tweaks const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "offer": "planes", "largo": "completa", "accent": ["#D4907E", "#B8705E"], "displayFont": "Cormorant Garamond", "showSticky": true }/*EDITMODE-END*/; // Largo de página. El link que comparte Amira por WhatsApp lleva `?v=corta` // (tráfico tibio: vende rápido). La URL manda; si no hay param, vale el tweak // (para previsualizar desde el panel). `?v=completa` fuerza la larga. function getPageLength(tweakValue) { if (typeof window !== "undefined") { const v = new URLSearchParams(window.location.search).get("v"); if (v === "corta" || v === "wa") return "corta"; if (v === "completa" || v === "full") return "completa"; } return tweakValue || "completa"; } const ACCENTS = [ ["#D4907E", "#B8705E"], // Rosé (original) ["#C9A36B", "#A8854E"], // Dorado tierra ["#9A8FB0", "#7C7095"], // Lavanda apagada ["#7A8B6F", "#5F6E55"], // Verde oliva ]; const DISPLAY_FONTS = ["Cormorant Garamond", "Playfair Display", "DM Serif Display"]; function useReveal() { React.useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("visible"); }); }, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }); document.querySelectorAll(".reveal:not(.visible)").forEach((el) => obs.observe(el)); return () => obs.disconnect(); }); } function useNavScroll() { React.useEffect(() => { const nav = document.getElementById("nav"); // Consolidamos el fondo del nav apenas arranca el scroll (no a los 50px): // así el título del hero no llega a "mezclarse" con el nav transparente // durante ese tramo. En reposo (scrollY 0) sigue transparente sobre el hero. const onScroll = () => nav && nav.classList.toggle("scrolled", window.scrollY > 4); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useReveal(); useNavScroll(); React.useEffect(() => { const root = document.documentElement; const acc = Array.isArray(t.accent) ? t.accent : ACCENTS[0]; root.style.setProperty("--accent", acc[0]); root.style.setProperty("--accent-deep", acc[1]); root.style.setProperty("--font-display", `'${t.displayFont}', Georgia, serif`); }, [t.accent, t.displayFont]); const pagina = getPageLength(t.largo); // Marca la variante en para poder scopear estilos (ej. hero full-width // en la corta) sin tocar la página completa. React.useEffect(() => { document.documentElement.classList.toggle("page-corta", pagina === "corta"); }, [pagina]); // Página corta (tráfico tibio/WhatsApp): vende rápido. Hero → qué cambió → // precio arriba → prueba → incluye → FAQ corto → cierre → captura de escape. // Sin TopCallout ni TestCTA para no competir con la compra. const corta = (