{"id":94,"date":"2025-09-24T05:39:42","date_gmt":"2025-09-24T05:39:42","guid":{"rendered":"https:\/\/vainillaintelligence.com\/?page_id=94"},"modified":"2025-09-24T05:56:48","modified_gmt":"2025-09-24T05:56:48","slug":"como-funciona","status":"publish","type":"page","link":"https:\/\/vainillaintelligence.com\/en\/como-funciona\/","title":{"rendered":"C\u00f3mo Funciona"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"94\" class=\"elementor elementor-94\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d4322ba e-con-full e-flex e-con e-parent\" data-id=\"d4322ba\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e03964b elementor-widget elementor-widget-html\" data-id=\"e03964b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========== VAINILLA INTELLIGENCE \u2013 DEMO E2E (Elementor Ready, no deps) =========== -->\n<section id=\"vi-app\" class=\"vi-wrap\" aria-label=\"Vainilla Intelligence \u2013 Demo E2E\">\n\n  <!-- ======================= STYLES ======================= -->\n  <style>\n    \/* --------- Theme --------- *\/\n    #vi-app{\n      --bg1:#0f0d15; --bg2:#131022;\n      --txt:#ffffff; --txt2:#cfcfe6; --muted:#a8a8b3;\n      --violet:#5A35E5; --violet2:#7C4DFF; --violet3:#8B5CF6; --violetDeep:#3D2B7A;\n      --gold:#F3B14B; --green:#10B981; --red:#EF4444; --amber:#F59E0B;\n      --glass:rgba(255,255,255,0.06); --glass2:rgba(255,255,255,0.03);\n      --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.06);\n      --shadow:0 18px 60px rgba(0,0,0,.35); --radius:22px; --maxw:1200px;\n      color:var(--txt); overflow:hidden; position:relative;\n      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, \"Helvetica Neue\", Arial;\n      background:\n        radial-gradient(1200px 800px at 80% -10%, rgba(124,77,255,0.22), transparent 60%),\n        radial-gradient(900px 600px at -10% 20%, rgba(139,92,246,0.20), transparent 55%),\n        linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 60%, var(--bg2) 100%);\n    }\n    .vi-container{width:min(100%, var(--maxw)); margin:0 auto; padding:0 20px;}\n    .vi-kicker{color:var(--gold); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px}\n    .vi-title{font-size:clamp(32px,5vw,64px); line-height:1.04; letter-spacing:-.02em; margin:6px 0 10px}\n    .vi-lead{color:var(--txt2); font-size:clamp(15px,1.6vw,18px); max-width:64ch}\n    .vi-btn{display:inline-block; padding:12px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.14); color:var(--txt); background:rgba(255,255,255,.04); text-decoration:none; font-weight:700; position:relative; z-index:2}\n    .vi-btn.primary{background:linear-gradient(135deg, var(--violet), var(--violet2)); border-color:rgba(124,77,255,.55); box-shadow:0 10px 24px rgba(124,77,255,.35)}\n    .vi-chip{padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-size:12.5px; cursor:pointer}\n    .vi-chip:hover{background:linear-gradient(135deg,var(--violet),var(--violet2)); border-color:rgba(124,77,255,.55)}\n    .grid{display:grid; gap:16px}\n    .panel{border:1px solid var(--border); background:linear-gradient(180deg, var(--glass), var(--glass2)); border-radius:20px; padding:16px; box-shadow:var(--shadow)}\n    .tag{font-size:11px; opacity:.8; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}\n\n    \/* Header *\/\n    .vi-header{position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(255,255,255,.08);\n      background:linear-gradient(180deg, rgba(10,8,20,.6), rgba(10,8,20,.2)); backdrop-filter:saturate(120%) blur(8px)}\n    .vi-nav{display:flex; align-items:center; justify-content:space-between; height:64px}\n    .brand{display:flex; align-items:center; gap:12px; font-weight:900}\n    .logo{width:28px; height:28px; border-radius:9px; background:conic-gradient(from 210deg, var(--violet) 0 25%, var(--violet2) 25% 55%, var(--violet3) 55% 85%, var(--gold) 85% 100%); box-shadow:0 0 24px rgba(124,77,255,.35)}\n    .nav a{color:var(--txt2); text-decoration:none; margin-left:18px; font-size:14.5px}\n    .nav .cta{padding:10px 16px; border-radius:14px; color:#0f0d15; background:linear-gradient(135deg, var(--gold), #ffd27a); font-weight:800; box-shadow:0 10px 24px rgba(243,177,75,.25)}\n\n    \/* Hero *\/\n    .hero{position:relative; padding:90px 0 70px; z-index:1}\n    #bg{position:absolute; inset:0; display:block; pointer-events:none; z-index:0}\n    .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}\n    .scene{position:relative; height:420px; border-radius:18px; overflow:hidden; background:\n      radial-gradient(600px 360px at 15% 10%, rgba(139,92,246,.22), transparent 60%),\n      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02))}\n    #net{position:absolute; inset:0; display:block; pointer-events:none; z-index:0}\n    .orb{position:absolute; left:55%; top:52%; width:260px; height:260px; border-radius:50%; opacity:.88; mix-blend-mode:screen; pointer-events:none;\n      background:radial-gradient(circle at 30% 30%, #fff, #d9c8ff 25%, #9f82ff 45%, #5a35e5 70%, #2a1b6c 100%); animation:f 12s ease-in-out infinite; z-index:0}\n    @keyframes f{0%,100%{transform:translate(-10px,-8px)}50%{transform:translate(6px,6px)}}\n    .kpis{position:absolute; inset:0; pointer-events:none; z-index:1}\n    .kpi{position:absolute; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:12.5px; box-shadow:0 6px 18px rgba(0,0,0,.25); backdrop-filter:blur(6px)}\n\n    \/* Tabs + charts *\/\n    .section{padding:70px 0}\n    .tabs{display:flex; gap:8px; flex-wrap:wrap}\n    .tab{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:12.5px; cursor:pointer}\n    .tab.active{background:linear-gradient(135deg, var(--violet), var(--violet2)); border-color:rgba(124,77,255,.6)}\n    .chart{height:240px; width:100%; display:block; border-radius:14px}\n    .grid-2{grid-template-columns:1fr 1fr}\n    .grid-3{grid-template-columns:repeat(3,1fr)}\n    .grid-4{grid-template-columns:repeat(4,1fr)}\n    .kpis-row{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}\n    .kcard{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px}\n    .kval{font-weight:900; font-size:22px}\n    .up{color:var(--green)} .down{color:var(--red)}\n\n    \/* Copilot *\/\n    .copilot{display:grid; grid-template-rows:auto auto 1fr auto; gap:10px; min-height:340px}\n    .cop-head{display:flex; align-items:center; gap:10px; font-size:14px}\n    .cop-head .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#ffd27a); box-shadow:0 0 12px rgba(243,177,75,.8)}\n    .cop-head .status{margin-left:auto; color:var(--txt2); font-size:12px; opacity:.9}\n    .presets{display:flex; flex-wrap:wrap; gap:8px}\n    .chatlog{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid var(--border2); border-radius:14px; padding:12px; overflow:auto}\n    .msg{display:flex; margin:8px 0}\n    .msg .b{max-width:80%; padding:10px 12px; border-radius:14px; font-size:13.5px; line-height:1.35}\n    .msg.user .b{margin-left:auto; background:linear-gradient(135deg,#2a1b6c,#3d2b7a); border:1px solid rgba(139,92,246,.35)}\n    .msg.bot .b{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14)}\n    .chatbar{display:flex; gap:8px; margin-top:8px}\n    #q{flex:1; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff; padding:10px 12px; outline:none}\n    #q::placeholder{color:var(--txt2)}\n    .send{padding:10px 14px; border-radius:12px; border:1px solid rgba(243,177,75,.55); background:linear-gradient(135deg, var(--gold), #ffd27a); color:#0f0d15; font-weight:800; cursor:pointer}\n\n    \/* Tables *\/\n    table{width:100%; border-collapse:separate; border-spacing:0; color:var(--txt2); font-size:13.5px}\n    th,td{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08)}\n    th{color:#fff; text-align:left}\n    tr:last-child td{border-bottom:none}\n\n    \/* Gauges\/Badges *\/\n    .gauge{height:160px; width:100%}\n    .badge{padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); font-size:11px}\n\n    \/* Responsive *\/\n    @media (max-width: 980px){\n      .hero-grid{grid-template-columns:1fr; gap:24px}\n      .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}\n      .kpis-row{grid-template-columns:repeat(2,1fr)}\n    }\n  <\/style>\n\n  <!-- ======================= HEADER ======================= -->\n  <header class=\"vi-header\">\n    <div class=\"vi-container vi-nav\">\n      <div class=\"brand\"><div class=\"logo\" aria-hidden=\"true\"><\/div><span>Vainilla Intelligence<\/span><\/div>\n      <nav class=\"nav\">\n        <a href=\"#diagnostico\">Diagn\u00f3stico<\/a>\n        <a href=\"#estrategia\">Estrategia<\/a>\n        <a href=\"#ejecucion\">Ejecuci\u00f3n<\/a>\n        <a class=\"cta\" href=\"https:\/\/www.studiovainilla.com\/marketing-digital\">Quiero Marketing<\/a>\n      <\/nav>\n    <\/div>\n  <\/header>\n\n  <!-- ======================= HERO + COPILOT ======================= -->\n  <div class=\"vi-container hero\">\n    <canvas id=\"bg\" aria-hidden=\"true\"><\/canvas>\n    <div class=\"hero-grid\">\n      <div>\n        <span class=\"vi-chip\">Demo: Caf\u00e9 Aurora (D2C)<\/span>\n        <h1 class=\"vi-title\">El marketing que <span style=\"background:linear-gradient(90deg,var(--violet3),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent\">piensa<\/span> con datos.<\/h1>\n        <p class=\"vi-lead\">Con Vainilla Intelligence elegimos un objetivo y se traduce en OKRs, plan de medios, parrilla y resultados \u2014 end-to-end, sobre datos reales.<\/p>\n        <div style=\"display:flex;gap:12px; margin-top:18px\">\n          <a class=\"vi-btn primary\" href=\"#diagnostico\">Ver recorrido<\/a>\n          <a class=\"vi-btn\" href=\"#estrategia\">Ir a estrategia<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"panel\">\n        <div class=\"scene\" id=\"scene\">\n          <canvas id=\"net\" aria-hidden=\"true\"><\/canvas>\n          <div class=\"orb\" aria-hidden=\"true\"><\/div>\n          <div class=\"kpis\" aria-hidden=\"true\">\n            <span class=\"kpi\" style=\"left:8%; top:14%\">CTR <b>1.2%<\/b><\/span>\n            <span class=\"kpi\" style=\"left:70%; top:20%\">ROAS <b>3.1x<\/b><\/span>\n            <span class=\"kpi\" style=\"left:18%; top:70%\">CVR <b>2.1%<\/b><\/span>\n            <span class=\"kpi\" style=\"left:62%; top:72%\">CPC <b>$3.4<\/b><\/span>\n            <span class=\"kpi\" style=\"left:38%; top:40%\">AOV <b>$28<\/b><\/span>\n          <\/div>\n        <\/div>\n        <p class=\"vi-lead\" style=\"font-size:13.5px;margin-top:10px\">Red neuronal + KPIs flotantes: pensamiento de marca en tiempo real (demo).<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ======================= DIAGN\u00d3STICO ======================= -->\n  <section id=\"diagnostico\" class=\"vi-container section\">\n    <p class=\"vi-kicker\">Diagn\u00f3stico<\/p>\n    <h2 class=\"vi-title\" style=\"font-size:clamp(28px,3.8vw,42px)\">D\u00f3nde estamos parados (base 30 d\u00edas)<\/h2>\n    <div class=\"kpis-row\" style=\"margin:16px 0 10px\">\n      <div class=\"kcard\"><div class=\"tag\">CTR<\/div><div class=\"kval\">1.2%<\/div><div class=\"up\">+0.1pp<\/div><\/div>\n      <div class=\"kcard\"><div class=\"tag\">CPC<\/div><div class=\"kval\">$3.4<\/div><div class=\"down\">-0.2<\/div><\/div>\n      <div class=\"kcard\"><div class=\"tag\">CVR<\/div><div class=\"kval\">2.1%<\/div><div class=\"down\">-0.1pp<\/div><\/div>\n      <div class=\"kcard\"><div class=\"tag\">ROAS<\/div><div class=\"kval\">3.1x<\/div><div class=\"up\">+0.2x<\/div><\/div>\n      <div class=\"kcard\"><div class=\"tag\">AOV<\/div><div class=\"kval\">$28<\/div><div class=\"up\">+1.3<\/div><\/div>\n    <\/div>\n\n    <div class=\"grid grid-2\" style=\"margin-top:10px\">\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Tendencia de engagement<\/h3>\n        <canvas id=\"ch-line\" class=\"chart\" aria-label=\"L\u00ednea\"><\/canvas>\n      <\/div>\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Rendimiento por formato<\/h3>\n        <canvas id=\"ch-bars\" class=\"chart\" aria-label=\"Barras\"><\/canvas>\n      <\/div>\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Distribuci\u00f3n de inversi\u00f3n<\/h3>\n        <canvas id=\"ch-donut\" class=\"chart\" aria-label=\"Donut\"><\/canvas>\n      <\/div>\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">KPI por canal<\/h3>\n        <table>\n          <thead><tr><th>Canal<\/th><th>CTR<\/th><th>CPC<\/th><th>CVR<\/th><th>CPA<\/th><th>ROAS<\/th><\/tr><\/thead>\n          <tbody>\n            <tr><td>Meta Ads<\/td><td>1.3%<\/td><td>$3.2<\/td><td>2.1%<\/td><td>$14.5<\/td><td>3.0x<\/td><\/tr>\n            <tr><td>Google Search<\/td><td>2.4%<\/td><td>$2.9<\/td><td>2.6%<\/td><td>$12.3<\/td><td>3.4x<\/td><\/tr>\n            <tr><td>PMAX<\/td><td>1.1%<\/td><td>$3.6<\/td><td>3.1%<\/td><td>$11.8<\/td><td>3.6x<\/td><\/tr>\n            <tr><td>TikTok<\/td><td>1.5%<\/td><td>$2.7<\/td><td>1.8%<\/td><td>$15.1<\/td><td>2.8x<\/td><\/tr>\n          <\/tbody>\n        <\/table>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ======================= ESTRATEGIA \/ PLAYBOOK ======================= -->\n  <section id=\"estrategia\" class=\"vi-container section\">\n    <p class=\"vi-kicker\">Estrategia<\/p>\n    <h2 class=\"vi-title\" style=\"font-size:clamp(28px,3.8vw,42px)\">Playbook 6 semanas (OKR + media mix)<\/h2>\n\n    <div class=\"grid grid-2\">\n      <div class=\"panel copilot\">\n        <div class=\"cop-head\"><span class=\"dot\"><\/span><strong>Vainilla Intelligence Copilot<\/strong><span class=\"status\">online<\/span><\/div>\n        <div class=\"presets\">\n          <button class=\"vi-chip\" data-prompt=\"Genera OKRs y un plan de medios para +25% ingresos en 6 semanas, CPA \u2264 $11 y ROAS \u2265 3.8x.\">OKRs<\/button>\n          <button class=\"vi-chip\" data-prompt=\"Prop\u00f3n una Parrilla de 14\u201320 posts con formato, objetivo y KPI.\">Parrilla<\/button>\n          <button class=\"vi-chip\" data-prompt=\"Define buckets Prospecting\/Remarketing\/Retenci\u00f3n con % y KPIs esperados.\">Media mix<\/button>\n          <button class=\"vi-chip\" data-prompt=\"Activa alertas: CPC>$3.5, Frecuencia>3.2, CVR<2% por 24h.\">Alertas<\/button>\n        <\/div>\n        <div id=\"chat\" class=\"chatlog\"><\/div>\n        <form id=\"chat-form\" class=\"chatbar\">\n          <input id=\"q\" type=\"text\" placeholder=\"P\u00eddele a Vainilla Intelligence\u2026\">\n          <button class=\"send\" type=\"submit\">Enviar<\/button>\n        <\/form>\n      <\/div>\n\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Media mix (semanas 1\u20132)<\/h3>\n        <table>\n          <thead><tr><th>Bucket<\/th><th>% Presupuesto<\/th><th>Canales<\/th><th>KPIs esperados<\/th><\/tr><\/thead>\n          <tbody>\n            <tr><td>Prospecting<\/td><td>55%<\/td><td>Meta Reels, TikTok<\/td><td>CTR 1.6%, CPC $3.0<\/td><\/tr>\n            <tr><td>Remarketing<\/td><td>35%<\/td><td>Meta + PMAX<\/td><td>CVR 2.6%, ROAS 3.9x<\/td><\/tr>\n            <tr><td>Retenci\u00f3n<\/td><td>10%<\/td><td>Email\/SMS<\/td><td>AOV $30, Repeat +8%<\/td><\/tr>\n          <\/tbody>\n        <\/table>\n        <div style=\"margin-top:12px\"><span class=\"badge\">Objetivo 6 semanas<\/span> ROAS \u2265 3.8x \u2022 CPA \u2264 $11 \u2022 CVR \u2265 2.6%<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"panel\" style=\"margin-top:16px\">\n      <h3 style=\"margin:6px 0 10px\">Parrilla inteligente (extracto 6\/14)<\/h3>\n      <table>\n        <thead><tr><th>Fecha<\/th><th>Formato<\/th><th>Concepto<\/th><th>Objetivo<\/th><th>KPI<\/th><\/tr><\/thead>\n        <tbody>\n          <tr><td>Lun<\/td><td>Reels<\/td><td>Del grano a la taza<\/td><td>Awareness<\/td><td>Alcance<\/td><\/tr>\n          <tr><td>Mar<\/td><td>Carrusel<\/td><td>3 m\u00e9todos de extracci\u00f3n<\/td><td>Consideraci\u00f3n<\/td><td>Guardados<\/td><\/tr>\n          <tr><td>Mi\u00e9<\/td><td>Foto<\/td><td>Hero + copy corto<\/td><td>Engagement<\/td><td>Interacciones<\/td><\/tr>\n          <tr><td>Jue<\/td><td>UGC Reels<\/td><td>Testimonio Suscripci\u00f3n<\/td><td>Conversi\u00f3n<\/td><td>Clics<\/td><\/tr>\n          <tr><td>Vie<\/td><td>Story<\/td><td>Quiz \u201c\u00bfC\u00f3mo tomas tu caf\u00e9?\u201d<\/td><td>Consideraci\u00f3n<\/td><td>Respuestas<\/td><\/tr>\n          <tr><td>S\u00e1b<\/td><td>Reels<\/td><td>Antes\/Despu\u00e9s cold brew<\/td><td>Awareness<\/td><td>Alcance<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n  <\/section>\n\n  <!-- ======================= SIMULADOR DE PRESUPUESTO + HEATMAP ======================= -->\n  <section id=\"sim\" class=\"vi-container section\">\n    <p class=\"vi-kicker\">Plan de medios<\/p>\n    <h2 class=\"vi-title\" style=\"font-size:clamp(28px,3.8vw,42px)\">Simula reasignaciones y ve el impacto<\/h2>\n    <div class=\"grid grid-2\">\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Simulador: mover % de Story \u2192 Reels<\/h3>\n        <div style=\"display:flex; gap:12px; align-items:center\">\n          <input id=\"sim-slider\" type=\"range\" min=\"0\" max=\"20\" step=\"1\" value=\"8\" style=\"width:60%\">\n          <span class=\"tag\"><b id=\"sim-val\">8%<\/b> reasignado<\/span>\n        <\/div>\n        <div class=\"kpis-row\" style=\"margin-top:12px\">\n          <div class=\"kcard\"><div class=\"tag\">CTR proyectado<\/div><div id=\"sim-ctr\" class=\"kval\">1.4%<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">CPC proyectado<\/div><div id=\"sim-cpc\" class=\"kval\">$3.15<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">CVR proyectado<\/div><div id=\"sim-cvr\" class=\"kval\">2.35%<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">ROAS proyectado<\/div><div id=\"sim-roas\" class=\"kval\">3.4x<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">Impacto<\/div><div id=\"sim-impact\" class=\"kval up\">+0.3x<\/div><\/div>\n        <\/div>\n        <p class=\"vi-lead\" style=\"font-size:13.5px\">Proyecci\u00f3n demo: por cada 8% movido de Story \u2192 Reels, ROAS \u2191 ~0.3x, CPC \u2193 ~$0.25.<\/p>\n      <\/div>\n\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Heatmap: mejor d\u00eda \/ hora (demo)<\/h3>\n        <canvas id=\"ch-heat\" class=\"chart\" style=\"height:260px\" aria-label=\"Heatmap\"><\/canvas>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ======================= EJECUCI\u00d3N + ALERTAS + A\/B ======================= -->\n  <section id=\"ejecucion\" class=\"vi-container section\">\n    <p class=\"vi-kicker\">Ejecuci\u00f3n<\/p>\n    <h2 class=\"vi-title\" style=\"font-size:clamp(28px,3.8vw,42px)\">Operando, midiendo y aprendiendo<\/h2>\n\n    <div class=\"grid grid-3\">\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Semana 1 (live demo)<\/h3>\n        <div class=\"kpis-row\">\n          <div class=\"kcard\"><div class=\"tag\">Spend<\/div><div id=\"wk-spend\" class=\"kval\">$3,000<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">Revenue<\/div><div id=\"wk-rev\" class=\"kval\">$10,200<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">ROAS<\/div><div id=\"wk-roas\" class=\"kval\">3.4x<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">CPA<\/div><div id=\"wk-cpa\" class=\"kval\">$12.1<\/div><\/div>\n          <div class=\"kcard\"><div class=\"tag\">CVR<\/div><div id=\"wk-cvr\" class=\"kval\">2.35%<\/div><\/div>\n        <\/div>\n        <canvas id=\"ch-week\" class=\"chart\" style=\"height:180px;margin-top:10px\"><\/canvas>\n      <\/div>\n\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Alertas (accionables)<\/h3>\n        <ul id=\"alerts\" style=\"list-style:none; padding:0; margin:0\">\n          <li class=\"panel\" style=\"padding:10px; margin-bottom:10px\">\n            <div><span class=\"badge\" style=\"border-color:rgba(245,158,11,.6);color:#ffd27a\">CPC<\/span> Story +18% sobre base 7d<\/div>\n            <div style=\"margin-top:6px; display:flex; gap:8px\">\n              <button class=\"vi-chip\" data-action=\"pause\">Pausar S3\/S5<\/button>\n              <button class=\"vi-chip\" data-action=\"lower\">Bajar 10% presupuesto<\/button>\n            <\/div>\n          <\/li>\n          <li class=\"panel\" style=\"padding:10px\">\n            <div><span class=\"badge\" style=\"border-color:rgba(16,185,129,.6);color:#a7f3d0\">Frecuencia<\/span> Reels = 3.6 (alto)<\/div>\n            <div style=\"margin-top:6px; display:flex; gap:8px\">\n              <button class=\"vi-chip\" data-action=\"rotate\">Rotar creativos<\/button>\n              <button class=\"vi-chip\" data-action=\"lower\">Bajar 10% presupuesto<\/button>\n            <\/div>\n          <\/li>\n        <\/ul>\n        <div id=\"alert-log\" class=\"tag\" style=\"display:block; margin-top:8px\">Log vac\u00edo.<\/div>\n      <\/div>\n\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Experimento A\/B (hook)<\/h3>\n        <canvas id=\"ch-ab\" class=\"chart\" aria-label=\"AB\"><\/canvas>\n        <div style=\"margin-top:8px\"><span class=\"badge\">Recomendaci\u00f3n<\/span> Promover <b>Variante B<\/b> al 80% (CTR +14%, p\u22480.06).<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ======================= COHORTES + RESULTADOS ======================= -->\n  <section id=\"resultados\" class=\"vi-container section\">\n    <p class=\"vi-kicker\">Resultados<\/p>\n    <h2 class=\"vi-title\" style=\"font-size:clamp(28px,3.8vw,42px)\">Cierre 6 semanas vs OKR<\/h2>\n\n    <div class=\"grid grid-2\">\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">Cohortes (retenci\u00f3n 30\/60d)<\/h3>\n        <canvas id=\"ch-cohort\" class=\"chart\" aria-label=\"Cohortes\"><\/canvas>\n        <div style=\"margin-top:8px\"><span class=\"badge\">Insight<\/span> PMAX trae mayor AOV y mejor LTV a 60 d\u00edas.<\/div>\n      <\/div>\n      <div class=\"panel\">\n        <h3 style=\"margin:6px 0 10px\">OKRs<\/h3>\n        <div class=\"grid grid-3\">\n          <div><canvas id=\"g-roas\" class=\"gauge\"><\/canvas><div style=\"text-align:center\">ROAS \u2265 3.8x<\/div><\/div>\n          <div><canvas id=\"g-cpa\" class=\"gauge\"><\/canvas><div style=\"text-align:center\">CPA \u2264 $11<\/div><\/div>\n          <div><canvas id=\"g-cvr\" class=\"gauge\"><\/canvas><div style=\"text-align:center\">CVR \u2265 2.6%<\/div><\/div>\n        <\/div>\n        <p class=\"vi-lead\" style=\"font-size:13.5px; margin-top:8px\">Resultado demo: ROAS 3.9x, CPA $10.6, CVR 2.7% \u2192 <b style=\"color:var(--green)\">OKR cumplido (+27% ingresos)<\/b>.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ======================= CTA FINAL ======================= -->\n  <section id=\"demo-cta\" class=\"vi-container section\" style=\"padding-bottom:80px\">\n    <div class=\"panel\" style=\"display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px\">\n      <div>\n        <p class=\"vi-kicker\">Empecemos<\/p>\n        <h2 class=\"vi-title\" style=\"font-size:clamp(28px,3.8vw,42px)\">\u00bfListo para ver tu propio caso?<\/h2>\n        <p class=\"vi-lead\">Conectamos tu hist\u00f3rico y en d\u00edas ver\u00e1s estrategias accionables, optimizaciones autom\u00e1ticas y contenido listo para mover tus m\u00e9tricas.<\/p>\n      <\/div>\n      <a href=\"https:\/\/s.vlla.mx\/Asesores-Vainilla\" class=\"vi-btn primary\">Solicitar Asesor\u00eda<\/a>\n    <\/div>\n  <\/section>\n\n  <!-- ======================= JS ======================= -->\n  <script>\n    (function(){\n      const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n      \/* ---------- Hero particles (in hero only) ---------- *\/\n      const hero = document.querySelector('.hero');\n      const bg = document.getElementById('bg'), bctx = bg.getContext('2d');\n      let bw=0,bh=0,bdpr=1, dots=[];\n      function bgResize(){\n        if(!hero) return;\n        bdpr=Math.min(window.devicePixelRatio||1,2);\n        const rect = hero.getBoundingClientRect();\n        bw = bg.width  = rect.width * bdpr; bh = bg.height = rect.height * bdpr;\n        bg.style.width=rect.width+'px'; bg.style.height=rect.height+'px';\n        dots = Array.from({length: 70}, ()=>({x:Math.random()*bw, y:Math.random()*bh, vx:(Math.random()-.5)*.25, vy:(Math.random()-.5)*.25}));\n      }\n      function bgTick(){\n        bctx.clearRect(0,0,bw,bh);\n        for(const p of dots){\n          p.x+=p.vx; p.y+=p.vy; if(p.x<0||p.x>bw) p.vx*=-1; if(p.y<0||p.y>bh) p.vy*=-1;\n          const g=bctx.createRadialGradient(p.x,p.y,0,p.x,p.y,60);\n          g.addColorStop(0,'rgba(124,77,255,0.12)'); g.addColorStop(1,'rgba(124,77,255,0)');\n          bctx.fillStyle=g; bctx.beginPath(); bctx.arc(p.x,p.y,60,0,Math.PI*2); bctx.fill();\n        }\n        requestAnimationFrame(bgTick);\n      }\n      bgResize(); if(!reduced){ bgTick(); } window.addEventListener('resize', bgResize);\n\n      \/* ---------- Neural net in hero ---------- *\/\n      const scene = document.getElementById('scene');\n      const net = document.getElementById('net'), nctx = net.getContext('2d');\n      let nw=0,nh=0,ndpr=1, pts=[];\n      function netResize(){\n        ndpr=Math.min(window.devicePixelRatio||1,2);\n        const rect = scene.getBoundingClientRect();\n        nw = net.width = rect.width * ndpr; nh = net.height = rect.height * ndpr;\n        net.style.width = rect.width+'px'; net.style.height = rect.height+'px';\n        pts = Array.from({length: 40}, ()=>({x:Math.random()*nw,y:Math.random()*nh,vx:(Math.random()-.5)*.35,vy:(Math.random()-.5)*.35}));\n      }\n      function netDraw(){\n        nctx.clearRect(0,0,nw,nh);\n        for(let i=0;i<pts.length;i++){\n          for(let j=i+1;j<pts.length;j++){\n            const a=pts[i], b=pts[j], dx=a.x-b.x, dy=a.y-b.y, d=Math.hypot(dx,dy), max=150*ndpr;\n            if(d<max){ const alpha=1-d\/max; nctx.strokeStyle=`rgba(139,92,246,${0.24*alpha})`; nctx.lineWidth=1; nctx.beginPath(); nctx.moveTo(a.x,a.y); nctx.lineTo(b.x,b.y); nctx.stroke(); }\n          }\n        }\n        for(const p of pts){ p.x+=p.vx; p.y+=p.vy; if(p.x<0||p.x>nw) p.vx*=-1; if(p.y<0||p.y>nh) p.vy*=-1; nctx.fillStyle='rgba(243,177,75,.85)'; nctx.beginPath(); nctx.arc(p.x,p.y,1.6*ndpr,0,Math.PI*2); nctx.fill(); }\n        requestAnimationFrame(netDraw);\n      }\n      netResize(); if(!reduced){ netDraw(); } window.addEventListener('resize', netResize);\n\n      \/* ---------- Charts (line, bars, donut) ---------- *\/\n      const Line = (el, opts={})=>{\n        const ctx = el.getContext('2d'); let w,h,dpr=1,t=0;\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const points = new Array(60).fill(0); const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));\n        const draw=()=>{\n          for(let i=0;i<points.length;i++){\n            const x=(i\/points.length)*Math.PI*2 + t;\n            const base=45 + Math.sin(x)*12 + Math.sin(x*0.5+1.7)*6 + (Math.random()-.5)*2;\n            points[i]=clamp(base,5,95);\n          }\n          ctx.clearRect(0,0,w,h);\n          const pad=24*dpr, ww=w-pad*2, hh=h-pad*2;\n          ctx.strokeStyle='rgba(255,255,255,.08)'; ctx.lineWidth=1;\n          for(let i=0;i<4;i++){ const y=pad+(i\/3)*hh; ctx.beginPath(); ctx.moveTo(pad,y); ctx.lineTo(pad+ww,y); ctx.stroke(); }\n          ctx.beginPath();\n          for(let i=0;i<points.length;i++){\n            const xv=pad+(i\/(points.length-1))*ww;\n            const yv=pad+hh-(points[i]\/100)*hh;\n            i?ctx.lineTo(xv,yv):ctx.moveTo(xv,yv);\n          }\n          ctx.strokeStyle='rgba(139,92,246,.95)'; ctx.lineWidth=2; ctx.stroke();\n          ctx.strokeStyle='rgba(124,77,255,.35)'; ctx.lineWidth=6; ctx.globalAlpha=.35; ctx.stroke(); ctx.globalAlpha=1;\n          t += reduced ? 0.008 : 0.035; requestAnimationFrame(draw);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      };\n      const Bars = (el, base=[68,52,80,44], labels=['Reels','Carrusel','Foto','Story'])=>{\n        const ctx = el.getContext('2d'); let w,h,dpr=1,ph=[0,1.3,2.1,2.9];\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));\n        const draw=()=>{\n          ctx.clearRect(0,0,w,h);\n          const pad=24*dpr, ww=w-pad*2, hh=h-pad*2, bwid=ww\/(labels.length*1.4);\n          for(let i=0;i<labels.length;i++){\n            const amp=base[i]*0.08; const offset=Math.sin(ph[i])*amp; const val=clamp(base[i]+offset,5,100); ph[i]+=reduced?0.015:0.045;\n            const x=pad + i*(bwid*1.4) + bwid*0.2; const y=pad + hh - (val\/100)*hh;\n            const grad=ctx.createLinearGradient(0,y,0,pad+hh); grad.addColorStop(0,'rgba(139,92,246,.95)'); grad.addColorStop(1,'rgba(90,53,229,.9)');\n            ctx.fillStyle=grad; ctx.fillRect(x,y,bwid,(val\/100)*hh);\n            ctx.globalAlpha=.25; ctx.fillStyle='rgba(124,77,255,.6)'; ctx.fillRect(x,y-6*dpr,bwid,6*dpr); ctx.globalAlpha=1;\n            ctx.fillStyle='rgba(255,255,255,.85)'; ctx.font=(12*dpr)+'px system-ui'; ctx.textAlign='center'; ctx.fillText(labels[i], x+bwid\/2, pad+hh+16*dpr);\n          }\n          requestAnimationFrame(draw);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      };\n      const Donut = (el, base=[40,30,20,10], labels=['Prospecting','Remarketing','Retenci\u00f3n','Otros'])=>{\n        const ctx = el.getContext('2d'); let w,h,dpr=1,theta=-Math.PI\/2;\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const colors=['#F3B14B','#8B5CF6','#7C4DFF','#5A35E5'];\n        const draw=()=>{\n          ctx.clearRect(0,0,w,h);\n          const cx=w\/2, cy=h\/2, r=Math.min(w,h)\/3;\n          const osc=base.map((v,i)=> v*(1+0.05*Math.sin(theta+i))); const tot=osc.reduce((a,b)=>a+b,0);\n          let start=theta;\n          for(let i=0;i<osc.length;i++){\n            const ang=(osc[i]\/tot)*Math.PI*2;\n            ctx.beginPath(); ctx.arc(cx,cy,r,start,start+ang); ctx.arc(cx,cy,r*0.62,start+ang,start,true); ctx.closePath();\n            ctx.fillStyle=colors[i]; ctx.globalAlpha=.9; ctx.fill(); ctx.globalAlpha=1; start+=ang;\n          }\n          ctx.fillStyle='rgba(255,255,255,.9)'; ctx.font=(14*dpr)+'px system-ui'; ctx.textAlign='center'; ctx.fillText('Inversi\u00f3n', cx, cy);\n          theta += reduced?0.005:0.015; requestAnimationFrame(draw);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      };\n      Line(document.getElementById('ch-line'));\n      Bars(document.getElementById('ch-bars'));\n      Donut(document.getElementById('ch-donut'));\n\n      \/* ---------- Copilot (demo) ---------- *\/\n      const chat = document.getElementById('chat'); const form=document.getElementById('chat-form'); const input=document.getElementById('q');\n      const TPL = {\n        okrs: `OKR 6 semanas:\n\u2022 Objetivo: +25% ingresos.\n\u2022 KR: ROAS \u2265 3.8x, CPA \u2264 $11, CVR \u2265 2.6%.\nPlan de medici\u00f3n: view_content, add_to_cart, purchase, video_play 25\/50\/95, cta_click.`,\n        parrilla:`Parrilla 14\u201320 posts (extracto):\n1) Reels \u201cDel grano a la taza\u201d \u2013 Awareness \u2192 Alcance\n2) Carrusel \u201c3 m\u00e9todos\u201d \u2013 Consideraci\u00f3n \u2192 Guardados\n3) UGC Testimonio Suscripci\u00f3n \u2013 Conversi\u00f3n \u2192 Clics\n4) Foto Hero + copy corto \u2013 Engagement \u2192 Interacciones`,\n        mix:`Buckets:\n\u2022 Prospecting 55% (Meta Reels, TikTok) \u2192 CTR 1.6%, CPC $3.0\n\u2022 Remarketing 35% (Meta + PMAX) \u2192 CVR 2.6%, ROAS 3.9x\n\u2022 Retenci\u00f3n 10% (Email\/SMS) \u2192 AOV $30`,\n        alertas:`Alertas activadas por 24h:\n\u2022 CPC > $3.5  \u2022 Frecuencia > 3.2  \u2022 CVR < 2%`\n      };\n      function add(role, text){ const w=document.createElement('div'); w.className='msg '+role; const b=document.createElement('div'); b.className='b'; w.appendChild(b); chat.appendChild(w); chat.scrollTop=chat.scrollHeight;\n        let i=0; const speed=reduced?0:14; (function type(){ b.textContent=text.slice(0,i); i++; chat.scrollTop=chat.scrollHeight; if(i<=text.length) setTimeout(type,speed); })(); }\n      document.querySelectorAll('.presets .vi-chip').forEach(c=> c.addEventListener('click', ()=>{ input.value=c.dataset.prompt; input.focus(); }));\n      add('bot','\u00bfQu\u00e9 necesitas hoy? Puedo generar OKRs, media mix, parrilla y alertas con tus restricciones.');\n\n      form.addEventListener('submit', e=>{\n        e.preventDefault(); const q=(input.value||'').trim(); if(!q) return; add('user',q);\n        const key=\/OKR|OKRs|objetiv\/i.test(q)?'okrs':\/Parrilla|calendar\/i.test(q)?'parrilla':\/mix|bucket|media\/i.test(q)?'mix':\/alerta|anomali|CPC|frecuenc\/i.test(q)?'alertas':'okrs';\n        setTimeout(()=> add('bot', TPL[key]), 300); input.value='';\n      });\n\n      \/* ---------- Heatmap (d\u00eda\/hora) ---------- *\/\n      (function(el){\n        const ctx=el.getContext('2d'); let w,h,dpr=1; const rows=7, cols=24;\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const data=Array.from({length:rows},()=>Array.from({length:cols},()=> Math.random()*1));\n        function color(v){ const a=Math.floor(40+v*200); return `rgba(139,92,246,${0.25+v*0.65})`; }\n        const draw=()=>{\n          ctx.clearRect(0,0,w,h); const pad=16*dpr, cw=(w-pad*2)\/cols, ch=(h-pad*2)\/rows;\n          for(let r=0;r<rows;r++) for(let c=0;c<cols;c++){ ctx.fillStyle=color(data[r][c]); ctx.fillRect(pad+c*cw, pad+r*ch, cw-2*dpr, ch-2*dpr); }\n          requestAnimationFrame(draw);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      })(document.getElementById('ch-heat'));\n\n      \/* ---------- Simulador ---------- *\/\n      const slider=document.getElementById('sim-slider'); const v=document.getElementById('sim-val');\n      const o={ctr:document.getElementById('sim-ctr'), cpc:document.getElementById('sim-cpc'), cvr:document.getElementById('sim-cvr'), roas:document.getElementById('sim-roas'), impact:document.getElementById('sim-impact')};\n      function simUpdate(){\n        const p=+slider.value; v.textContent=p+'%';\n        const ctr=(1.2 + p*0.025).toFixed(2)+'%';\n        const cpc='$'+(3.4 - p*0.03).toFixed(2);\n        const cvr=(2.1 + p*0.03).toFixed(2)+'%';\n        const roas=(3.1 + p*0.0375).toFixed(1)+'x';\n        const imp='+'+( (p\/8*0.3).toFixed(1) )+'x';\n        o.ctr.textContent=ctr; o.cpc.textContent=cpc; o.cvr.textContent=cvr; o.roas.textContent=roas; o.impact.textContent=imp;\n      }\n      slider.addEventListener('input', simUpdate); simUpdate();\n\n      \/* ---------- Semana sparkline ---------- *\/\n      (function(el){\n        const ctx=el.getContext('2d'); let w,h,dpr=1,t=0;\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const draw=()=>{\n          ctx.clearRect(0,0,w,h); const pad=16*dpr, ww=w-pad*2, hh=h-pad*2;\n          ctx.strokeStyle='rgba(255,255,255,.1)'; ctx.lineWidth=1; for(let i=0;i<4;i++){ const y=pad+(i\/3)*hh; ctx.beginPath(); ctx.moveTo(pad,y); ctx.lineTo(pad+ww,y); ctx.stroke(); }\n          ctx.beginPath(); for(let i=0;i<40;i++){ const xv=pad+(i\/39)*ww; const yv=pad+hh-( (45+Math.sin(i*0.3+t)*12)\/100)*hh; i?ctx.lineTo(xv,yv):ctx.moveTo(xv,yv); }\n          ctx.strokeStyle='rgba(124,77,255,.9)'; ctx.lineWidth=2; ctx.stroke(); t+=0.035; requestAnimationFrame(draw);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      })(document.getElementById('ch-week'));\n\n      \/* ---------- Alert log (demo actions) ---------- *\/\n      const log=document.getElementById('alert-log');\n      document.querySelectorAll('#alerts .vi-chip').forEach(b=>{\n        b.addEventListener('click', ()=>{\n          const a=b.dataset.action; const ts=new Date().toLocaleTimeString();\n          log.textContent=`${ts}: Acci\u00f3n \u201c${a}\u201d ejecutada (demo). Impacto: ahorro estimado $120\/d\u00eda.`;\n        });\n      });\n\n      \/* ---------- A\/B bars ---------- *\/\n      (function(el){\n        const ctx=el.getContext('2d'); let w,h,dpr=1,ph=0;\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const draw=()=>{\n          ctx.clearRect(0,0,w,h); const pad=24*dpr, ww=w-pad*2, hh=h-pad*2, bw=ww\/6;\n          const A=1.24 + Math.sin(ph)*0.02, B=1.41 + Math.cos(ph*0.9)*0.02; \/\/ CTR %\n          const vals=[A,B]; const labels=['A','B'];\n          for(let i=0;i<2;i++){\n            const x=pad + i*(bw*2.6); const v=vals[i]; const y=pad+hh - (v\/2)*hh;\n            const grad=ctx.createLinearGradient(0,y,0,pad+hh); grad.addColorStop(0,i? '#F3B14B':'#8B5CF6'); grad.addColorStop(1,i? '#D59F3A':'#5A35E5');\n            ctx.fillStyle=grad; ctx.fillRect(x,y,bw,(v\/2)*hh);\n            ctx.fillStyle='rgba(255,255,255,.85)'; ctx.font=(12*dpr)+'px system-ui'; ctx.textAlign='center';\n            ctx.fillText(labels[i]+' ('+(v.toFixed(2))+'%)', x+bw\/2, pad+hh+16*dpr);\n          }\n          ph+=0.02; requestAnimationFrame(draw);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      })(document.getElementById('ch-ab'));\n\n      \/* ---------- Cohorts line ---------- *\/\n      (function(el){\n        const ctx=el.getContext('2d'); let w,h,dpr=1,t=0;\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const draw=()=>{\n          ctx.clearRect(0,0,w,h); const pad=24*dpr, ww=w-pad*2, hh=h-pad*2;\n          const series=[[80,62,48,39,32,28],[78,60,47,38,31,27]]; \/\/ 30\/60d\n          const colors=['rgba(139,92,246,.95)','rgba(243,177,75,.95)'];\n          for(let s=0;s<series.length;s++){\n            ctx.beginPath();\n            series[s].forEach((v,i)=>{ const xv=pad+(i\/(series[s].length-1))*ww; const yv=pad+hh - (v\/100)*hh; i?ctx.lineTo(xv,yv):ctx.moveTo(xv,yv); });\n            ctx.strokeStyle=colors[s]; ctx.lineWidth=2; ctx.stroke();\n          }\n          requestAnimationFrame(draw);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      })(document.getElementById('ch-cohort'));\n\n      \/* ---------- Gauges ---------- *\/\n      function gauge(el, value=0.8, ok=true, label=''){\n        const ctx=el.getContext('2d'); let w,h,dpr=1;\n        const resize=()=>{ dpr=Math.min(window.devicePixelRatio||1,2); const r=el.getBoundingClientRect(); el.width=w=r.width*dpr; el.height=h=r.height*dpr; };\n        const draw=()=>{\n          ctx.clearRect(0,0,w,h); const cx=w\/2, cy=h*0.9, r=Math.min(w,h*1.4)\/2.2; const start=Math.PI, end=0;\n          \/\/ track\n          ctx.strokeStyle='rgba(255,255,255,.12)'; ctx.lineWidth=10*dpr; ctx.beginPath(); ctx.arc(cx,cy,r,start,end); ctx.stroke();\n          \/\/ value\n          const ang=start + (end-start)*value;\n          ctx.strokeStyle= ok? 'rgba(16,185,129,.9)' : 'rgba(239,68,68,.9)'; ctx.lineWidth=10*dpr; ctx.beginPath(); ctx.arc(cx,cy,r,start,ang); ctx.stroke();\n          ctx.fillStyle='#fff'; ctx.font=(18*dpr)+'px system-ui'; ctx.textAlign='center'; ctx.fillText(label, cx, cy-r-6*dpr);\n        };\n        resize(); window.addEventListener('resize', resize); draw();\n      }\n      gauge(document.getElementById('g-roas'), 0.90, true, '3.9x');\n      gauge(document.getElementById('g-cpa'), 0.85, true, '$10.6');\n      gauge(document.getElementById('g-cvr'), 0.88, true, '2.7%');\n    })();\n  <\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Vainilla Intelligence Diagn\u00f3stico Estrategia Ejecuci\u00f3n Quiero Marketing Demo: Caf\u00e9 Aurora (D2C) El marketing que piensa con datos. Con Vainilla Intelligence elegimos un objetivo y se traduce en OKRs, plan de medios, parrilla y resultados \u2014 end-to-end, sobre datos reales. Ver recorrido Ir a estrategia CTR 1.2% ROAS 3.1x CVR 2.1% CPC $3.4 AOV $28 Red [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-94","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/pages\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":13,"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/pages\/94\/revisions"}],"predecessor-version":[{"id":107,"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/pages\/94\/revisions\/107"}],"wp:attachment":[{"href":"https:\/\/vainillaintelligence.com\/en\/wp-json\/wp\/v2\/media?parent=94"}],"curies":[{"name":"well played","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}