{"id":1201,"date":"2026-09-25T22:51:57","date_gmt":"2026-09-26T04:51:57","guid":{"rendered":"https:\/\/www.vcgpartners.mx\/?page_id=1201"},"modified":"2026-10-22T14:32:06","modified_gmt":"2026-10-22T20:32:06","slug":"index-test","status":"publish","type":"page","link":"https:\/\/www.vcgpartners.mx\/eng\/index-test\/","title":{"rendered":"Index test"},"content":{"rendered":"\n\n\n<!-- ============ VCG HERO PIXEL GRADIENT ============ -->\n\n<div class=\"vcg-hero\" id=\"vcgHero\">\n\n  <div class=\"vcg-hero__grid\" id=\"vcgGrid\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"vcg-hero__content\">\n\n    <img decoding=\"async\"\n      src=\"https:\/\/www.vcgpartners.mx\/wp-content\/uploads\/2017\/11\/vcg4.png\"\n      alt=\"VCG Partners\"\n      class=\"vcg-hero__logo\"\n    \/>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n.vcg-hero {\n\n  --vcg-cell: 58px;\n\n  \/* Azul principal de la marca *\/\n  --vcg-brand: #1B233B;\n\n  position: relative;\n\n  width: 100vw;\n  left: 50%;\n  margin-left: -50vw;\n\n  height: 100vh;\n  height: 100dvh;\n\n  min-height: 480px;\n\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  isolation: isolate;\n\n  background: var(--vcg-brand);\n}\n\n\n\/* =========================================================\n   GRID\n   ========================================================= *\/\n\n.vcg-hero__grid {\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  display: grid;\n\n  pointer-events: none;\n\n  gap: 0;\n\n}\n\n\n\/* =========================================================\n   P\u00cdXELES (TRANSICI\u00d3N ULTRA SUAVE Y CONTINUA)\n   ========================================================= *\/\n\n.vcg-hero__grid span {\n\n  display: block;\n\n  background-color: var(--cell-color, #1B233B);\n\n  \/* Transici\u00f3n ultra suave que elimina cualquier salto o parpadeo *\/\n  transition: background-color 2.4s cubic-bezier(0.4, 0, 0.2, 1);\n\n  will-change: background-color;\n\n}\n\n\n\/* =========================================================\n   CONTENIDO Y LOGO\n   ========================================================= *\/\n\n.vcg-hero__content {\n\n  position: relative;\n\n  z-index: 3;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  padding: 24px;\n\n  pointer-events: none;\n\n}\n\n.vcg-hero__logo {\n\n  max-width: min(480px, 25vw);\n\n  max-height: 40vh;\n\n  width: auto;\n  height: auto;\n\n  display: block;\n\n  filter:\n    drop-shadow(\n      0 12px 40px rgba(0,0,0,0.25)\n    );\n\n}\n\n\n\/* =========================================================\n   RESPONSIVE \/ M\u00d3VIL\n   ========================================================= *\/\n\n@media (max-width: 768px) {\n\n  .vcg-hero {\n    --vcg-cell: 44px;\n  }\n\n  .vcg-hero__logo {\n    max-width: min(380px, 45vw);\n    max-height: 35vh;\n  }\n\n}\n\n@media (max-width: 480px) {\n\n  .vcg-hero {\n    --vcg-cell: 34px;\n  }\n\n  .vcg-hero__logo {\n    max-width: min(320px, 68vw);\n    max-height: 32vh;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const hero = document.getElementById('vcgHero');\n  const grid = document.getElementById('vcgGrid');\n\n  if (!hero || !grid) return;\n\n\n  \/* Paleta base con degradado continuo *\/\n  const PALETTE = [\n    { r: 27,  g: 35,  b: 59  }, \/* Azul oscuro *\/\n    { r: 27,  g: 35,  b: 59  },\n    { r: 43,  g: 62,  b: 114 },\n    { r: 63,  g: 95,  b: 189 },\n    { r: 80,  g: 125, b: 235 },\n    { r: 126, g: 166, b: 255 }  \/* Azul luminoso *\/\n  ];\n\n\n  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  let cells = [];\n  let cols = 0;\n  let rows = 0;\n\n\n  \/* =======================================================\n     C\u00c1LCULO DEL COLOR BASE\n     ======================================================= *\/\n\n  function getBaseColor(normX, normY, isMobile) {\n\n    let t;\n\n    if (isMobile) {\n      const diag = (normX * 0.75) + (normY * 0.25);\n      const diagFactor = Math.sin(diag * Math.PI);\n      const distY = 1 - Math.abs(normY - 0.5) * 0.8;\n      t = (diagFactor * 0.6) + (distY * 0.4);\n      t = Math.pow(t, 1.2);\n    } else {\n      const pos = (normX * 0.75) + (normY * 0.25);\n      t = Math.sin(pos * Math.PI);\n    }\n\n    t = Math.max(0, Math.min(1, t));\n\n    const scaled = t * (PALETTE.length - 1);\n    const idx = Math.floor(scaled);\n    const frac = scaled - idx;\n\n    const c1 = PALETTE[idx];\n    const c2 = PALETTE[Math.min(idx + 1, PALETTE.length - 1)];\n\n    const r = Math.round(c1.r + (c2.r - c1.r) * frac);\n    const g = Math.round(c1.g + (c2.g - c1.g) * frac);\n    const b = Math.round(c1.b + (c2.b - c1.b) * frac);\n\n    return { r, g, b };\n  }\n\n\n  \/* =======================================================\n     GENERAR GRID\n     ======================================================= *\/\n\n  function build() {\n\n    grid.innerHTML = '';\n    cells = [];\n\n    const w = hero.clientWidth;\n    const h = hero.clientHeight;\n    const isMobile = window.innerWidth <= 768;\n\n    let cell = parseInt(\n      getComputedStyle(hero).getPropertyValue('--vcg-cell'),\n      10\n    ) || 58;\n\n    cols = Math.max(8, Math.round(w \/ cell));\n    rows = Math.max(5, Math.round(h \/ cell));\n\n    grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;\n    grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;\n\n    const frag = document.createDocumentFragment();\n\n    for (let r = 0; r < rows; r++) {\n      for (let c = 0; c < cols; c++) {\n\n        const span = document.createElement('span');\n\n        const normX = (c + 0.5) \/ cols;\n        const normY = (r + 0.5) \/ rows;\n\n        const rgb = getBaseColor(normX, normY, isMobile);\n\n        span.dataset.r0 = rgb.r;\n        span.dataset.g0 = rgb.g;\n        span.dataset.b0 = rgb.b;\n\n        span.dataset.c = c;\n        span.dataset.r = r;\n\n        span.style.setProperty(\n          '--cell-color',\n          `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`\n        );\n\n        frag.appendChild(span);\n        cells.push(span);\n      }\n    }\n\n    grid.appendChild(frag);\n  }\n\n\n  \/* =======================================================\n     TRANSICI\u00d3N CONTINUA Y FLUIDA SIN PARPADEO\n     ======================================================= *\/\n\n  function triggerAmbientPulse() {\n\n    \/\/ Elegimos un epicentro aleatorio\n    const centerC = Math.floor(Math.random() * cols);\n    const centerR = Math.floor(Math.random() * rows);\n\n    \/\/ Incremento moderado para mantener la elegancia\n    const boostG = 20 + Math.floor(Math.random() * 15);\n    const boostB = 25 + Math.floor(Math.random() * 20);\n\n    for (let i = 0; i < cells.length; i++) {\n      const el = cells[i];\n      const c = +el.dataset.c;\n      const r = +el.dataset.r;\n\n      const dist = Math.hypot(c - centerC, r - centerR);\n\n      const r0 = +el.dataset.r0;\n      const g0 = +el.dataset.g0;\n      const b0 = +el.dataset.b0;\n\n      \/\/ Retraso por distancia para propagar la ola progresivamente\n      const delay = Math.round(dist * 140);\n\n      setTimeout(() => {\n\n        \/\/ Elevar tono progresivamente\n        const tr = Math.min(255, r0 + 8);\n        const tg = Math.min(255, g0 + boostG);\n        const tb = Math.min(255, b0 + boostB);\n\n        el.style.setProperty('--cell-color', `rgb(${tr}, ${tg}, ${tb})`);\n\n        \/\/ Retorno suave a su estado original (sin sobreescribir abruptamente)\n        setTimeout(() => {\n          el.style.setProperty('--cell-color', `rgb(${r0}, ${g0}, ${b0})`);\n        }, 2200);\n\n      }, delay);\n    }\n  }\n\n\n  \/* =======================================================\n     INIT & LOOPS\n     ======================================================= *\/\n\n  build();\n\n  if (!reduceMotion) {\n    \/\/ Primer pulso ambiental\n    setTimeout(triggerAmbientPulse, 600);\n\n    \/\/ Ciclo holgado de 6 segundos para dar tiempo a que finalice cada ola por completo\n    setInterval(triggerAmbientPulse, 6000);\n  }\n\n\n  let resizeTimer;\n\n  window.addEventListener('resize', () => {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(build, 180);\n  });\n\n})();\n\n<\/script>\n\n<!-- ============ \/VCG HERO PIXEL GRADIENT ============ -->\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-single-page-nav-transparent-light.php","meta":{"footnotes":""},"class_list":["post-1201","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/pages\/1201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/comments?post=1201"}],"version-history":[{"count":33,"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/pages\/1201\/revisions"}],"predecessor-version":[{"id":1242,"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/pages\/1201\/revisions\/1242"}],"wp:attachment":[{"href":"https:\/\/www.vcgpartners.mx\/eng\/wp-json\/wp\/v2\/media?parent=1201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}