{"id":5941,"date":"2025-11-17T13:35:42","date_gmt":"2025-11-17T18:35:42","guid":{"rendered":"https:\/\/inversionesguru.com\/co\/?page_id=5941"},"modified":"2026-03-22T15:57:13","modified_gmt":"2026-03-22T20:57:13","slug":"inicio-colombia","status":"publish","type":"page","link":"https:\/\/inversionesguru.com\/co\/","title":{"rendered":"Inicio Colombia"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5941\" class=\"elementor elementor-5941\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-866b687 e-flex e-con-boxed e-con e-parent\" data-id=\"866b687\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;shape_divider_top&quot;:&quot;triangle&quot;,&quot;shape_divider_bottom&quot;:&quot;opacity-fan&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M500,98.9L0,6.1V0h1000v6.1L500,98.9z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 283.5 19.6\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" style=\"opacity:0.33\" d=\"M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z\"\/>\n\t<path class=\"elementor-shape-fill\" style=\"opacity:0.33\" d=\"M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z\"\/>\n\t<path class=\"elementor-shape-fill\" style=\"opacity:0.33\" d=\"M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z\"\/>\n\t<path class=\"elementor-shape-fill\" d=\"M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6e6a7c elementor-widget elementor-widget-html\" data-id=\"b6e6a7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ========================================================================= -->\r\n<!-- INVERSIONESGURU - COMPONENTE HERO + TARJETAS (ENCAPSULADO)                -->\r\n<!-- ========================================================================= -->\r\n\r\n<!-- 1. CARGA DE LIBRER\u00cdAS (Tailwind y Lucide Icons) -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n<script>\r\n  \/\/ Configuraci\u00f3n segura de Tailwind para este componente\r\n  tailwind.config = {\r\n    corePlugins: {\r\n      preflight: false, \/\/ Evita resetear los estilos de WordPress\r\n    },\r\n    important: '#ig-hero-section-wrapper', \/\/ Fuerza la prioridad de Tailwind\r\n  }\r\n<\/script>\r\n\r\n<!-- 2. ESTILOS BLINDADOS PARA EL HERO -->\r\n<style>\r\n  \/* Reset estricto solo para este bloque *\/\r\n  #ig-hero-section-wrapper {\r\n    all: initial;\r\n    font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !important;\r\n    display: block;\r\n    color: #0f172a;\r\n    line-height: 1.5;\r\n    -webkit-font-smoothing: antialiased;\r\n    background: transparent;\r\n    width: 100%;\r\n  }\r\n\r\n  #ig-hero-section-wrapper * {\r\n    box-sizing: border-box !important;\r\n  }\r\n\r\n  \/* Protecci\u00f3n de tipograf\u00edas *\/\r\n  #ig-hero-section-wrapper h1,\r\n  #ig-hero-section-wrapper h3 {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    line-height: 1.1 !important;\r\n    color: inherit !important;\r\n    font-family: inherit !important;\r\n    background: none !important;\r\n  }\r\n\r\n  #ig-hero-section-wrapper h1 {\r\n    font-weight: 900 !important;\r\n    letter-spacing: -0.025em !important;\r\n  }\r\n\r\n  #ig-hero-section-wrapper h3 {\r\n    font-weight: 600 !important;\r\n  }\r\n\r\n  #ig-hero-section-wrapper p,\r\n  #ig-hero-section-wrapper span,\r\n  #ig-hero-section-wrapper div {\r\n    margin: 0;\r\n    padding: 0;\r\n    color: inherit;\r\n    font-family: inherit;\r\n  }\r\n\r\n  #ig-hero-section-wrapper a {\r\n    text-decoration: none !important;\r\n  }\r\n\r\n  \/* Formateo de Botones Seguro *\/\r\n  #ig-hero-section-wrapper .ig-btn {\r\n    cursor: pointer !important;\r\n    font-family: inherit !important;\r\n    display: inline-flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    border-radius: 0.75rem !important;\r\n    padding: 0.75rem 1.25rem !important;\r\n    font-size: 0.875rem !important;\r\n    font-weight: 700 !important;\r\n    transition: all 0.2s !important;\r\n    text-decoration: none !important;\r\n    gap: 0.5rem !important;\r\n    border: none !important;\r\n  }\r\n\r\n  \/* Variantes de Botones *\/\r\n  #ig-hero-section-wrapper .ig-btn-primary {\r\n    background-color: #0f172a !important;\r\n    color: #ffffff !important;\r\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;\r\n  }\r\n\r\n  #ig-hero-section-wrapper .ig-btn-primary:hover {\r\n    background-color: #1e293b !important;\r\n  }\r\n\r\n  #ig-hero-section-wrapper .ig-btn-secondary {\r\n    background-color: #ffffff !important;\r\n    color: #1e293b !important;\r\n    border: 1px solid #e2e8f0 !important;\r\n  }\r\n\r\n  #ig-hero-section-wrapper .ig-btn-secondary:hover {\r\n    background-color: #f8fafc !important;\r\n    border-color: #cbd5e1 !important;\r\n  }\r\n\r\n  \/* Animaciones *\/\r\n  @keyframes ig-fade-up {\r\n    0% {\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  .ig-fade-up {\r\n    animation: ig-fade-up 0.6s ease-out forwards;\r\n  }\r\n\r\n  .ig-delay-200 {\r\n    animation-delay: 0.2s;\r\n  }\r\n<\/style>\r\n\r\n<!-- 3. ESTRUCTURA HTML -->\r\n<div id=\"ig-hero-section-wrapper\">\r\n  <div class=\"mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8\">\r\n\r\n    <!-- Contenedor Grid (2 columnas en PC, 1 en M\u00f3vil) -->\r\n    <div class=\"grid items-center gap-12 lg:grid-cols-2\">\r\n\r\n      <!-- ================= COLUMNA IZQUIERDA (TEXTO) ================= -->\r\n      <div class=\"ig-fade-up\">\r\n        <span class=\"inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider mb-6 bg-teal-100 text-teal-800 border border-teal-200\">\r\n          <i data-lucide=\"sparkles\" class=\"h-3 w-3\"><\/i> La plataforma financiera #1\r\n        <\/span>\r\n\r\n        <h1 class=\"mb-6 text-4xl sm:text-5xl lg:text-6xl text-slate-900\">\r\n          Compara, Simula y Toma el Control de tus <span class=\"bg-gradient-to-r from-teal-600 to-blue-600 bg-clip-text text-transparent\">Finanzas.<\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"mb-8 max-w-xl text-lg text-slate-600\">\r\n          Encuentra la mejor tarjeta de cr\u00e9dito, simula el retorno de tus ahorros y accede a rankings actualizados para hacer crecer tu dinero en Colombia. Sin complicaciones.\r\n        <\/p>\r\n\r\n        <div class=\"flex flex-wrap items-center gap-4\">\r\n          <a href=\"https:\/\/inversionesguru.com\/co\/tarjetas-de-credito\/\" class=\"ig-btn ig-btn-primary\">\r\n            Explorar Comparadores <i data-lucide=\"arrow-right\" class=\"h-4 w-4\"><\/i>\r\n          <\/a>\r\n          <a href=\"https:\/\/inversionesguru.com\/co\/herramientas\/\" class=\"ig-btn ig-btn-secondary\">\r\n            <i data-lucide=\"calculator\" class=\"h-4 w-4 text-slate-500\"><\/i> Ir a Simuladores\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ================= COLUMNA DERECHA (TARJETAS) ================= -->\r\n      <div class=\"relative ig-fade-up ig-delay-200\">\r\n        <div class=\"grid gap-4 sm:grid-cols-2\">\r\n\r\n          <!-- Tarjeta 1: TRM -->\r\n          <div class=\"group rounded-[1.5rem] border border-slate-200 bg-white p-6 shadow-xl shadow-slate-200\/50 transition-all hover:-translate-y-1 hover:border-teal-300\">\r\n            <div class=\"mb-4 flex items-center justify-between\">\r\n              <div class=\"flex h-10 w-10 items-center justify-center rounded-full bg-teal-50 text-teal-600\">\r\n                <i data-lucide=\"line-chart\" class=\"h-5 w-5\"><\/i>\r\n              <\/div>\r\n              <span class=\"inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-500\">Oficial<\/span>\r\n            <\/div>\r\n            <h3 class=\"text-sm text-slate-900 mb-1\">Tendencia TRM Hoy<\/h3>\r\n            <div class=\"text-3xl font-black text-slate-900\" id=\"ig-trm-value\">$3,681.68<\/div>\r\n            <div\r\n              class=\"mt-4 h-12 w-full\"\r\n              id=\"chart-trm-hero\"\r\n              data-history=\"3850,3820,3800,3750,3710,3695,3681.68\"\r\n              data-color=\"#e11d48\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Tarjeta 2: Tasa de Usura -->\r\n          <div class=\"group rounded-[1.5rem] border border-slate-200 bg-white p-6 shadow-xl shadow-slate-200\/50 transition-all hover:-translate-y-1 hover:border-rose-300 sm:mt-8\">\r\n            <div class=\"mb-4 flex items-center justify-between\">\r\n              <div class=\"flex h-10 w-10 items-center justify-center rounded-full bg-rose-50 text-rose-600\">\r\n                <i data-lucide=\"trending-up\" class=\"h-5 w-5\"><\/i>\r\n              <\/div>\r\n              <span class=\"inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-500\">Superfinanciera<\/span>\r\n            <\/div>\r\n            <h3 class=\"text-sm text-slate-900 mb-1\">Tasa de Usura (Mes)<\/h3>\r\n            <div class=\"text-3xl font-black text-slate-900\" id=\"ig-usura-value\">25.52%<\/div>\r\n            <div\r\n              class=\"mt-4 h-12 w-full\"\r\n              id=\"chart-usura-hero\"\r\n              data-history=\"28.0,27.5,26.8,26.5,26.1,25.8,25.52\"\r\n              data-color=\"#e11d48\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- 4. SCRIPTS (L\u00f3gica para \u00edconos y gr\u00e1ficas + fetch oficial) -->\r\n<script>\r\n  \/\/ Inicializar iconos\r\n  lucide.createIcons();\r\n\r\n  \/\/ Generador de gr\u00e1ficos SVG\r\n  function drawHeroTrendChart(containerId) {\r\n    const container = document.getElementById(containerId);\r\n    if (!container) return;\r\n\r\n    const dataString = container.getAttribute('data-history');\r\n    const color = container.getAttribute('data-color') || '#0ea5e9';\r\n    if (!dataString) return;\r\n\r\n    const data = dataString\r\n      .split(',')\r\n      .map(v => Number(v))\r\n      .filter(v => !Number.isNaN(v));\r\n\r\n    if (!data.length) return;\r\n\r\n    const max = Math.max(...data);\r\n    const min = Math.min(...data);\r\n    const range = max - min || 1;\r\n    const padding = range * 0.2;\r\n\r\n    const width = 100;\r\n    const height = 40;\r\n\r\n    const points = data.map((val, i) => {\r\n      const x = (i \/ (data.length - 1 || 1)) * width;\r\n      const y = height - (((val - min + padding) \/ (range + padding * 2)) * height);\r\n      return `${x},${y}`;\r\n    }).join(\" L \");\r\n\r\n    const svgHTML = `\r\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 ${width} ${height}\" style=\"overflow: visible;\" preserveAspectRatio=\"none\">\r\n        <defs>\r\n          <linearGradient id=\"grad-${containerId}\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\r\n            <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"0.2\" \/>\r\n            <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" \/>\r\n          <\/linearGradient>\r\n        <\/defs>\r\n        <path d=\"M 0,${height} L ${points} L ${width},${height} Z\" fill=\"url(#grad-${containerId})\" \/>\r\n        <path d=\"M ${points}\" fill=\"none\" stroke=\"${color}\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n      <\/svg>\r\n    `;\r\n\r\n    container.innerHTML = svgHTML;\r\n  }\r\n\r\n  function setHeroCardValue(elId, rawValue, type = 'currency') {\r\n    const el = document.getElementById(elId);\r\n    if (!el || rawValue == null || Number.isNaN(Number(rawValue))) return;\r\n\r\n    const value = Number(rawValue);\r\n\r\n    if (type === 'currency') {\r\n      el.textContent = new Intl.NumberFormat('es-CO', {\r\n        style: 'currency',\r\n        currency: 'COP',\r\n        minimumFractionDigits: 2,\r\n        maximumFractionDigits: 2\r\n      }).format(value);\r\n      return;\r\n    }\r\n\r\n    if (type === 'percent') {\r\n      el.textContent = value.toLocaleString('es-CO', {\r\n        minimumFractionDigits: 2,\r\n        maximumFractionDigits: 2\r\n      }) + '%';\r\n    }\r\n  }\r\n\r\n  function setChartHistory(containerId, history) {\r\n    const container = document.getElementById(containerId);\r\n    if (!container || !Array.isArray(history) || !history.length) return;\r\n\r\n    const values = history\r\n      .map(item => Number(item.value))\r\n      .filter(v => !Number.isNaN(v));\r\n\r\n    if (!values.length) return;\r\n\r\n    container.setAttribute('data-history', values.join(','));\r\n    drawHeroTrendChart(containerId);\r\n  }\r\n\r\n  async function loadHeroMarketData() {\r\n    try {\r\n      const response = await fetch('\/co\/wp-json\/ig\/v1\/hero-market-v3?ts=' + Date.now(), {\r\n        method: 'GET',\r\n        cache: 'no-store'\r\n      });\r\n\r\n      if (!response.ok) {\r\n        throw new Error('HTTP ' + response.status);\r\n      }\r\n\r\n      const json = await response.json();\r\n\r\n      if (!json || !json.ok || !json.data) {\r\n        throw new Error('Payload inv\u00e1lido');\r\n      }\r\n\r\n      if (json.data.trm) {\r\n        setHeroCardValue('ig-trm-value', json.data.trm.value, 'currency');\r\n        setChartHistory('chart-trm-hero', json.data.trm.history_monthly || []);\r\n      }\r\n\r\n      if (json.data.usura) {\r\n        setHeroCardValue('ig-usura-value', json.data.usura.value, 'percent');\r\n        setChartHistory('chart-usura-hero', json.data.usura.history_monthly || []);\r\n      }\r\n    } catch (error) {\r\n      console.warn('IG Hero Market error:', error);\r\n      drawHeroTrendChart('chart-trm-hero');\r\n      drawHeroTrendChart('chart-usura-hero');\r\n    }\r\n  }\r\n\r\n  \/\/ Dibujo inicial con fallback\r\n  drawHeroTrendChart('chart-trm-hero');\r\n  drawHeroTrendChart('chart-usura-hero');\r\n\r\n  \/\/ Luego carga datos oficiales\r\n  loadHeroMarketData();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f0a8a95 e-flex e-con-boxed e-con e-parent\" data-id=\"f0a8a95\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;shape_divider_bottom&quot;:&quot;split&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 20\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M0,0v3c0,0,393.8,0,483.4,0c9.2,0,16.6,7.4,16.6,16.6c0-9.1,7.4-16.6,16.6-16.6C606.2,3,1000,3,1000,3V0H0z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c59b1c elementor-widget elementor-widget-html\" data-id=\"0c59b1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ========================================================================= -->\r\n<!-- INVERSIONESGURU - COMPONENTE ACCESOS R\u00c1PIDOS (ENCAPSULADO)                -->\r\n<!-- ========================================================================= -->\r\n\r\n<!-- 1. CARGA DE LIBRER\u00cdAS (Tailwind y Lucide Icons) -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n<script>\r\n  \/\/ Configuraci\u00f3n segura de Tailwind para este componente\r\n  tailwind.config = {\r\n    corePlugins: {\r\n      preflight: false, \/\/ Evita resetear los estilos de WordPress\r\n    },\r\n    important: '#ig-quick-actions-wrapper', \/\/ Fuerza la prioridad de Tailwind\r\n  }\r\n<\/script>\r\n\r\n<!-- 2. ESTILOS BLINDADOS PARA LOS ACCESOS R\u00c1PIDOS -->\r\n<style>\r\n  \/* Reset estricto solo para este bloque *\/\r\n  #ig-quick-actions-wrapper {\r\n    all: initial;\r\n    font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !important;\r\n    display: block;\r\n    color: #0f172a;\r\n    line-height: 1.5;\r\n    -webkit-font-smoothing: antialiased;\r\n    background: transparent; \r\n    width: 100%;\r\n  }\r\n  #ig-quick-actions-wrapper * { box-sizing: border-box !important; }\r\n  \r\n  \/* Protecci\u00f3n de tipograf\u00edas *\/\r\n  #ig-quick-actions-wrapper h2 {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    font-weight: 700 !important;\r\n    line-height: 1.2 !important;\r\n    color: inherit !important;\r\n    font-family: inherit !important;\r\n    background: none !important;\r\n  }\r\n  \r\n  #ig-quick-actions-wrapper p, \r\n  #ig-quick-actions-wrapper span,\r\n  #ig-quick-actions-wrapper div { \r\n    margin: 0; padding: 0; color: inherit; font-family: inherit; \r\n  }\r\n  \r\n  #ig-quick-actions-wrapper a { \r\n    text-decoration: none !important; \r\n    color: inherit;\r\n    box-shadow: none !important;\r\n    background: none;\r\n  }\r\n\r\n  \/* Animaciones de entrada en cascada *\/\r\n  @keyframes ig-fade-up-cards {\r\n    0% { opacity: 0; transform: translateY(15px); }\r\n    100% { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .ig-fade-up { animation: ig-fade-up-cards 0.5s ease-out forwards; opacity: 0; }\r\n  .ig-delay-100 { animation-delay: 0.1s; }\r\n  .ig-delay-200 { animation-delay: 0.2s; }\r\n  .ig-delay-300 { animation-delay: 0.3s; }\r\n  .ig-delay-400 { animation-delay: 0.4s; }\r\n<\/style>\r\n\r\n<!-- 3. ESTRUCTURA HTML -->\r\n<div id=\"ig-quick-actions-wrapper\">\r\n  <div class=\"mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8\">\r\n    \r\n    <!-- Encabezado de la secci\u00f3n -->\r\n    <div class=\"mb-8 ig-fade-up\">\r\n      <h2 class=\"text-2xl font-bold text-slate-900 sm:text-3xl\">\u00bfQu\u00e9 necesitas resolver hoy?<\/h2>\r\n      <p class=\"mt-2 text-slate-600\">Herramientas gratuitas para optimizar tus finanzas personales.<\/p>\r\n    <\/div>\r\n    \r\n    <!-- Contenedor Grid (4 columnas en PC, 2 en M\u00f3vil) -->\r\n    <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4 lg:gap-6\">\r\n      \r\n      <!-- Tarjeta 1: Simular CDT -->\r\n      <a href=\"#cdt\" class=\"group flex flex-col items-center justify-center gap-4 rounded-[1.5rem] border border-slate-200 bg-white p-6 text-center shadow-sm transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-md ig-fade-up ig-delay-100\">\r\n        <div class=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600 transition-transform group-hover:scale-110\">\r\n          <i data-lucide=\"piggy-bank\" class=\"h-8 w-8\"><\/i>\r\n        <\/div>\r\n        <span class=\"font-bold text-slate-800\">Simular CDT<\/span>\r\n      <\/a>\r\n\r\n      <!-- Tarjeta 2: Mejores Tarjetas -->\r\n      <a href=\"https:\/\/inversionesguru.com\/co\/tarjetas-de-credito\/\" class=\"group flex flex-col items-center justify-center gap-4 rounded-[1.5rem] border border-slate-200 bg-white p-6 text-center shadow-sm transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-md ig-fade-up ig-delay-200\">\r\n        <div class=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-50 text-blue-600 transition-transform group-hover:scale-110\">\r\n          <i data-lucide=\"credit-card\" class=\"h-8 w-8\"><\/i>\r\n        <\/div>\r\n        <span class=\"font-bold text-slate-800\">Mejores Tarjetas<\/span>\r\n      <\/a>\r\n\r\n      <!-- Tarjeta 3: Cr\u00e9ditos -->\r\n      <a href=\"#creditos\" class=\"group flex flex-col items-center justify-center gap-4 rounded-[1.5rem] border border-slate-200 bg-white p-6 text-center shadow-sm transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-md ig-fade-up ig-delay-300\">\r\n        <div class=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 transition-transform group-hover:scale-110\">\r\n          <i data-lucide=\"landmark\" class=\"h-8 w-8\"><\/i>\r\n        <\/div>\r\n        <span class=\"font-bold text-slate-800\">Cr\u00e9ditos<\/span>\r\n      <\/a>\r\n\r\n      <!-- Tarjeta 4: Seguros -->\r\n      <a href=\"#seguros\" class=\"group flex flex-col items-center justify-center gap-4 rounded-[1.5rem] border border-slate-200 bg-white p-6 text-center shadow-sm transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-md ig-fade-up ig-delay-400\">\r\n        <div class=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 transition-transform group-hover:scale-110\">\r\n          <i data-lucide=\"shield-check\" class=\"h-8 w-8\"><\/i>\r\n        <\/div>\r\n        <span class=\"font-bold text-slate-800\">Seguros<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- 4. SCRIPTS (L\u00f3gica para \u00edconos) -->\r\n<script>\r\n  \/\/ Inicializar Iconos de Lucide\r\n  lucide.createIcons();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0c23e14 e-flex e-con-boxed e-con e-parent\" data-id=\"0c23e14\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64a92d2 elementor-widget elementor-widget-html\" data-id=\"64a92d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- 1. CARGA DE LIBRER\u00cdAS (Tailwind y Lucide Icons) -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n<script>\r\n  \/\/ Configuraci\u00f3n segura de Tailwind para este componente\r\n  tailwind.config = {\r\n    corePlugins: {\r\n      preflight: false, \/\/ Evita resetear los estilos de WordPress\r\n    },\r\n    important: '#ig-rankings-guias-wrapper', \/\/ Fuerza la prioridad de Tailwind\r\n  }\r\n<\/script>\r\n\r\n<!-- 2. ESTILOS BLINDADOS PARA RANKINGS Y GU\u00cdAS -->\r\n<style>\r\n  \/* Reset estricto solo para este bloque *\/\r\n  #ig-rankings-guias-wrapper {\r\n    all: initial;\r\n    font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !important;\r\n    display: block;\r\n    color: #0f172a;\r\n    line-height: 1.5;\r\n    -webkit-font-smoothing: antialiased;\r\n    background: transparent; \r\n    width: 100%;\r\n  }\r\n  #ig-rankings-guias-wrapper * { box-sizing: border-box !important; }\r\n  \r\n  \/* Protecci\u00f3n de tipograf\u00edas *\/\r\n  #ig-rankings-guias-wrapper h2, \r\n  #ig-rankings-guias-wrapper h3, \r\n  #ig-rankings-guias-wrapper h4 {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    font-weight: 700 !important;\r\n    line-height: 1.2 !important;\r\n    color: inherit !important;\r\n    font-family: inherit !important;\r\n    background: none !important;\r\n  }\r\n  \r\n  #ig-rankings-guias-wrapper p, \r\n  #ig-rankings-guias-wrapper span,\r\n  #ig-rankings-guias-wrapper div { \r\n    margin: 0; padding: 0; color: inherit; font-family: inherit; \r\n  }\r\n  \r\n  #ig-rankings-guias-wrapper a { \r\n    text-decoration: none !important; \r\n    color: inherit;\r\n    box-shadow: none !important;\r\n    background: none;\r\n  }\r\n\r\n  \/* Formateo de Botones Seguro *\/\r\n  #ig-rankings-guias-wrapper button, \r\n  #ig-rankings-guias-wrapper .ig-btn {\r\n    cursor: pointer !important;\r\n    font-family: inherit !important;\r\n    display: inline-flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    border-radius: 0.75rem !important; \/* rounded-xl *\/\r\n    padding: 0.75rem 1.25rem !important; \/* px-5 py-3 *\/\r\n    font-size: 0.875rem !important; \/* text-sm *\/\r\n    font-weight: 700 !important; \/* font-bold *\/\r\n    transition: all 0.2s !important;\r\n    text-decoration: none !important;\r\n    gap: 0.5rem !important;\r\n    border: none !important;\r\n  }\r\n  \r\n  \/* Variantes de Botones *\/\r\n  #ig-rankings-guias-wrapper .ig-btn-primary {\r\n    background-color: #0f172a !important; \/* slate-900 *\/\r\n    color: #ffffff !important;\r\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;\r\n  }\r\n  #ig-rankings-guias-wrapper .ig-btn-primary:hover { background-color: #1e293b !important; }\r\n  \r\n  #ig-rankings-guias-wrapper .ig-btn-secondary {\r\n    background-color: #ffffff !important;\r\n    color: #1e293b !important;\r\n    border: 1px solid #e2e8f0 !important;\r\n  }\r\n  #ig-rankings-guias-wrapper .ig-btn-secondary:hover { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }\r\n\r\n  \/* Animaciones de entrada *\/\r\n  @keyframes ig-fade-up {\r\n    0% { opacity: 0; transform: translateY(20px); }\r\n    100% { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .ig-fade-up { animation: ig-fade-up 0.6s ease-out forwards; opacity: 0; }\r\n  .ig-delay-100 { animation-delay: 0.1s; }\r\n  .ig-delay-200 { animation-delay: 0.2s; }\r\n<\/style>\r\n\r\n<!-- 3. ESTRUCTURA HTML -->\r\n<div id=\"ig-rankings-guias-wrapper\">\r\n  <div class=\"mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8\">\r\n    \r\n    <!-- Contenedor Grid Mixto -->\r\n    <div class=\"grid gap-10 lg:grid-cols-[1fr_400px]\">\r\n      \r\n      <!-- ================= COLUMNA IZQUIERDA: RANKINGS ================= -->\r\n      <div class=\"ig-fade-up\">\r\n        <div class=\"mb-6 flex items-center justify-between\">\r\n          <h2 class=\"text-2xl font-bold text-slate-900 sm:text-3xl\">Rankings Financieros<\/h2>\r\n          <a href=\"#todos-rankings\" class=\"flex items-center gap-1 text-sm font-bold text-teal-600 hover:text-teal-700\">\r\n            Ver todos <i data-lucide=\"chevron-right\" class=\"h-4 w-4\"><\/i>\r\n          <\/a>\r\n        <\/div>\r\n        \r\n        <div class=\"flex flex-col gap-4\">\r\n          \r\n          <!-- Ranking 1 -->\r\n          <div class=\"group relative flex flex-col sm:flex-row cursor-pointer sm:items-center gap-5 rounded-[1.5rem] border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-slate-300 hover:shadow-md\">\r\n            <div class=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-slate-50 text-slate-600 transition-colors group-hover:bg-slate-900 group-hover:text-white\">\r\n              <i data-lucide=\"star\" class=\"h-6 w-6\"><\/i>\r\n            <\/div>\r\n            <div class=\"flex-1\">\r\n              <div class=\"mb-1 flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-teal-600\">\r\n                Tarjetas de Cr\u00e9dito\r\n              <\/div>\r\n              <h3 class=\"text-lg font-bold text-slate-900 leading-tight transition-colors group-hover:text-teal-700\">Top 5: Sin Cuota de Manejo 2026<\/h3>\r\n            <\/div>\r\n            <div class=\"mt-4 sm:mt-0\">\r\n              <button class=\"ig-btn ig-btn-secondary !w-full sm:!w-auto !px-4 !py-2.5 !text-sm\">Ver Ranking<\/button>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <!-- Ranking 2 -->\r\n          <div class=\"group relative flex flex-col sm:flex-row cursor-pointer sm:items-center gap-5 rounded-[1.5rem] border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-slate-300 hover:shadow-md\">\r\n            <div class=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-slate-50 text-slate-600 transition-colors group-hover:bg-slate-900 group-hover:text-white\">\r\n              <i data-lucide=\"trending-up\" class=\"h-6 w-6\"><\/i>\r\n            <\/div>\r\n            <div class=\"flex-1\">\r\n              <div class=\"mb-1 flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-teal-600\">\r\n                Ahorro \r\n                <span class=\"flex h-2 w-2 rounded-full bg-rose-500 animate-pulse\"><\/span>\r\n              <\/div>\r\n              <h3 class=\"text-lg font-bold text-slate-900 leading-tight transition-colors group-hover:text-teal-700\">Cuentas con mayor rentabilidad (Hasta 14% EA)<\/h3>\r\n            <\/div>\r\n            <div class=\"mt-4 sm:mt-0\">\r\n              <button class=\"ig-btn ig-btn-secondary !w-full sm:!w-auto !px-4 !py-2.5 !text-sm\">Ver Ranking<\/button>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <!-- Ranking 3 -->\r\n          <div class=\"group relative flex flex-col sm:flex-row cursor-pointer sm:items-center gap-5 rounded-[1.5rem] border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-slate-300 hover:shadow-md\">\r\n            <div class=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-slate-50 text-slate-600 transition-colors group-hover:bg-slate-900 group-hover:text-white\">\r\n              <i data-lucide=\"circle-dollar-sign\" class=\"h-6 w-6\"><\/i>\r\n            <\/div>\r\n            <div class=\"flex-1\">\r\n              <div class=\"mb-1 flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-teal-600\">\r\n                Inversi\u00f3n Segura\r\n              <\/div>\r\n              <h3 class=\"text-lg font-bold text-slate-900 leading-tight transition-colors group-hover:text-teal-700\">Los CDTs que m\u00e1s pagan este mes<\/h3>\r\n            <\/div>\r\n            <div class=\"mt-4 sm:mt-0\">\r\n              <button class=\"ig-btn ig-btn-secondary !w-full sm:!w-auto !px-4 !py-2.5 !text-sm\">Ver Ranking<\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ================= COLUMNA DERECHA: GU\u00cdAS ================= -->\r\n      <div class=\"ig-fade-up ig-delay-100\">\r\n        <div class=\"mb-6\">\r\n          <h2 class=\"text-2xl font-bold text-slate-900 sm:text-3xl\">Aprende con el Guru<\/h2>\r\n        <\/div>\r\n        \r\n        <div class=\"rounded-[1.5rem] border border-slate-200 bg-slate-50 p-6 sm:p-8\">\r\n          <div class=\"flex flex-col gap-8\">\r\n            \r\n            <!-- Gu\u00eda 1 -->\r\n            <a href=\"#guia-1\" class=\"group flex items-start gap-4\">\r\n              <div class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm transition-colors group-hover:border-teal-300 group-hover:text-teal-600\">\r\n                <i data-lucide=\"book-open\" class=\"h-5 w-5\"><\/i>\r\n              <\/div>\r\n              <div class=\"pt-1\">\r\n                <div class=\"mb-1 flex flex-wrap gap-1 text-[10px] font-bold uppercase tracking-wider text-slate-500\">\r\n                  <span>Conceptos B\u00e1sicos<\/span> <span class=\"text-slate-300\">\u2022<\/span> <span>5 min<\/span>\r\n                <\/div>\r\n                <h4 class=\"text-base font-bold text-slate-800 leading-snug group-hover:text-teal-700\">\u00bfC\u00f3mo funciona el Inter\u00e9s Compuesto?<\/h4>\r\n              <\/div>\r\n            <\/a>\r\n            \r\n            <!-- Gu\u00eda 2 -->\r\n            <a href=\"#guia-2\" class=\"group flex items-start gap-4\">\r\n              <div class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm transition-colors group-hover:border-teal-300 group-hover:text-teal-600\">\r\n                <i data-lucide=\"activity\" class=\"h-5 w-5\"><\/i>\r\n              <\/div>\r\n              <div class=\"pt-1\">\r\n                <div class=\"mb-1 flex flex-wrap gap-1 text-[10px] font-bold uppercase tracking-wider text-slate-500\">\r\n                  <span>Deudas<\/span> <span class=\"text-slate-300\">\u2022<\/span> <span>4 min<\/span>\r\n                <\/div>\r\n                <h4 class=\"text-base font-bold text-slate-800 leading-snug group-hover:text-teal-700\">Impacto de la Tasa de Usura en tus deudas<\/h4>\r\n              <\/div>\r\n            <\/a>\r\n            \r\n            <!-- Gu\u00eda 3 -->\r\n            <a href=\"#guia-3\" class=\"group flex items-start gap-4\">\r\n              <div class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm transition-colors group-hover:border-teal-300 group-hover:text-teal-600\">\r\n                <i data-lucide=\"newspaper\" class=\"h-5 w-5\"><\/i>\r\n              <\/div>\r\n              <div class=\"pt-1\">\r\n                <div class=\"mb-1 flex flex-wrap gap-1 text-[10px] font-bold uppercase tracking-wider text-slate-500\">\r\n                  <span>Impuestos<\/span> <span class=\"text-slate-300\">\u2022<\/span> <span>8 min<\/span>\r\n                <\/div>\r\n                <h4 class=\"text-base font-bold text-slate-800 leading-snug group-hover:text-teal-700\">Gu\u00eda para declarar renta sin estr\u00e9s<\/h4>\r\n              <\/div>\r\n            <\/a>\r\n\r\n          <\/div>\r\n          \r\n          <button class=\"ig-btn ig-btn-primary mt-8 w-full\">Ir al Blog Completo<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- 4. SCRIPTS (L\u00f3gica para \u00edconos) -->\r\n<script>\r\n  \/\/ Inicializar Iconos de Lucide\r\n  lucide.createIcons();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8b53f84 e-flex e-con-boxed e-con e-parent\" data-id=\"8b53f84\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-95ed84e elementor-widget elementor-widget-html\" data-id=\"95ed84e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- 1. CARGA DE LIBRER\u00cdAS (Tailwind y Lucide Icons) -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n<script>\r\n  \/\/ Configuraci\u00f3n segura de Tailwind para este componente\r\n  tailwind.config = {\r\n    corePlugins: {\r\n      preflight: false, \/\/ Evita resetear los estilos de WordPress\r\n    },\r\n    important: '#ig-pro-teaser-wrapper', \/\/ Fuerza la prioridad de Tailwind\r\n  }\r\n<\/script>\r\n\r\n<!-- 2. ESTILOS BLINDADOS PARA EL TEASER PRO -->\r\n<style>\r\n  \/* Reset estricto solo para este bloque *\/\r\n  #ig-pro-teaser-wrapper {\r\n    all: initial;\r\n    font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !important;\r\n    display: block;\r\n    color: #0f172a;\r\n    line-height: 1.5;\r\n    -webkit-font-smoothing: antialiased;\r\n    background: transparent; \r\n    width: 100%;\r\n  }\r\n  #ig-pro-teaser-wrapper * { box-sizing: border-box !important; }\r\n  \r\n  \/* Protecci\u00f3n de tipograf\u00edas *\/\r\n  #ig-pro-teaser-wrapper h2 {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    font-weight: 900 !important; \/* font-black *\/\r\n    line-height: 1.1 !important;\r\n    color: inherit !important;\r\n    font-family: inherit !important;\r\n    background: none !important;\r\n    letter-spacing: -0.025em !important;\r\n  }\r\n  \r\n  #ig-pro-teaser-wrapper p, \r\n  #ig-pro-teaser-wrapper span,\r\n  #ig-pro-teaser-wrapper div { \r\n    margin: 0; padding: 0; color: inherit; font-family: inherit; \r\n  }\r\n  \r\n  #ig-pro-teaser-wrapper ul, \r\n  #ig-pro-teaser-wrapper li { \r\n    margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; \r\n  }\r\n\r\n  \/* Formateo de Inputs Seguro *\/\r\n  #ig-pro-teaser-wrapper input {\r\n    font-family: inherit !important;\r\n    border-radius: 0.75rem !important;\r\n    border: 1px solid #fed7aa !important; \/* orange-200 *\/\r\n    background-color: #ffffff !important;\r\n    padding: 0.875rem 1.25rem !important; \/* px-5 py-3.5 *\/\r\n    color: #1e293b !important;\r\n    outline: none !important;\r\n    font-size: 0.875rem !important;\r\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\r\n    width: 100% !important;\r\n  }\r\n  #ig-pro-teaser-wrapper input:focus { \r\n    border-color: #f97316 !important; \/* orange-500 *\/\r\n    box-shadow: 0 0 0 3px #ffedd5 !important; \/* orange-100 *\/\r\n  }\r\n\r\n  \/* Formateo del Bot\u00f3n Premium *\/\r\n  #ig-pro-teaser-wrapper button, \r\n  #ig-pro-teaser-wrapper .ig-btn-premium {\r\n    cursor: pointer !important;\r\n    font-family: inherit !important;\r\n    display: inline-flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    border-radius: 0.75rem !important; \/* rounded-xl *\/\r\n    padding: 0.875rem 1.5rem !important; \r\n    font-size: 0.875rem !important; \/* text-sm *\/\r\n    font-weight: 700 !important; \/* font-bold *\/\r\n    transition: all 0.2s !important;\r\n    border: none !important;\r\n    background: linear-gradient(to right, #f97316, #ea580c) !important; \/* orange-500 to orange-600 *\/\r\n    color: #ffffff !important;\r\n    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3) !important;\r\n    white-space: nowrap !important;\r\n  }\r\n  #ig-pro-teaser-wrapper .ig-btn-premium:hover {\r\n    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.5) !important;\r\n    transform: translateY(-1px) !important;\r\n  }\r\n  #ig-pro-teaser-wrapper .ig-btn-premium:active {\r\n    transform: scale(0.98) !important;\r\n  }\r\n\r\n  \/* Animaciones de entrada *\/\r\n  @keyframes ig-fade-up {\r\n    0% { opacity: 0; transform: translateY(20px); }\r\n    100% { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .ig-fade-up { animation: ig-fade-up 0.6s ease-out forwards; opacity: 0; }\r\n<\/style>\r\n\r\n<!-- 3. ESTRUCTURA HTML -->\r\n<div id=\"ig-pro-teaser-wrapper\">\r\n  <div class=\"mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8\">\r\n    \r\n    <!-- Contenedor de la Tarjeta PRO -->\r\n    <div class=\"ig-fade-up relative overflow-hidden rounded-[2rem] border border-orange-100 bg-gradient-to-br from-[#fff7ed] via-[#ffedd5] to-[#fff1f2] p-8 sm:p-12 shadow-sm\">\r\n      \r\n      <!-- Decoraci\u00f3n Fondo: Corona Gigante -->\r\n      <i data-lucide=\"crown\" class=\"absolute -right-12 -top-12 h-72 w-72 text-orange-500\/10 rotate-12 pointer-events-none\"><\/i>\r\n      \r\n      <!-- Degradado extra a la derecha para dar profundidad -->\r\n      <div class=\"absolute top-0 right-0 h-full w-1\/2 bg-gradient-to-l from-orange-500\/5 to-transparent pointer-events-none\"><\/div>\r\n\r\n      <!-- Contenido Principal -->\r\n      <div class=\"relative z-10 max-w-3xl\">\r\n        \r\n        <!-- Etiqueta superior -->\r\n        <span class=\"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-wider mb-5 bg-orange-100 text-orange-700 border border-orange-200\">\r\n          <i data-lucide=\"crown\" class=\"h-3.5 w-3.5\"><\/i> Pr\u00f3ximamente\r\n        <\/span>\r\n        \r\n        <!-- T\u00edtulo PRO -->\r\n        <h2 class=\"text-3xl sm:text-4xl lg:text-5xl text-slate-900 mb-4\">\r\n          InversionesGuru <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-rose-500\">PRO<\/span>\r\n        <\/h2>\r\n        \r\n        <!-- Descripci\u00f3n -->\r\n        <p class=\"text-base sm:text-lg text-slate-700 font-medium\">\r\n          Prep\u00e1rate para llevar tus finanzas al nivel de un experto. Acceso exclusivo a:\r\n        <\/p>\r\n        \r\n        <!-- Lista de beneficios -->\r\n        <ul class=\"mt-6 flex flex-col gap-3.5 font-medium text-slate-800 sm:text-base text-sm\">\r\n          <li class=\"flex items-center gap-3\">\r\n            <div class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-orange-200 text-orange-600\">\r\n              <i data-lucide=\"check\" class=\"h-4 w-4\"><\/i>\r\n            <\/div>\r\n            <span>Portafolios de inversi\u00f3n recomendados<\/span>\r\n          <\/li>\r\n          <li class=\"flex items-center gap-3\">\r\n            <div class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-orange-200 text-orange-600\">\r\n              <i data-lucide=\"check\" class=\"h-4 w-4\"><\/i>\r\n            <\/div>\r\n            <span>Calculadoras avanzadas sin l\u00edmites<\/span>\r\n          <\/li>\r\n          <li class=\"flex items-center gap-3\">\r\n            <div class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-orange-200 text-orange-600\">\r\n              <i data-lucide=\"check\" class=\"h-4 w-4\"><\/i>\r\n            <\/div>\r\n            <span>An\u00e1lisis macroecon\u00f3mico en tiempo real<\/span>\r\n          <\/li>\r\n        <\/ul>\r\n        \r\n        <!-- Formulario (Input + Bot\u00f3n) -->\r\n        <div class=\"mt-10 flex flex-col sm:flex-row gap-4 items-center\">\r\n          <div class=\"w-full sm:max-w-[320px]\">\r\n            <input type=\"email\" placeholder=\"Tu correo electr\u00f3nico\" \/>\r\n          <\/div>\r\n          <button class=\"ig-btn-premium w-full sm:w-auto\">Unirse a la lista de espera<\/button>\r\n        <\/div>\r\n        \r\n      <\/div>\r\n    <\/div>\r\n    \r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- 4. SCRIPTS (L\u00f3gica para \u00edconos) -->\r\n<script>\r\n  \/\/ Inicializar Iconos de Lucide\r\n  lucide.createIcons();\r\n<\/script>\t\t\t\t<\/div>\n\t\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>La plataforma financiera #1 Compara, Simula y Toma el Control de tus Finanzas. Encuentra la mejor tarjeta de cr\u00e9dito, simula el retorno de tus ahorros y accede a rankings actualizados para hacer crecer tu dinero en Colombia. Sin complicaciones. Explorar Comparadores Ir a Simuladores Oficial Tendencia TRM Hoy $3,681.68 Superfinanciera Tasa de Usura (Mes) 25.52%&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-5941","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/pages\/5941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/comments?post=5941"}],"version-history":[{"count":52,"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/pages\/5941\/revisions"}],"predecessor-version":[{"id":7597,"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/pages\/5941\/revisions\/7597"}],"wp:attachment":[{"href":"https:\/\/inversionesguru.com\/co\/wp-json\/wp\/v2\/media?parent=5941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}