One Page Animada<\/title>\n<style>\n:root {\n --op-blue-1: #0d1f46;\n --op-blue-2: #0f3f8c;\n --op-blue-3: #0a66c2;\n --op-glow: rgba(10, 102, 194, 0.35);\n --op-text: #f5f8ff;\n --op-muted: rgba(255, 255, 255, 0.7);\n}\n* { box-sizing: border-box; }\nhtml, body { margin: 0; padding: 0; width: 100%; min-height: 100%; background: #0b1c3d; color: var(--op-text); font-family: \"Segoe UI\", \"Work Sans\", \"Inter\", system-ui, -apple-system, sans-serif; }\n.op-wrapper { position: relative; width: 100%; isolation: isolate; }\n.op-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }\n.op-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: saturate(1.05); opacity: 1; transform: scale(1.05); animation: op-kenburns 24s ease-in-out infinite alternate; will-change: transform, opacity; transition: opacity 1.2s ease, filter 1.2s ease; }\n.op-bg1 { background-image: url(\"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/Copy-of-Web-Banner.png\"); }\n.op-bg2 { background-image: url(\"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/banner-2.png\"); opacity: 0; }\n.op-gradient { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(10,102,194,0.35), transparent 38%), linear-gradient(135deg, rgba(13,31,70,0.78), rgba(13,31,70,0.35) 38%, rgba(15,63,140,0.6) 70%, rgba(10,102,194,0.55)); mix-blend-mode: screen; opacity: 0.95; transition: opacity 1s ease; }\n.op-main { position: relative; z-index: 3; }\n.op-panel { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 64px); }\n.op-hero-content { text-align: center; opacity: 0; transition: opacity 1s ease; }\n.op-wrapper.is-hero-ready .op-hero-content { opacity: 1; }\n.op-typed { font-size: clamp(48px, 8vw, 92px); font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25); position: relative; display: inline-block; }\n.op-typed::after { content: \"\"; display: inline-block; width: 0.09em; height: 1em; margin-left: 0.08em; background: var(--op-text); animation: op-caret 0.9s steps(1) infinite; vertical-align: -0.05em; }\n.op-hero-content.is-out { opacity: 0; transform: translateY(-12px); transition: opacity 0.6s ease, transform 0.6s ease; }\n.op-loader { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: linear-gradient(135deg, var(--op-blue-1), var(--op-blue-2)); transition: opacity 0.7s ease, visibility 0.7s ease; }\n.op-loader.is-hidden { opacity: 0; visibility: hidden; }\n.op-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--op-text); text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }\n.op-spinner { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: op-spin 0.8s linear infinite; box-shadow: 0 0 24px rgba(255,255,255,0.2); }\n.op-floating { position: fixed; inset: 0; pointer-events: none; z-index: 4; display: grid; place-items: center; }\n\/* Cambio: figura m\u00e1s grande y estable en movimiento *\/\n.op-figure-wrap { width: clamp(320px, 46vw, 780px); max-height: 80vh; opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s ease, transform 1s ease, filter 0.8s ease; will-change: transform, opacity; }\n.op-figure { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 32px rgba(0,0,0,0.4)); }\n.op-wrapper.is-stage .op-figure-wrap { opacity: 1; transform: translate3d(0,0,0); }\n.op-wrapper.is-duo .op-figure-wrap { transform: translate3d(-30vw,0,0); }\n@media (max-width: 900px) {\n .op-wrapper.is-duo .op-figure-wrap { transform: translate3d(-6vw, 0, 0); }\n}\n\/* Sin escala en fade-out para no encoger durante el movimiento *\/\n.op-wrapper.is-bg2 .op-figure-wrap { opacity: 0; filter: blur(6px); transform: translate3d(-12vw, 0, 0); }\n.op-copy-box { position: fixed; top: 50%; right: clamp(16px, 6vw, 8vw); transform: translateY(-50%) translateX(12px); opacity: 0; max-width: min(36vw, 520px); color: var(--op-text); pointer-events: none; transition: opacity 0.8s ease, transform 0.8s ease; will-change: transform, opacity; }\n.op-copy-title { font-size: clamp(36px, 6vw, 64px); font-weight: 700; text-shadow: 0 8px 24px rgba(0,0,0,0.35); }\n.op-wrapper.is-duo .op-copy-box { opacity: 1; transform: translateY(-50%) translateX(0); }\n.op-wrapper.is-bg2 .op-copy-box { opacity: 0; filter: blur(4px); }\n@media (max-width: 900px) {\n .op-copy-box { top: auto; bottom: clamp(32px, 8vw, 68px); left: 50%; right: auto; transform: translate(-50%, 20px); max-width: min(86vw, 520px); text-align: center; }\n .op-wrapper.is-duo .op-copy-box { transform: translate(-50%, 0); }\n}\n.op-final { text-align: center; }\n.op-final .op-typed { font-size: clamp(42px, 7vw, 88px); }\n.op-wrapper.is-bg2 .op-bg2 { opacity: 1; }\n.op-wrapper.is-bg2 .op-gradient { opacity: 0.8; }\n.op-wrapper.is-bg2 .op-bg1 { filter: saturate(0.9) brightness(0.9); }\n@keyframes op-spin { to { transform: rotate(360deg); } }\n@keyframes op-kenburns { 0% { transform: scale(1.02) translate3d(0,0,0); } 100% { transform: scale(1.08) translate3d(2%, -2%, 0); } }\n@keyframes op-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }\n .op-bg-layer { transform: none !important; }\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"op-wrapper\" id=\"op-wrapper\">\n <div class=\"op-loader\" id=\"op-loader\" role=\"status\" aria-live=\"polite\">\n <div class=\"op-loader-inner\">\n <div class=\"op-spinner\" aria-hidden=\"true\"><\/div>\n <span>Cargando<\/span>\n <\/div>\n <\/div>\n\n <div class=\"op-bg\" aria-hidden=\"true\">\n <div class=\"op-bg-layer op-bg1\" id=\"op-bg1\"><\/div>\n <div class=\"op-bg-layer op-bg2\" id=\"op-bg2\"><\/div>\n <div class=\"op-gradient\" id=\"op-gradient\"><\/div>\n <\/div>\n\n <div class=\"op-floating\" aria-hidden=\"true\">\n <div class=\"op-figure-wrap\" id=\"op-figure-wrap\">\n <img decoding=\"async\" src=\"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/ejecutivo.png\" alt=\"Ejecutivo\" class=\"op-figure\" id=\"op-figure\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"op-copy-box\" id=\"op-copy-box\">\n <div class=\"op-copy-title op-typed\" aria-live=\"polite\"><span id=\"op-duo-text\"><\/span><\/div>\n <\/div>\n <\/div>\n\n <main class=\"op-main\" aria-live=\"polite\">\n <section class=\"op-panel op-hero\" id=\"op-hero\" aria-label=\"Hero principal\">\n <div class=\"op-hero-content\" id=\"op-hero-content\">\n <div class=\"op-typed\" id=\"op-hero-typed\" role=\"heading\" aria-level=\"1\" aria-live=\"assertive\">\n <span id=\"op-hero-text\"><\/span>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"op-panel\" id=\"op-stage\" aria-label=\"Presentaci\u00f3n\"><\/section>\n <section class=\"op-panel\" id=\"op-duo-panel\" aria-label=\"Mensaje principal\"><\/section>\n <section class=\"op-panel\" id=\"op-switch\" aria-label=\"Transici\u00f3n de fondo\"><\/section>\n <section class=\"op-panel op-final\" id=\"op-final\" aria-label=\"Cierre\">\n <div class=\"op-typed\" id=\"op-final-text\"><span><\/span><\/div>\n <\/section>\n <\/main>\n<\/div>\n\n<script>\n(() => {\n const wrapper = document.getElementById(\"op-wrapper\");\n const loader = document.getElementById(\"op-loader\");\n const heroContent = document.getElementById(\"op-hero-content\");\n const heroText = document.getElementById(\"op-hero-text\");\n const duoText = document.getElementById(\"op-duo-text\");\n const finalTextSpan = document.querySelector(\"#op-final-text span\");\n const bg1 = document.getElementById(\"op-bg1\");\n const bg2 = document.getElementById(\"op-bg2\");\n const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n const assets = [\n \"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/Copy-of-Web-Banner.png\",\n \"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/banner-2.png\",\n \"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/ejecutivo.png\"\n ];\n\n const loadImage = (src) => new Promise((resolve) => {\n const img = new Image();\n img.onload = img.onerror = resolve;\n img.src = src;\n });\n\n const typeText = (el, text, speed = 70) => new Promise((resolve) => {\n if (!el) return resolve();\n if (prefersReducedMotion) { el.textContent = text; return resolve(); }\n let i = 0;\n const tick = () => {\n el.textContent = text.slice(0, i + 1);\n i++;\n if (i < text.length) setTimeout(tick, speed);\n else resolve();\n };\n tick();\n });\n\n let started = false;\n const startSequence = () => {\n if (started) return;\n started = true;\n loader.classList.add(\"is-hidden\");\n wrapper.classList.add(\"is-hero-ready\");\n requestAnimationFrame(() => {\n typeText(heroText, \"Hello World\", 75).then(() => {\n setTimeout(() => heroContent.classList.add(\"is-out\"), 450);\n });\n });\n };\n\n const startTime = performance.now();\n Promise.all(assets.map(loadImage)).finally(() => {\n const elapsed = performance.now() - startTime;\n const wait = Math.max(1200 - elapsed, 0);\n setTimeout(startSequence, wait);\n });\n setTimeout(startSequence, 1800); \/\/ hard cap per requisito\n\n \/\/ Typed triggers (solo para texto, sin manipular clases)\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (!entry.isIntersecting) return;\n switch (entry.target.id) {\n case \"op-duo-panel\":\n if (!duoText.dataset.done) {\n typeText(duoText, \"Esto es una prueba\", 65).then(() => duoText.dataset.done = \"1\");\n }\n break;\n case \"op-final\":\n if (!finalTextSpan.dataset.done) {\n typeText(finalTextSpan, \"Gracias por ver\", 70).then(() => finalTextSpan.dataset.done = \"1\");\n }\n break;\n }\n });\n }, { threshold: 0.55 });\n\n [\"op-duo-panel\", \"op-final\"].forEach(id => {\n const el = document.getElementById(id);\n if (el) observer.observe(el);\n });\n\n \/\/ Sincroniza estados para permitir volver atr\u00e1s al scrollear\n const stateSections = [\"op-stage\", \"op-duo-panel\", \"op-switch\", \"op-final\"];\n let ticking = false;\n const syncState = () => {\n ticking = false;\n const mid = window.innerHeight * 0.55;\n let activeIndex = -1;\n stateSections.forEach((id, idx) => {\n const el = document.getElementById(id);\n if (!el) return;\n const rect = el.getBoundingClientRect();\n if (rect.top <= mid && rect.bottom >= mid) {\n activeIndex = idx;\n }\n });\n wrapper.classList.toggle(\"is-stage\", activeIndex >= 0);\n wrapper.classList.toggle(\"is-duo\", activeIndex >= 1);\n wrapper.classList.toggle(\"is-bg2\", activeIndex >= 2);\n };\n const requestSync = () => {\n if (ticking) return;\n ticking = true;\n requestAnimationFrame(syncState);\n };\n window.addEventListener(\"scroll\", requestSync, { passive: true });\n window.addEventListener(\"resize\", syncState);\n syncState();\n\n \/\/ Parallax effect for subtle movement\n let lastY = 0;\n const parallax = () => {\n const y = window.scrollY * 0.03;\n if (Math.abs(y - lastY) > 0.5) {\n bg1.style.transform = `scale(1.05) translate3d(0, ${y}px, 0)`;\n bg2.style.transform = `scale(1.05) translate3d(0, ${y}px, 0)`;\n lastY = y;\n }\n if (!prefersReducedMotion) requestAnimationFrame(parallax);\n };\n if (!prefersReducedMotion) requestAnimationFrame(parallax);\n})();\n<\/script>\n<\/body>\n<\/html>\n\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>One Page Animada Cargando<\/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-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":16,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nOne Page Animada<\/title>\n<style>\n:root {\n --op-blue-1: #0d1f46;\n --op-blue-2: #0f3f8c;\n --op-blue-3: #0a66c2;\n --op-glow: rgba(10, 102, 194, 0.35);\n --op-text: #f5f8ff;\n --op-muted: rgba(255, 255, 255, 0.7);\n}\n* { box-sizing: border-box; }\nhtml, body { margin: 0; padding: 0; width: 100%; min-height: 100%; background: #0b1c3d; color: var(--op-text); font-family: \"Segoe UI\", \"Work Sans\", \"Inter\", system-ui, -apple-system, sans-serif; }\n.op-wrapper { position: relative; width: 100%; isolation: isolate; }\n.op-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }\n.op-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: saturate(1.05); opacity: 1; transform: scale(1.05); animation: op-kenburns 24s ease-in-out infinite alternate; will-change: transform, opacity; transition: opacity 1.2s ease, filter 1.2s ease; }\n.op-bg1 { background-image: url(\"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/Copy-of-Web-Banner.png\"); }\n.op-bg2 { background-image: url(\"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/banner-2.png\"); opacity: 0; }\n.op-gradient { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(10,102,194,0.35), transparent 38%), linear-gradient(135deg, rgba(13,31,70,0.78), rgba(13,31,70,0.35) 38%, rgba(15,63,140,0.6) 70%, rgba(10,102,194,0.55)); mix-blend-mode: screen; opacity: 0.95; transition: opacity 1s ease; }\n.op-main { position: relative; z-index: 3; }\n.op-panel { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 64px); }\n.op-hero-content { text-align: center; opacity: 0; transition: opacity 1s ease; }\n.op-wrapper.is-hero-ready .op-hero-content { opacity: 1; }\n.op-typed { font-size: clamp(48px, 8vw, 92px); font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25); position: relative; display: inline-block; }\n.op-typed::after { content: \"\"; display: inline-block; width: 0.09em; height: 1em; margin-left: 0.08em; background: var(--op-text); animation: op-caret 0.9s steps(1) infinite; vertical-align: -0.05em; }\n.op-hero-content.is-out { opacity: 0; transform: translateY(-12px); transition: opacity 0.6s ease, transform 0.6s ease; }\n.op-loader { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: linear-gradient(135deg, var(--op-blue-1), var(--op-blue-2)); transition: opacity 0.7s ease, visibility 0.7s ease; }\n.op-loader.is-hidden { opacity: 0; visibility: hidden; }\n.op-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--op-text); text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }\n.op-spinner { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: op-spin 0.8s linear infinite; box-shadow: 0 0 24px rgba(255,255,255,0.2); }\n.op-floating { position: fixed; inset: 0; pointer-events: none; z-index: 4; display: grid; place-items: center; }\n\/* Cambio: figura m\u00e1s grande y estable en movimiento *\/\n.op-figure-wrap { width: clamp(320px, 46vw, 780px); max-height: 80vh; opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s ease, transform 1s ease, filter 0.8s ease; will-change: transform, opacity; }\n.op-figure { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 32px rgba(0,0,0,0.4)); }\n.op-wrapper.is-stage .op-figure-wrap { opacity: 1; transform: translate3d(0,0,0); }\n.op-wrapper.is-duo .op-figure-wrap { transform: translate3d(-30vw,0,0); }\n@media (max-width: 900px) {\n .op-wrapper.is-duo .op-figure-wrap { transform: translate3d(-6vw, 0, 0); }\n}\n\/* Sin escala en fade-out para no encoger durante el movimiento *\/\n.op-wrapper.is-bg2 .op-figure-wrap { opacity: 0; filter: blur(6px); transform: translate3d(-12vw, 0, 0); }\n.op-copy-box { position: fixed; top: 50%; right: clamp(16px, 6vw, 8vw); transform: translateY(-50%) translateX(12px); opacity: 0; max-width: min(36vw, 520px); color: var(--op-text); pointer-events: none; transition: opacity 0.8s ease, transform 0.8s ease; will-change: transform, opacity; }\n.op-copy-title { font-size: clamp(36px, 6vw, 64px); font-weight: 700; text-shadow: 0 8px 24px rgba(0,0,0,0.35); }\n.op-wrapper.is-duo .op-copy-box { opacity: 1; transform: translateY(-50%) translateX(0); }\n.op-wrapper.is-bg2 .op-copy-box { opacity: 0; filter: blur(4px); }\n@media (max-width: 900px) {\n .op-copy-box { top: auto; bottom: clamp(32px, 8vw, 68px); left: 50%; right: auto; transform: translate(-50%, 20px); max-width: min(86vw, 520px); text-align: center; }\n .op-wrapper.is-duo .op-copy-box { transform: translate(-50%, 0); }\n}\n.op-final { text-align: center; }\n.op-final .op-typed { font-size: clamp(42px, 7vw, 88px); }\n.op-wrapper.is-bg2 .op-bg2 { opacity: 1; }\n.op-wrapper.is-bg2 .op-gradient { opacity: 0.8; }\n.op-wrapper.is-bg2 .op-bg1 { filter: saturate(0.9) brightness(0.9); }\n@keyframes op-spin { to { transform: rotate(360deg); } }\n@keyframes op-kenburns { 0% { transform: scale(1.02) translate3d(0,0,0); } 100% { transform: scale(1.08) translate3d(2%, -2%, 0); } }\n@keyframes op-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }\n .op-bg-layer { transform: none !important; }\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"op-wrapper\" id=\"op-wrapper\">\n <div class=\"op-loader\" id=\"op-loader\" role=\"status\" aria-live=\"polite\">\n <div class=\"op-loader-inner\">\n <div class=\"op-spinner\" aria-hidden=\"true\"><\/div>\n <span>Cargando<\/span>\n <\/div>\n <\/div>\n\n <div class=\"op-bg\" aria-hidden=\"true\">\n <div class=\"op-bg-layer op-bg1\" id=\"op-bg1\"><\/div>\n <div class=\"op-bg-layer op-bg2\" id=\"op-bg2\"><\/div>\n <div class=\"op-gradient\" id=\"op-gradient\"><\/div>\n <\/div>\n\n <div class=\"op-floating\" aria-hidden=\"true\">\n <div class=\"op-figure-wrap\" id=\"op-figure-wrap\">\n <img decoding=\"async\" src=\"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/ejecutivo.png\" alt=\"Ejecutivo\" class=\"op-figure\" id=\"op-figure\" loading=\"lazy\" \/>\n <\/div>\n <div class=\"op-copy-box\" id=\"op-copy-box\">\n <div class=\"op-copy-title op-typed\" aria-live=\"polite\"><span id=\"op-duo-text\"><\/span><\/div>\n <\/div>\n <\/div>\n\n <main class=\"op-main\" aria-live=\"polite\">\n <section class=\"op-panel op-hero\" id=\"op-hero\" aria-label=\"Hero principal\">\n <div class=\"op-hero-content\" id=\"op-hero-content\">\n <div class=\"op-typed\" id=\"op-hero-typed\" role=\"heading\" aria-level=\"1\" aria-live=\"assertive\">\n <span id=\"op-hero-text\"><\/span>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"op-panel\" id=\"op-stage\" aria-label=\"Presentaci\u00f3n\"><\/section>\n <section class=\"op-panel\" id=\"op-duo-panel\" aria-label=\"Mensaje principal\"><\/section>\n <section class=\"op-panel\" id=\"op-switch\" aria-label=\"Transici\u00f3n de fondo\"><\/section>\n <section class=\"op-panel op-final\" id=\"op-final\" aria-label=\"Cierre\">\n <div class=\"op-typed\" id=\"op-final-text\"><span><\/span><\/div>\n <\/section>\n <\/main>\n<\/div>\n\n<script>\n(() => {\n const wrapper = document.getElementById(\"op-wrapper\");\n const loader = document.getElementById(\"op-loader\");\n const heroContent = document.getElementById(\"op-hero-content\");\n const heroText = document.getElementById(\"op-hero-text\");\n const duoText = document.getElementById(\"op-duo-text\");\n const finalTextSpan = document.querySelector(\"#op-final-text span\");\n const bg1 = document.getElementById(\"op-bg1\");\n const bg2 = document.getElementById(\"op-bg2\");\n const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n const assets = [\n \"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/Copy-of-Web-Banner.png\",\n \"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/banner-2.png\",\n \"https:\/\/develop.sitios24x7.com\/wp-content\/uploads\/2025\/12\/ejecutivo.png\"\n ];\n\n const loadImage = (src) => new Promise((resolve) => {\n const img = new Image();\n img.onload = img.onerror = resolve;\n img.src = src;\n });\n\n const typeText = (el, text, speed = 70) => new Promise((resolve) => {\n if (!el) return resolve();\n if (prefersReducedMotion) { el.textContent = text; return resolve(); }\n let i = 0;\n const tick = () => {\n el.textContent = text.slice(0, i + 1);\n i++;\n if (i < text.length) setTimeout(tick, speed);\n else resolve();\n };\n tick();\n });\n\n let started = false;\n const startSequence = () => {\n if (started) return;\n started = true;\n loader.classList.add(\"is-hidden\");\n wrapper.classList.add(\"is-hero-ready\");\n requestAnimationFrame(() => {\n typeText(heroText, \"Hello World\", 75).then(() => {\n setTimeout(() => heroContent.classList.add(\"is-out\"), 450);\n });\n });\n };\n\n const startTime = performance.now();\n Promise.all(assets.map(loadImage)).finally(() => {\n const elapsed = performance.now() - startTime;\n const wait = Math.max(1200 - elapsed, 0);\n setTimeout(startSequence, wait);\n });\n setTimeout(startSequence, 1800); \/\/ hard cap per requisito\n\n \/\/ Typed triggers (solo para texto, sin manipular clases)\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (!entry.isIntersecting) return;\n switch (entry.target.id) {\n case \"op-duo-panel\":\n if (!duoText.dataset.done) {\n typeText(duoText, \"Esto es una prueba\", 65).then(() => duoText.dataset.done = \"1\");\n }\n break;\n case \"op-final\":\n if (!finalTextSpan.dataset.done) {\n typeText(finalTextSpan, \"Gracias por ver\", 70).then(() => finalTextSpan.dataset.done = \"1\");\n }\n break;\n }\n });\n }, { threshold: 0.55 });\n\n [\"op-duo-panel\", \"op-final\"].forEach(id => {\n const el = document.getElementById(id);\n if (el) observer.observe(el);\n });\n\n \/\/ Sincroniza estados para permitir volver atr\u00e1s al scrollear\n const stateSections = [\"op-stage\", \"op-duo-panel\", \"op-switch\", \"op-final\"];\n let ticking = false;\n const syncState = () => {\n ticking = false;\n const mid = window.innerHeight * 0.55;\n let activeIndex = -1;\n stateSections.forEach((id, idx) => {\n const el = document.getElementById(id);\n if (!el) return;\n const rect = el.getBoundingClientRect();\n if (rect.top <= mid && rect.bottom >= mid) {\n activeIndex = idx;\n }\n });\n wrapper.classList.toggle(\"is-stage\", activeIndex >= 0);\n wrapper.classList.toggle(\"is-duo\", activeIndex >= 1);\n wrapper.classList.toggle(\"is-bg2\", activeIndex >= 2);\n };\n const requestSync = () => {\n if (ticking) return;\n ticking = true;\n requestAnimationFrame(syncState);\n };\n window.addEventListener(\"scroll\", requestSync, { passive: true });\n window.addEventListener(\"resize\", syncState);\n syncState();\n\n \/\/ Parallax effect for subtle movement\n let lastY = 0;\n const parallax = () => {\n const y = window.scrollY * 0.03;\n if (Math.abs(y - lastY) > 0.5) {\n bg1.style.transform = `scale(1.05) translate3d(0, ${y}px, 0)`;\n bg2.style.transform = `scale(1.05) translate3d(0, ${y}px, 0)`;\n lastY = y;\n }\n if (!prefersReducedMotion) requestAnimationFrame(parallax);\n };\n if (!prefersReducedMotion) requestAnimationFrame(parallax);\n})();\n<\/script>\n<\/body>\n<\/html>\n\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>One Page Animada Cargando<\/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-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":16,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}