{"id":15,"date":"2026-08-28T16:54:43","date_gmt":"2026-08-28T16:54:43","guid":{"rendered":"https:\/\/moriahcompany.com.co\/?page_id=15"},"modified":"2026-08-28T22:54:21","modified_gmt":"2026-08-28T22:54:21","slug":"inicio","status":"publish","type":"page","link":"https:\/\/moriahcompany.com.co\/","title":{"rendered":"Inicio"},"content":{"rendered":"\n<style>\n.wp-block-group.alignwide.has-base-color.has-black-background-color.has-text-color.has-background.has-medium-font-size.is-horizontal.is-content-justification-center.is-layout-flex.wp-block-group-is-layout-flex {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n}\n\nbody {\n    margin-top: 0 !important;\n}\n\n.moriah-header {\n    margin-top: -40px !important;\n    width: 100%;\n    background: rgba(0, 0, 0, 0.92);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n    position: relative;\n    z-index: 9999;\n    top: 0 !important;\n}\n\n.moriah-header-inner {\n    width: min(1600px, calc(100% - 80px));\n    height: 70px;\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 60px;\n    transform: translateY(-8px);\n}\n\n.moriah-logo {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    flex-shrink: 0;\n}\n\n.moriah-logo img {\n    display: block;\n    width: 170px;\n    height: auto;\n}\n\n.moriah-nav {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.moriah-nav a {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 18px;\n    color: rgba(255, 255, 255, 0.78);\n    text-decoration: none;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 0.8px;\n    line-height: 1;\n    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;\n    border-radius: 0;\n    white-space: nowrap;\n    text-transform: uppercase;\n}\n\n.moriah-nav a::after {\n    content: \"\";\n    position: absolute;\n    left: 18px;\n    right: 18px;\n    bottom: 4px;\n    height: 2px;\n    background: #ffd75a;\n    transform: scaleX(0);\n    transform-origin: center;\n    transition: transform 0.3s ease;\n}\n\n.moriah-nav a:hover {\n    color: #ffffff;\n    background: rgba(255, 255, 255, 0.07);\n    transform: translateY(-2px);\n}\n\n.moriah-nav a:hover::after {\n    transform: scaleX(1);\n}\n\n.moriah-services {\n    position: relative;\n}\n\n.moriah-services > a {\n    cursor: pointer;\n    gap: 9px;\n}\n\n.moriah-services > a::before {\n    content: \"\";\n    width: 6px;\n    height: 6px;\n    border-right: 1px solid currentColor;\n    border-bottom: 1px solid currentColor;\n    transform: rotate(45deg);\n    margin-top: -3px;\n    transition: transform 0.3s ease;\n    order: 2;\n}\n\n.moriah-services:hover > a::before {\n    transform: rotate(225deg);\n    margin-top: 3px;\n}\n\n.moriah-submenu {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 240px;\n    padding: 8px 0;\n    background: rgba(5, 5, 5, 0.98);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(8px);\n    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;\n}\n\n.moriah-services:hover .moriah-submenu {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n}\n\n.moriah-submenu a {\n    width: 100%;\n    box-sizing: border-box;\n    justify-content: flex-start;\n    padding: 12px 18px;\n    font-size: 12px;\n    font-weight: 500;\n    letter-spacing: 0.8px;\n    color: rgba(255, 255, 255, 0.75);\n    background: transparent;\n    transform: none !important;\n}\n\n.moriah-submenu a::after {\n    display: none;\n}\n\n.moriah-submenu a:hover {\n    color: #ffffff;\n    background: rgba(255, 215, 90, 0.10);\n}\n\n.moriah-nav .moriah-nav-contact {\n    margin-left: 10px;\n    padding: 10px 22px;\n    color: #050505;\n    background: #ffd75a;\n    border-radius: 0;\n    letter-spacing: 0.8px;\n}\n\n.moriah-nav .moriah-nav-contact:hover {\n    color: #050505;\n    background: #ffe58a;\n    transform: translateY(-3px);\n}\n\n.moriah-nav .moriah-nav-contact::after {\n    display: none;\n}\n\n.moriah-menu-button {\n    display: none;\n    width: 46px;\n    height: 46px;\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    border-radius: 0;\n    background: rgba(255, 255, 255, 0.05);\n    cursor: pointer;\n}\n\n.moriah-menu-button span {\n    display: block;\n    width: 18px;\n    height: 2px;\n    margin: 5px auto;\n    background: #ffffff;\n    transition: transform 0.3s ease;\n}\n\n@media (max-width: 1100px) {\n    .moriah-header-inner {\n        width: calc(100% - 50px);\n        height: 68px;\n        gap: 35px;\n    }\n\n    .moriah-logo img {\n        width: 155px;\n    }\n\n    .moriah-nav {\n        gap: 4px;\n    }\n\n    .moriah-nav a {\n        padding: 9px 14px;\n        font-size: 12px;\n        letter-spacing: 0.7px;\n    }\n\n    .moriah-nav .moriah-nav-contact {\n        padding: 9px 18px;\n    }\n\n    .moriah-submenu {\n        min-width: 210px;\n    }\n}\n\n@media (max-width: 800px) {\n    .moriah-header {\n        margin-top: -40px !important;\n    }\n\n    .moriah-header-inner {\n        width: calc(100% - 30px);\n        height: 65px;\n        justify-content: space-between;\n        gap: 0;\n    }\n\n    .moriah-logo img {\n        width: 145px;\n    }\n\n    .moriah-menu-button {\n        display: block;\n    }\n\n    .moriah-nav {\n        position: absolute;\n        top: 65px;\n        left: 15px;\n        right: 15px;\n        display: none;\n        flex-direction: column;\n        align-items: stretch;\n        gap: 4px;\n        padding: 14px;\n        background: rgba(5, 5, 5, 0.98);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        border-radius: 0;\n        backdrop-filter: blur(15px);\n    }\n\n    .moriah-nav.active {\n        display: flex;\n    }\n\n    .moriah-nav a {\n        justify-content: flex-start;\n        padding: 15px 18px;\n        font-size: 13px;\n        letter-spacing: 0.7px;\n        border-radius: 0;\n    }\n\n    .moriah-services > a {\n        justify-content: space-between;\n    }\n\n    .moriah-submenu {\n        position: static;\n        width: 100%;\n        min-width: 0;\n        padding: 0;\n        border: 0;\n        opacity: 1;\n        visibility: visible;\n        transform: none;\n        display: none;\n        background: rgba(255, 255, 255, 0.03);\n    }\n\n    .moriah-services:hover .moriah-submenu {\n        display: flex;\n    }\n\n    .moriah-submenu a {\n        padding: 12px 28px;\n        font-size: 11px;\n        letter-spacing: 0.6px;\n    }\n\n    .moriah-nav .moriah-nav-contact {\n        margin: 6px 0 0;\n        justify-content: center;\n    }\n}\n<\/style>\n\n<header class=\"moriah-header\">\n    <div class=\"moriah-header-inner\">\n\n        <a href=\"\/\" class=\"moriah-logo\">\n            <img decoding=\"async\" src=\"https:\/\/moriahcompany.com.co\/wp-content\/uploads\/2026\/08\/logo.png\" alt=\"Moriah Company\">\n        <\/a>\n\n        <nav class=\"moriah-nav\" id=\"moriahNav\">\n\n            <a href=\"https:\/\/moriahcompany.com.co\/?page_id=77\">\n                Nosotros\n            <\/a>\n\n            <a href=\"https:\/\/moriahcompany.com.co\/?page_id=118\">\n                Experiencias\n            <\/a>\n\n            <div class=\"moriah-services\">\n\n                <a href=\"https:\/\/moriahcompany.com.co\/?page_id=112\">\n                    Servicios\n                <\/a>\n\n                <div class=\"moriah-submenu\">\n\n                    <a href=\"https:\/\/moriahcompany.com.co\/?page_id=112\">\n                        Video Mapping\n                    <\/a>\n\n                    <a href=\"https:\/\/moriahcompany.com.co\/?page_id=112\">\n                        Experiencias Interactivas\n                    <\/a>\n\n                    <a href=\"https:\/\/moriahcompany.com.co\/?page_id=112\">\n                        Experiencias Inmersivas\n                    <\/a>\n\n                    <a href=\"https:\/\/colombiapirotecnia.com\/\">\n                        Pirotecnia\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n            <a href=\"\/\">\n                Portafolio\n            <\/a>\n\n            <a href=\"#contacto\" class=\"moriah-nav-contact\">\n                Creemos una experiencia \u2192\n            <\/a>\n\n        <\/nav>\n\n        <button class=\"moriah-menu-button\" id=\"moriahMenuButton\" aria-label=\"Abrir men\u00fa\">\n            <span><\/span>\n            <span><\/span>\n        <\/button>\n\n    <\/div>\n<\/header>\n\n<script>\n(function () {\n    const button = document.getElementById(\"moriahMenuButton\");\n    const nav = document.getElementById(\"moriahNav\");\n\n    if (!button || !nav) return;\n\n    button.addEventListener(\"click\", function () {\n        nav.classList.toggle(\"active\");\n    });\n\n    nav.querySelectorAll(\"a\").forEach(function (link) {\n        link.addEventListener(\"click\", function () {\n            nav.classList.remove(\"active\");\n        });\n    });\n})();\n<\/script>\n\n\n\n<style>\n    body {\n        width: 100%;\n        max-width: 100%;\n        margin: 0;\n        padding: 0;\n        overflow-x: hidden;\n    }\n\n    .alignfull {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        margin-left: calc(50% - 50vw) !important;\n        margin-right: calc(50% - 50vw) !important;\n    }\n\nh1, h2, h3, h4, h5, h6 {\n    background-color: var(transparent);\n    font-weight: 400;\n    line-height: 1.4;\n}\n\n.wp-block-post-title {\n    display: none !important;\n}\n\n    .moriah-christmas-row {\n        position: relative;\n        width: 100%;\n        max-width: 100%;\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n        background: #050505;\n        color: #fff;\n        font-family: Arial, Helvetica, sans-serif;\n    }\n\n    .moriah-christmas-row *,\n    .moriah-christmas-row *::before,\n    .moriah-christmas-row *::after {\n        box-sizing: border-box;\n    }\n\n    .moriah-christmas-row .hero {\n        position: relative;\n        width: 100%;\n        height: 100vh;\n        min-height: 700px;\n        overflow: hidden;\n        background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(\"https:\/\/moriahcompany.com.co\/wp-content\/uploads\/2026\/08\/d8930607-e70b-42cd-8474-5742cd0a87b2.png\") center center \/ cover no-repeat;\n    }\n\n    .moriah-christmas-row #christmasCanvas {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        display: block;\n        z-index: 1;\n    }\n\n    .moriah-christmas-row .hero-content {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 5;\n        width: min(900px, 90%);\n        transform: translate(-50%, -50%);\n        text-align: center;\n        pointer-events: none;\n    }\n\n    .moriah-christmas-row .eyebrow {\n        display: inline-block;\n        margin-bottom: 25px;\n        font-size: 12px;\n        letter-spacing: 5px;\n        opacity: 0.7;\n    }\n\n    .moriah-christmas-row .hero h1 {\n    font-size: clamp(28px, 4vw, 60px);\n        line-height: 0.95;\n        font-weight: 700;\n        letter-spacing: -4px;\nfont-family: Georgia, \"Times New Roman\", serif;\n    }\n\n    .moriah-christmas-row .hero h1 span {\n        display: block;\n        background: linear-gradient(90deg, #fff, #ffe7a0, #fff);\n        -webkit-background-clip: text;\n        background-clip: text;\n        color: transparent;\n    }\n\n    .moriah-christmas-row .hero p {\n        margin-top: 35px;\n        font-size: 15px;\n        letter-spacing: 2px;\n        opacity: 0.5;\n    }\n\n    .moriah-christmas-row .services-marquee {\n        position: relative;\n        width: 100%;\n        margin-top: 35px;\n        overflow: hidden;\n        white-space: nowrap;\n        pointer-events: none;\n        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);\n        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);\n    }\n\n    .moriah-christmas-row .services-track {\n        display: inline-flex;\n        align-items: center;\n        width: max-content;\n        animation: servicesMove 28s linear infinite;\n        will-change: transform;\n    }\n\n    .moriah-christmas-row .service-item {\n        display: inline-block;\n        font-size: 14px;\n        font-weight: 400;\n        letter-spacing: 2px;\n        color: rgba(255, 255, 255, 0.55);\n    }\n\n    .moriah-christmas-row .service-separator {\n        display: inline-block;\n        margin: 0 24px;\n        font-size: 9px;\n        color: rgba(255, 220, 120, 0.8);\n        text-shadow: 0 0 8px rgba(255, 210, 80, 0.8);\n    }\n\n    @keyframes servicesMove {\n        from {\n            transform: translateX(0);\n        }\n\n        to {\n            transform: translateX(-50%);\n        }\n    }\n\n    .moriah-christmas-row .hero-buttons {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 14px;\n        margin-top: 28px;\n        pointer-events: auto;\n    }\n\n    .moriah-christmas-row .hero-button {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        min-width: 230px;\n        height: 56px;\n        padding: 0 32px;\n        border: 1px solid transparent;\n        border-radius: 3px;\n        overflow: hidden;\n        text-decoration: none;\n        font-size: 12px;\n        font-weight: 600;\n        letter-spacing: 1.8px;\n        white-space: nowrap;\n        transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;\n    }\n\n    .moriah-christmas-row .hero-button::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        left: -120%;\n        width: 80%;\n        height: 100%;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);\n        transform: skewX(-20deg);\n        transition: left 0.7s ease;\n    }\n\n    .moriah-christmas-row .hero-button:hover::before {\n        left: 140%;\n    }\n\n    .moriah-christmas-row .hero-button-primary {\n        color: #080808;\n        background: linear-gradient(135deg, #fff2a6, #ffd75a);\n        border-color: #ffe27a;\n        box-shadow: 0 0 12px rgba(255, 215, 90, 0.18);\n    }\n\n    .moriah-christmas-row .hero-button-primary:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 8px 30px rgba(255, 215, 90, 0.28), 0 0 20px rgba(255, 215, 90, 0.18);\n    }\n\n    .moriah-christmas-row .hero-button-secondary {\n        color: rgba(255, 255, 255, 0.82);\n        background: rgba(255, 255, 255, 0.025);\n        border-color: rgba(255, 255, 255, 0.32);\n        backdrop-filter: blur(8px);\n        -webkit-backdrop-filter: blur(8px);\n    }\n\n    .moriah-christmas-row .hero-button-secondary:hover {\n        transform: translateY(-3px);\n        color: #fff;\n        border-color: rgba(255, 220, 120, 0.75);\n        background: rgba(255, 220, 120, 0.06);\n        box-shadow: 0 8px 30px rgba(255, 220, 120, 0.1);\n    }\n\n    .moriah-christmas-row .hero-button:active {\n        transform: translateY(-1px) scale(0.98);\n    }\n\n    .star-cursor {\n        position: fixed;\n        top: 0;\n        left: 0;\n        z-index: 999999;\n        width: 22px;\n        height: 22px;\n        pointer-events: none;\n        transform: translate(-50%, -50%) rotate(0deg);\n        filter: drop-shadow(0 0 5px rgba(255, 220, 100, 0.9)) drop-shadow(0 0 12px rgba(255, 180, 40, 0.55));\n        transition: width 0.15s ease, height 0.15s ease;\n        will-change: transform, left, top;\n    }\n\n    .star-cursor::before {\n        content: \"\u2726\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        color: #fff4b0;\n        font-size: 24px;\n        line-height: 1;\n        transform: translate(-50%, -50%);\n        text-shadow: 0 0 4px #fff, 0 0 8px #ffe37a, 0 0 18px rgba(255, 190, 40, 0.9);\n    }\n\n    .star-cursor::after {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 5px;\n        height: 5px;\n        border-radius: 50%;\n        background: #fff;\n        transform: translate(-50%, -50%);\n        box-shadow: 0 0 8px #fff, 0 0 15px #ffe27a;\n        animation: starPulse 1.4s ease-in-out infinite;\n    }\n\n    @keyframes starPulse {\n\n        0%,\n        100% {\n            opacity: 0.55;\n            transform: translate(-50%, -50%) scale(0.7);\n        }\n\n        50% {\n            opacity: 1;\n            transform: translate(-50%, -50%) scale(1.3);\n        }\n    }\n\n    .star-trail {\n        position: fixed;\n        top: 0;\n        left: 0;\n        z-index: 999998;\n        width: 5px;\n        height: 5px;\n        border-radius: 50%;\n        pointer-events: none;\n        background: #fff4a8;\n        box-shadow: 0 0 5px #fff, 0 0 10px #ffd75a;\n        transform: translate(-50%, -50%);\n        animation: trailFade 0.7s ease-out forwards;\n    }\n\n    @keyframes trailFade {\n        0% {\n            opacity: 0.9;\n            transform: translate(-50%, -50%) scale(1);\n        }\n\n        100% {\n            opacity: 0;\n            transform: translate(-50%, -50%) scale(0.1);\n        }\n    }\n\n    @media (max-width: 768px) {\n        .moriah-christmas-row .hero {\n            min-height: 600px;\n        }\n\n        .moriah-christmas-row .hero h1 {\n            letter-spacing: -2px;\n        }\n\n        .moriah-christmas-row .hero p {\n            font-size: 12px;\n        }\n    }\n\n    @media (max-width: 600px) {\n        .moriah-christmas-row .hero-buttons {\n            flex-direction: column;\n            gap: 10px;\n            margin-top: 24px;\n        }\n\n        .moriah-christmas-row .hero-button {\n            width: 220px;\n            min-width: 220px;\n        }\n    }\n\n    @media (pointer: coarse) {\n\n        .star-cursor,\n        .star-trail {\n            display: none;\n        }\n    }\n<\/style>\n<div class=\"moriah-christmas-row\">\n    <section class=\"hero\"> <canvas id=\"christmasCanvas\"><\/canvas>\n        <div class=\"hero-content\">\n            <span class=\"eyebrow\">MORIAH COMPANY<\/span>\n\n            <h1>\n                Transformamos ideas en\n                <span>experiencias memorables<\/span>\n            <\/h1>\n\n            <div class=\"services-marquee\" aria-hidden=\"true\">\n                <div class=\"services-track\">\n                    <span class=\"service-item\">Videomapping<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Shows L\u00e1ser<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Experiencias Inmersivas<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Proyecci\u00f3n Arquitect\u00f3nica<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Show Timecode<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Desarrollos Interactivos<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Eventos de Gran Impacto<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Alumbrados Navide\u00f1os<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n\n                    <span class=\"service-item\">Videomapping<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Shows L\u00e1ser<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Experiencias Inmersivas<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Proyecci\u00f3n Arquitect\u00f3nica<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Show Timecode<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Desarrollos Interactivos<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Eventos de Gran Impacto<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                    <span class=\"service-item\">Alumbrados Navide\u00f1os<\/span>\n                    <span class=\"service-separator\">\u2726<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"hero-buttons\">\n                <a href=\"https:\/\/moriahcompany.com.co\/?page_id=118\" class=\"hero-button hero-button-primary\">\n                    VIVE LA EXPERIENCIA\n                <\/a>\n\n                <a href=\"#contacto\" class=\"hero-button hero-button-secondary\">\n                    \u00bfCREAMOS ALGO JUNTOS?\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n<script> (function () { const canvas = document.getElementById(\"christmasCanvas\"); if (!canvas) return; const ctx = canvas.getContext(\"2d\"); const config = { spacing: 30, mouseRadius: 65, mouseForce: 95, spring: 0.025, friction: 0.88, ledSpacing: 24, ledRadius: 3, waveSpeed: 0.001 }; let width = 0; let height = 0; let strips = []; let time = 0; const mouse = { x: -1000, y: -1000, velocityX: 0, velocityY: 0, active: false }; const colors = [{ r: 255, g: 55, b: 55 }, { r: 70, g: 255, b: 110 }, { r: 255, g: 215, b: 70 }, { r: 90, g: 170, b: 255 }]; function resizeCanvas() { const dpr = Math.min(window.devicePixelRatio || 1, 2); width = canvas.parentElement.clientWidth; height = canvas.parentElement.clientHeight; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = width + \"px\"; canvas.style.height = height + \"px\"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); createStrips(); } function createStrips() { strips = []; const numberOfStrips = Math.ceil(width \/ config.spacing) + 2; for (let i = 0; i < numberOfStrips; i++) { const strip = { baseX: i * config.spacing, x: i * config.spacing, velocity: 0, length: 180 + Math.random() * 350, phase: Math.random() * Math.PI * 2, speed: 0.7 + Math.random() * 0.7, color: colors[Math.floor(Math.random() * colors.length)], leds: [], wave: 0, waveVelocity: 0, wavePhase: Math.random() * Math.PI * 2 }; strips.push(strip); createLEDs(strip); } } function createLEDs(strip) { strip.leds = []; const numberOfLEDs = Math.floor(strip.length \/ config.ledSpacing); for (let i = 0; i < numberOfLEDs; i++) { strip.leds.push({ y: i * config.ledSpacing, phase: Math.random() * Math.PI * 2, speed: 0.002 + Math.random() * 0.004, brightness: 0.55 + Math.random() * 0.45 }); } } canvas.addEventListener(\"mousemove\", function (event) { const rect = canvas.getBoundingClientRect(); const newX = event.clientX - rect.left; const newY = event.clientY - rect.top; mouse.velocityX = newX - mouse.x; mouse.velocityY = newY - mouse.y; mouse.x = newX; mouse.y = newY; mouse.active = true; }); canvas.addEventListener(\"mouseleave\", function () { mouse.active = false; mouse.velocityX = 0; mouse.velocityY = 0; mouse.x = -1000; mouse.y = -1000; }); function updateStrips() { for (let i = 0; i < strips.length; i++) { const strip = strips[i]; let targetWave = 0; if (mouse.active) { const distance = Math.abs(mouse.x - strip.baseX); if (distance < config.mouseRadius) { const influence = 1 - distance \/ config.mouseRadius; const direction = mouse.x > strip.baseX ? -1 : 1; const mouseSpeed = Math.min(Math.abs(mouse.velocityX), 25); const energy = 0.8 + mouseSpeed * 0.08; targetWave = direction * influence * energy; } } strip.waveVelocity += (targetWave - strip.wave) * 0.075; strip.waveVelocity *= 0.88; strip.wave += strip.waveVelocity; const naturalWave = Math.sin(time * config.waveSpeed * strip.speed + strip.phase) * 1.5; const targetX = strip.baseX + naturalWave; const difference = targetX - strip.x; strip.velocity += difference * config.spring; strip.velocity *= config.friction; strip.x += strip.velocity; } } function getWavePosition(strip, y, timeOffset) { const progress = Math.min(y \/ strip.length, 1); const strength = Math.pow(progress, 1.35); const wave1 = Math.sin(progress * Math.PI * 3.2 + timeOffset + strip.wavePhase); const wave2 = Math.sin(progress * Math.PI * 6.1 + timeOffset * 0.72 + strip.wavePhase * 1.73); const organicWave = wave1 * 0.72 + wave2 * 0.28; const amplitude = strip.wave * config.mouseForce * strength; return organicWave * amplitude; } function drawStrips() { for (let i = 0; i < strips.length; i++) { const strip = strips[i]; const waveTime = time * 0.012; ctx.beginPath(); const segments = 70; for (let p = 0; p <= segments; p++) { const progress = p \/ segments; const y = progress * strip.length; const waveX = getWavePosition(strip, y, waveTime); const x = strip.x + waveX; if (p === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.strokeStyle = \"rgba(45,45,45,0.9)\"; ctx.lineWidth = 1; ctx.stroke(); for (let j = 0; j < strip.leds.length; j++) { const led = strip.leds[j]; const y = led.y; if (y > height) continue; const waveX = getWavePosition(strip, y, waveTime); const ledX = strip.x + waveX; const blink = (Math.sin(time * led.speed + led.phase) + 1) \/ 2; const brightness = 0.4 + blink * led.brightness; const color = strip.color; const glow = ctx.createRadialGradient(ledX, y, 0, ledX, y, 18); glow.addColorStop(0, `rgba( ${color.r}, ${color.g}, ${color.b}, ${0.42 * brightness} )`); glow.addColorStop(0.35, `rgba( ${color.r}, ${color.g}, ${color.b}, ${0.12 * brightness} )`); glow.addColorStop(1, `rgba( ${color.r}, ${color.g}, ${color.b}, 0 )`); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(ledX, y, 18, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(ledX, y, config.ledRadius, 0, Math.PI * 2); ctx.fillStyle = `rgba( ${Math.min(255, color.r + 50)}, ${Math.min(255, color.g + 50)}, ${Math.min(255, color.b + 50)}, ${brightness} )`; ctx.fill(); } } } function drawCursorInfluence() { if (!mouse.active) return; const gradient = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, config.mouseRadius); gradient.addColorStop(0, \"rgba(255,255,255,0.035)\"); gradient.addColorStop(0.4, \"rgba(255,255,255,0.012)\"); gradient.addColorStop(1, \"rgba(255,255,255,0)\"); ctx.fillStyle = gradient; ctx.fillRect(mouse.x - config.mouseRadius, mouse.y - config.mouseRadius, config.mouseRadius * 2, config.mouseRadius * 2); } function animate() { time += 16; mouse.velocityX *= 0.92; mouse.velocityY *= 0.92; ctx.clearRect(0, 0, width, height); updateStrips(); drawStrips(); drawCursorInfluence(); requestAnimationFrame(animate); } window.addEventListener(\"resize\", resizeCanvas); resizeCanvas(); animate(); const starCursor = document.createElement(\"div\"); starCursor.className = \"star-cursor\"; document.body.appendChild(starCursor); let cursorX = 0; let cursorY = 0; let currentX = 0; let currentY = 0; document.addEventListener(\"mousemove\", function (event) { cursorX = event.clientX; cursorY = event.clientY; }); function animateStarCursor() { currentX += (cursorX - currentX) * 0.22; currentY += (cursorY - currentY) * 0.22; starCursor.style.left = currentX + \"px\"; starCursor.style.top = currentY + \"px\"; requestAnimationFrame(animateStarCursor); } animateStarCursor(); let lastTrailX = 0; let lastTrailY = 0; document.addEventListener(\"mousemove\", function (event) { const distance = Math.hypot(event.clientX - lastTrailX, event.clientY - lastTrailY); if (distance > 30) { createStarTrail(event.clientX, event.clientY); lastTrailX = event.clientX; lastTrailY = event.clientY; } }); function createStarTrail(x, y) { const trail = document.createElement(\"div\"); trail.className = \"star-trail\"; trail.style.left = x + \"px\"; trail.style.top = y + \"px\"; document.body.appendChild(trail); setTimeout(function () { trail.remove(); }, 700); } document.addEventListener(\"mousedown\", function () { starCursor.style.transform = \"translate(-50%, -50%) scale(1.45) rotate(20deg)\"; }); document.addEventListener(\"mouseup\", function () { starCursor.style.transform = \"translate(-50%, -50%) scale(1) rotate(0deg)\"; }); })(); <\/script>\n\n\n\n<style>\n\n    .experience-section {\n\n        position: relative;\n\n        width: 100%;\n\n        min-height: 100vh;\n\n        padding:\n            140px 0 120px;\n\n        background:\n            radial-gradient(circle at 50% 0%,\n                rgba(255, 255, 255, 0.025),\n                transparent 45%),\n            #000000;\n\n        overflow: hidden;\n    }\n\n\n    .experience-section::before {\n\n        content: \"\";\n\n        position: absolute;\n\n        top: 0;\n        left: 50%;\n\n        width: 1px;\n        height: 100%;\n\n        background:\n            linear-gradient(to bottom,\n                transparent,\n                rgba(255, 255, 255, 0.03),\n                transparent);\n\n        transform:\n            translateX(-50%);\n\n        pointer-events: none;\n    }\n\n\n    .experience-container {\n\n        position: relative;\n\n        z-index: 2;\n\n        width:\n            min(1400px,\n                calc(100% - 100px));\n\n        margin: 0 auto;\n    }\n\n    .experience-intro {\n\n        display: grid;\n\n        grid-template-columns:\n            minmax(0, 1fr) 430px;\n\n        gap: 0px;\n\n        width: 100%;\n\n        margin-bottom: 80px;\n\n        align-items: start;\n    }\n\n    .experience-intro-text {\n\n        width: 100%;\n    }\n\n\n    .experience-intro h1 {\n\n        margin: 0;\n\n        font-family:\n            Georgia,\n            \"Times New Roman\",\n            serif;\n\n        font-size:\n            clamp(52px,\n                6.5vw,\n                100px);\n\n        line-height: 0.95;\n\n        letter-spacing: 0px;\n\n        font-weight: 240;\n\n        color: #f4f4f4;\n\n    }\n\n\n    .experience-intro h1 span {\n\n        font-style: italic;\n\n        color:\n            rgba(255,\n                255,\n                255,\n                0.46);\n    }\n\n\n    .experience-intro p {\n\n        width: min(960px,\n                100%);\n\n        margin-top: 35px;\n\n        font-size: 16px;\n\n        line-height: 1.85;\n\n        letter-spacing: 0.25px;\n\n        font-weight: 400;\n\n        color: #f4f4f4;\n\n        text-align: justify;\n    }\n\n\n\n    .experience-projects {\n\n        display: grid;\n\n        grid-template-columns:\n            repeat(3, 1fr);\n\n        gap: 16px;\n\n        width: 100%;\n    }\n\n\n    .experience-card {\n\n        position: relative;\n\n        width: 100%;\n\n        aspect-ratio: 1.25 \/ 1;\n\n        overflow: hidden;\n\n        background: #0c0c0c;\n\n        cursor: pointer;\n    }\n\n\n    .experience-image {\n\n        position: relative;\n\n        width: 100%;\n        height: 100%;\n\n        overflow: hidden;\n    }\n\n\n    .experience-image img {\n\n        width: 100%;\n        height: 100%;\n\n        display: block;\n\n        object-fit: cover;\n\n        transform: scale(1.02);\n\n        filter:\n            brightness(0.68) saturate(0.78) contrast(1.03);\n\n        transition:\n            transform 1s cubic-bezier(0.16,\n                1,\n                0.3,\n                1),\n\n            filter 1s ease;\n    }\n\n\n    .experience-gradient {\n\n        position: absolute;\n\n        inset: 0;\n\n        background:\n            linear-gradient(to top,\n                rgba(0, 0, 0, 0.88),\n                rgba(0, 0, 0, 0.25) 55%,\n                rgba(0, 0, 0, 0.05) 100%);\n\n        z-index: 1;\n\n        pointer-events: none;\n    }\n\n\n    .experience-info {\n\n        position: absolute;\n\n        left: 28px;\n        right: 28px;\n        bottom: 24px;\n\n        z-index: 2;\n    }\n\n    .experience-info h2 {\n\n        margin: 0;\n\n        font-family:\n            Arial,\n            Helvetica,\n            sans-serif;\n\n        font-size: 18px;\n\n        font-weight: 500;\n\n        letter-spacing: 3px;\n\n        color: #ffffff;\n\n        transition:\n            letter-spacing 0.45s ease,\n            transform 0.45s ease;\n    }\n\n\n    .experience-card:hover .experience-image img {\n\n        transform:\n            scale(1.08);\n\n        filter:\n            brightness(0.86) saturate(1.02) contrast(1.03);\n    }\n\n\n    .experience-card:hover .experience-info h2 {\n\n        letter-spacing: 4px;\n\n        transform:\n            translateX(4px);\n    }\n\n\n    .experience-statement {\n\n        position: relative;\n\n        width: 100%;\n\n        margin-top: 100px;\n\n        padding-top: 34px;\n\n        border-top:\n            1px solid rgba(255,\n                255,\n                255,\n                0.12);\n    }\n\n\n    .experience-statement h2 {\n\n        margin: 0;\n\n        font-family:\n            Georgia,\n            \"Times New Roman\",\n            serif;\n\n        font-size:\n            clamp(42px,\n                5.6vw,\n                84px);\n\n        line-height: 0.95;\n\n        letter-spacing: -2px;\n\n        font-weight: 400;\n\n        color: #eeeeee;\n    }\n\n\n    .experience-statement h2 span {\n\n        font-style: italic;\n\n        color:\n            rgba(255,\n                255,\n                255,\n                0.42);\n    }\n\n\n    .experience-intro,\n    .experience-card,\n    .experience-statement {\n\n        animation:\n            experienceFadeUp 1s cubic-bezier(0.16,\n                1,\n                0.3,\n                1) both;\n    }\n\n\n    .experience-card:nth-child(1) {\n        animation-delay: 0.05s;\n    }\n\n    .experience-card:nth-child(2) {\n        animation-delay: 0.12s;\n    }\n\n    .experience-card:nth-child(3) {\n        animation-delay: 0.19s;\n    }\n\n    .experience-statement {\n        animation-delay: 0.28s;\n    }\n\n\n    @keyframes experienceFadeUp {\n\n        from {\n\n            opacity: 0;\n\n            transform:\n                translateY(30px);\n        }\n\n        to {\n\n            opacity: 1;\n\n            transform:\n                translateY(0);\n        }\n    }\n\n\n    @media (max-width: 1000px) {\n\n        .experience-container {\n\n            width:\n                calc(100% - 50px);\n        }\n\n\n        .experience-intro h1 {\n\n            font-size: 62px;\n        }\n\n\n        .experience-projects {\n\n            gap: 10px;\n        }\n\n\n        .experience-info {\n\n            left: 20px;\n            right: 20px;\n            bottom: 18px;\n        }\n\n\n        .experience-info h2 {\n\n            font-size: 14px;\n\n            letter-spacing: 2px;\n        }\n    }\n\n\n    @media (max-width: 700px) {\n\n        .experience-section {\n\n            padding:\n                100px 0 80px;\n        }\n\n\n        .experience-container {\n\n            width:\n                calc(100% - 30px);\n        }\n\n\n        .experience-intro {\n\n            grid-template-columns: 1fr;\n\n            gap: 35px;\n\n            margin-bottom: 50px;\n        }\n\n        .experience-featured-image {\n\n            height: 240px;\n        }\n\n\n        .experience-intro h1 {\n\n            font-size: 46px;\n\n            letter-spacing: -2px;\n        }\n\n\n        .experience-intro p {\n\n            margin-top: 25px;\n\n            font-size: 14px;\n\n            line-height: 1.7;\n        }\n\n\n        .experience-projects {\n\n            grid-template-columns:\n                1fr;\n\n            gap: 14px;\n        }\n\n\n        .experience-card {\n\n            aspect-ratio: 16 \/ 10;\n        }\n\n\n        .experience-info {\n\n            left: 20px;\n            right: 20px;\n            bottom: 18px;\n        }\n\n        .experience-info h2 {\n\n            font-size: 14px;\n\n            letter-spacing: 2px;\n        }\n\n        .character-scene {\n\n            width: 100%;\n\n            height: 240px;\n\n            transform: none;\n\n            overflow: hidden;\n        }\n\n\n        #fireworksCanvas {\n\n            left: -35%;\n\n            top: -120px;\n\n            width: 170%;\n\n            height: 420px;\n        }\n\n\n        .character-image {\n\n            width: 100%;\n\n            max-width: 280px;\n            height: auto;\n        }\n\n    }\n\n    .character-scene {\n\n        position: relative;\n\n        width: 100%;\n\n        height: 360px;\n\n        overflow: visible;\n\n        display: flex;\n\n        align-items: flex-end;\n\n        justify-content: center;\n\n        background:\n            radial-gradient(circle at center bottom,\n                rgba(30, 30, 30, 0.35),\n                transparent 65%);\n    }\n\n\n    #fireworksCanvas {\n\n        position: absolute;\n\n        left: -40%;\n        top: -180px;\n\n        width: 180%;\n        height: 600px;\n\n        z-index: 1;\n\n        pointer-events: none;\n\n        overflow: visible;\n    }\n\n\n    .character-image {\n        position: relative;\n\n        z-index: 3;\n\n        width: 100%;\n\n        max-width: 800px;\n\n        height: auto;\n\n        display: block;\n\n        object-fit: contain;\n\n        filter:\n            drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));\n\n        animation:\n            characterFloat 4s ease-in-out infinite;\n    }\n\n\n    @keyframes characterFloat {\n\n        0%,\n        100% {\n\n            transform:\n                translateY(0) rotate(0deg);\n        }\n\n        50% {\n\n            transform:\n                translateY(-10px) rotate(0.8deg);\n        }\n    }\n<\/style>\n\n\n<section class=\"experience-section\">\n\n    <div class=\"experience-container\">\n\n\n        <div class=\"experience-intro\">\n\n            <div class=\"experience-intro-text\">\n\n                <h1>\n                    LA EXPERIENCIA\n                    <span> <br> \u00a1SE DEMUESTRA,<br><\/span>\n                    CON RESULTADOS!\n                <\/h1>\n\n                <p>\n                    Hemos trabajado junto a diferentes alcald\u00edas y entidades\n                    territoriales, desarrollando proyectos que integran\n                    iluminaci\u00f3n, tecnolog\u00eda, creatividad y entretenimiento\n                    para transformar espacios p\u00fablicos en experiencias que\n                    conectan con las comunidades. Cada proyecto nace de\n                    comprender el territorio, sus necesidades y su identidad,\n                    para crear propuestas que no solo sorprenden, sino que\n                    generan momentos memorables y fortalecen la relaci\u00f3n\n                    entre las ciudades y quienes las habitan.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"experience-featured-image\">\n\n                <div class=\"character-scene\">\n\n                    <canvas id=\"fireworksCanvas\"><\/canvas>\n\n                    <img decoding=\"async\" src=\"https:\/\/moriahcompany.com.co\/wp-content\/uploads\/2026\/08\/pnglogo.png\" class=\"character-image\" alt=\"Moriah Company\">\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n        <div class=\"experience-projects\">\n\n\n            <!-- SOACHA -->\n\n            <article class=\"experience-card\">\n\n                <div class=\"experience-image\">\n\n                    <img decoding=\"async\" src=\"images\/soacha.jpg\" alt=\"Proyecto realizado en Soacha\">\n\n                    <div class=\"experience-gradient\"><\/div>\n\n                    <div class=\"experience-info\">\n\n                        <h2>\n                            SOACHA\n                        <\/h2>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/article>\n\n\n            <!-- FACATATIV\u00c1 -->\n\n            <article class=\"experience-card\">\n\n                <div class=\"experience-image\">\n\n                    <img decoding=\"async\" src=\"images\/facatativa.jpg\" alt=\"Proyecto realizado en Facatativ\u00e1\">\n\n                    <div class=\"experience-gradient\"><\/div>\n\n                    <div class=\"experience-info\">\n\n                        <h2>\n                            FACATATIV\u00c1\n                        <\/h2>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/article>\n\n\n            <!-- BARRANCABERMEJA -->\n\n            <article class=\"experience-card\">\n\n                <div class=\"experience-image\">\n\n                    <img decoding=\"async\" src=\"images\/barrancabermeja.jpg\" alt=\"Proyecto realizado en Barrancabermeja\">\n\n                    <div class=\"experience-gradient\"><\/div>\n\n                    <div class=\"experience-info\">\n\n                        <h2>\n                            BARRANCABERMEJA\n                        <\/h2>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/article>\n\n\n        <\/div>\n\n\n<\/div><\/section>\n\n\n\n<script>\n\n    const fireworksCanvas =\n        document.getElementById(\n            \"fireworksCanvas\"\n        );\n\n    const fireworksCtx =\n        fireworksCanvas.getContext(\"2d\");\n\n\n    let fireworksWidth = 0;\n    let fireworksHeight = 0;\n\n    let fireworks = [];\n    let particles = [];\n\n    let fireworksTime = 0;\n\n\n\n    function resizeFireworks() {\n\n        const dpr =\n            Math.min(\n                window.devicePixelRatio || 1,\n                2\n            );\n\n        const rect =\n            fireworksCanvas.getBoundingClientRect();\n\n        fireworksWidth =\n            rect.width;\n\n        fireworksHeight =\n            rect.height;\n\n        fireworksCanvas.width =\n            fireworksWidth * dpr;\n\n        fireworksCanvas.height =\n            fireworksHeight * dpr;\n\n        fireworksCtx.setTransform(\n            dpr,\n            0,\n            0,\n            dpr,\n            0,\n            0\n        );\n    }\n\n\n    function createFirework() {\n\n        const x =\n            120 +\n            Math.random() *\n            (\n                fireworksWidth -\n                240\n            );\n\n\n        const targetY =\n            90 +\n            Math.random() *\n            (\n                fireworksHeight *\n                0.42\n            );\n\n\n        fireworks.push({\n\n            x: x,\n\n            y: fireworksHeight,\n\n            targetY: targetY,\n\n            speed:\n                5 +\n                Math.random() * 2.5,\n\n            exploded: false,\n\n            color:\n                getFireworkColor()\n\n        });\n    }\n\n\n    function getFireworkColor() {\n\n        const colors = [\n\n            {\n                r: 255,\n                g: 210,\n                b: 80\n            },\n\n            {\n                r: 255,\n                g: 90,\n                b: 90\n            },\n\n            {\n                r: 90,\n                g: 200,\n                b: 255\n            },\n\n            {\n                r: 255,\n                g: 255,\n                b: 255\n            }\n\n        ];\n\n\n        return colors[\n            Math.floor(\n                Math.random() *\n                colors.length\n            )\n        ];\n    }\n\n\n    function explodeFirework(firework) {\n\n        const amount =\n            65 +\n            Math.floor(\n                Math.random() *\n                45\n            );\n\n\n        for (\n            let i = 0;\n            i < amount;\n            i++\n        ) {\n\n            const angle =\n                Math.random() *\n                Math.PI *\n                2;\n\n\n            const speed =\n                1.5 +\n                Math.random() *\n                4.5;\n\n\n            particles.push({\n\n                x:\n                    firework.x,\n\n                y:\n                    firework.targetY,\n\n                vx:\n                    Math.cos(angle) *\n                    speed,\n\n                vy:\n                    Math.sin(angle) *\n                    speed,\n\n                gravity:\n                    0.035 +\n                    Math.random() *\n                    0.025,\n\n                friction:\n                    0.985,\n\n                life: 1,\n\n                decay:\n                    0.012 +\n                    Math.random() *\n                    0.012,\n\n                size:\n                    1 +\n                    Math.random() *\n                    1.8,\n\n                color:\n                    firework.color\n\n            });\n        }\n    }\n\n\n    function updateFireworks() {\n\n        for (\n            let i = fireworks.length - 1;\n            i >= 0;\n            i--\n        ) {\n\n            const firework =\n                fireworks[i];\n\n\n            if (\n                !firework.exploded\n            ) {\n\n                firework.y -=\n                    firework.speed;\n\n\n                if (\n                    firework.y <=\n                    firework.targetY\n                ) {\n\n                    firework.exploded =\n                        true;\n\n\n                    explodeFirework(\n                        firework\n                    );\n\n\n                    fireworks.splice(\n                        i,\n                        1\n                    );\n                }\n\n            }\n\n        }\n    }\n\n    function updateParticles() {\n\n        for (\n            let i = particles.length - 1;\n            i >= 0;\n            i--\n        ) {\n\n            const particle =\n                particles[i];\n\n\n            particle.vx *=\n                particle.friction;\n\n            particle.vy *=\n                particle.friction;\n\n\n            particle.vy +=\n                particle.gravity;\n\n\n            particle.x +=\n                particle.vx;\n\n            particle.y +=\n                particle.vy;\n\n\n            particle.life -=\n                particle.decay;\n\n\n            if (\n                particle.life <= 0\n            ) {\n\n                particles.splice(\n                    i,\n                    1\n                );\n            }\n        }\n    }\n\n    function drawFireworks() {\n\n        fireworksCtx.clearRect(\n            0,\n            0,\n            fireworksWidth,\n            fireworksHeight\n        );\n\n\n        for (\n            const firework\n            of fireworks\n        ) {\n\n            fireworksCtx.beginPath();\n\n            fireworksCtx.arc(\n                firework.x,\n                firework.y,\n                2,\n                0,\n                Math.PI * 2\n            );\n\n\n            fireworksCtx.fillStyle =\n                `rgb(\n                ${firework.color.r},\n                ${firework.color.g},\n                ${firework.color.b}\n            )`;\n\n\n            fireworksCtx.shadowBlur =\n                12;\n\n\n            fireworksCtx.shadowColor =\n                `rgb(\n                ${firework.color.r},\n                ${firework.color.g},\n                ${firework.color.b}\n            )`;\n\n\n            fireworksCtx.fill();\n\n        }\n\n\n        fireworksCtx.shadowBlur = 0;\n\n\n        for (\n            const particle\n            of particles\n        ) {\n\n            const alpha =\n                Math.max(\n                    0,\n                    particle.life\n                );\n\n\n            fireworksCtx.beginPath();\n\n\n            fireworksCtx.arc(\n                particle.x,\n                particle.y,\n                particle.size,\n                0,\n                Math.PI * 2\n            );\n\n\n            fireworksCtx.fillStyle =\n                `rgba(\n                ${particle.color.r},\n                ${particle.color.g},\n                ${particle.color.b},\n                ${alpha}\n            )`;\n\n\n            fireworksCtx.shadowBlur =\n                10;\n\n\n            fireworksCtx.shadowColor =\n                `rgb(\n                ${particle.color.r},\n                ${particle.color.g},\n                ${particle.color.b}\n            )`;\n\n\n            fireworksCtx.fill();\n\n        }\n\n\n        fireworksCtx.shadowBlur = 0;\n    }\n\n    function animateFireworks() {\n\n        fireworksTime++;\n\n\n        updateFireworks();\n\n        updateParticles();\n\n        drawFireworks();\n\n\n        \/*\n           Cada cierto tiempo\n           aparece un nuevo fuego artificial\n        *\/\n\n        if (\n            fireworksTime % 55 === 0\n        ) {\n\n            createFirework();\n        }\n\n\n        requestAnimationFrame(\n            animateFireworks\n        );\n    }\n\n\n    window.addEventListener(\n        \"resize\",\n        resizeFireworks\n    );\n\n\n    resizeFireworks();\n\n    animateFireworks();\n<\/script>\n\n\n\n<style>\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\nbody {\n    width: 100%;\n    min-height: 100vh;\n    background: #050505;\n    color: #ffffff;\n    font-family: Arial, Helvetica, sans-serif;\n    overflow-x: hidden;\n}\n\n.services-section {\n    width: 100%;\n    background: #000000;\n}\n\n.services-intro {\n    width: min(1400px, calc(100% - 100px));\n    margin: 0 auto 110px;\n}\n\n.services-label {\n    display: block;\n    margin-bottom: 28px;\n    font-size: 10px;\n    letter-spacing: 5px;\n    color: rgba(255, 220, 120, 0.8);\n}\n\n.services-intro h1 {\n    margin: 0;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: clamp(54px, 7vw, 105px);\n    line-height: 0.9;\n    letter-spacing: -4px;\n    font-weight: 400;\n}\n\n.services-intro h1 span {\n    display: block;\n    color: rgba(255, 255, 255, 0.35);\n    font-style: italic;\n}\n\n.services-intro p {\n    width: min(820px, 100%);\n    margin-top: 38px;\n    font-size: 16px;\n    line-height: 1.85;\n    color: rgba(255, 255, 255, 0.48);\n    text-align: justify;\n}\n\n.service-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    width: 100%;\n    min-height: 600px;\n    border-top: 1px solid rgba(255, 255, 255, 0.09);\n}\n\n.service-row.reverse {\n    grid-template-columns: 1fr 1fr;\n}\n\n.service-visual {\n    position: relative;\n    width: 100%;\n    min-height: 600px;\n    overflow: hidden;\n    background: #101010;\n}\n\n.service-visual img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    filter: brightness(0.72) saturate(0.9);\n    transition: transform 0.8s ease, filter 0.8s ease;\n}\n\n.service-visual::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n        to top,\n        rgba(0, 0, 0, 0.55),\n        transparent 55%\n    );\n    pointer-events: none;\n}\n\n.service-row:hover .service-visual img {\n    transform: scale(1.035);\n    filter: brightness(0.85) saturate(1);\n}\n\n.service-content {\n    min-height: 600px;\n    padding: 80px clamp(40px, 6vw, 100px);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    border-left: 1px solid rgba(255, 255, 255, 0.07);\n}\n\n.service-row.reverse .service-content {\n    order: -1;\n    border-left: none;\n    border-right: 1px solid rgba(255, 255, 255, 0.07);\n}\n\n.service-type {\n    margin-bottom: 22px;\n    font-size: 9px;\n    letter-spacing: 4px;\n    color: rgba(255, 220, 120, 0.8);\n}\n\n.service-content h2 {\n    margin: 0;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: clamp(42px, 4.5vw, 72px);\n    line-height: 0.92;\n    letter-spacing: -2px;\n    font-weight: 400;\n}\n\n.service-content h2 span {\n    display: block;\n    color: rgba(255, 255, 255, 0.35);\n    font-style: italic;\n}\n\n.service-content p {\n    max-width: 620px;\n    margin-top: 35px;\n    font-size: 15px;\n    line-height: 1.9;\n    color: #f4f4f4;\n    text-align: justify;\n}\n\n.service-content strong {\n    color: #ffffff;\n}\n\n.service-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-top: 30px;\n}\n\n.service-tags span {\n    padding: 8px 12px;\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    font-size: 9px;\n    letter-spacing: 1.5px;\n    color: rgba(255, 255, 255, 0.48);\n}\n\n.service-link {\n    position: relative;\n    width: fit-content;\n    margin-top: 35px;\n    padding-bottom: 7px;\n    color: #ffffff;\n    text-decoration: none;\n    font-size: 20px;\n    letter-spacing: 2px;\n}\n\n.service-link::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 1px;\n    background: rgba(255, 255, 255, 0.6);\n    transform: scaleX(0);\n    transform-origin: right;\n    transition: transform 0.35s ease;\n}\n\n.service-link:hover::after {\n    transform: scaleX(1);\n    transform-origin: left;\n}\n\n@media (max-width: 900px) {\n    .services-intro {\n        width: calc(100% - 50px);\n    }\n\n    .service-row,\n    .service-row.reverse {\n        grid-template-columns: 1fr;\n    }\n\n    .service-visual {\n        min-height: 420px;\n    }\n\n    .service-content {\n        min-height: auto;\n        padding: 70px 50px;\n        border-left: none;\n        border-right: none;\n    }\n\n    .service-row.reverse .service-content {\n        order: initial;\n        border-left: none;\n        border-right: none;\n    }\n}\n\n@media (max-width: 600px) {\n    .services-section {\n        padding: 100px 0 80px;\n    }\n\n    .services-intro {\n        width: calc(100% - 30px);\n        margin-bottom: 80px;\n    }\n\n    .services-intro h1 {\n        font-size: 46px;\n        letter-spacing: -2px;\n    }\n\n    .services-intro p {\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    .service-visual {\n        min-height: 300px;\n    }\n\n    .service-content {\n        padding: 55px 25px;\n    }\n\n    .service-content h2 {\n        font-size: 42px;\n    }\n\n    .service-content p {\n        font-size: 14px;\n        line-height: 1.8;\n    }\n}\n\n.service-content h2,\n.service-content p,\n.service-type,\n.service-tags span,\n.service-link {\n    transition: transform 0.35s ease, color 0.35s ease;\n}\n\n.service-content h2:hover,\n.service-content p:hover,\n.service-type:hover,\n.service-tags span:hover,\n.service-link:hover {\n    transform: scale(1.04);\n}\n<\/style>\n\n<section id=\"servicios\" class=\"services-section\" aria-label=\"Servicios Moriah Company\">\n\n    <article class=\"service-row\">\n\n        <div class=\"service-visual\">\n            <img decoding=\"async\" src=\"images\/videomapping.jpg\" alt=\"Experiencia de video mapping Moriah Company\">\n        <\/div>\n\n        <div class=\"service-content\">\n\n            <span class=\"service-type\">\n                HISTORIA AUDIOVISUAL\n            <\/span>\n\n            <h2>\n                EXPERIENCIAS DE\n                <span>VIDEO MAPPING<\/span>\n            <\/h2>\n\n            <p>\n                Transformamos fachadas, edificios, escenarios y espacios\n                arquitect\u00f3nicos en superficies capaces de contar historias.\n                Dise\u00f1amos experiencias de video mapping que combinan\n                contenido audiovisual, proyecci\u00f3n, m\u00fasica, iluminaci\u00f3n y\n                sincronizaci\u00f3n para crear espect\u00e1culos de alto impacto.\n                Cada propuesta parte del an\u00e1lisis del espacio y de los\n                objetivos del proyecto para desarrollar una narrativa\n                visual que se integre con la arquitectura y convierta\n                el lugar en parte activa del espect\u00e1culo.\n            <\/p>\n\n            <div class=\"service-tags\">\n                <span>Videomapping<\/span>\n                <span>Proyecci\u00f3n Arquitect\u00f3nica<\/span>\n                <span>Show Timecode<\/span>\n                <span>Contenido Audiovisual<\/span>\n            <\/div>\n\n            <a href=\"#\" class=\"service-link\">\n                - Explorar servicio -\n            <\/a>\n\n        <\/div>\n\n    <\/article>\n\n    <article class=\"service-row reverse\">\n\n        <div class=\"service-visual\">\n            <img decoding=\"async\" src=\"images\/interactivas.jpg\" alt=\"Experiencia interactiva Moriah Company\">\n        <\/div>\n\n        <div class=\"service-content\">\n\n            <span class=\"service-type\">\n                BIOFEEDBACK\n            <\/span>\n\n            <h2>\n                EXPERIENCIAS\n                <span>INTERACTIVAS<\/span>\n            <\/h2>\n\n            <p>\n                Dise\u00f1amos instalaciones en las que las personas dejan de\n                ser espectadores para convertirse en parte de la experiencia.\n                Integramos sensores, c\u00e1maras, botones, sistemas de detecci\u00f3n,\n                procesamiento de imagen, iluminaci\u00f3n y contenido audiovisual\n                para generar respuestas en tiempo real. Cada interacci\u00f3n\n                puede ser diferente, permitiendo que el p\u00fablico active,\n                transforme o modifique aquello que sucede frente a \u00e9l y\n                convirtiendo cada experiencia en algo \u00fanico y participativo.\n            <\/p>\n\n            <div class=\"service-tags\">\n                <span>Sensores<\/span>\n                <span>LED Touch<\/span>\n                <span>Mapping Reactivo<\/span>\n                <span>Interactividad<\/span>\n            <\/div>\n\n            <a href=\"#\" class=\"service-link\">\n                - Explorar servicio -\n            <\/a>\n\n        <\/div>\n\n    <\/article>\n\n    <article class=\"service-row\">\n\n        <div class=\"service-visual\">\n            <img decoding=\"async\" src=\"images\/inmersivas.jpg\" alt=\"Experiencia inmersiva Moriah Company\">\n        <\/div>\n\n        <div class=\"service-content\">\n\n            <span class=\"service-type\">\n                CAPAS DE SENTIDOS\n            <\/span>\n\n            <h2>\n                EXPERIENCIAS\n                <span>INMERSIVAS<\/span>\n            <\/h2>\n\n            <p>\n                Creamos espacios donde el p\u00fablico no simplemente observa\n                una propuesta, sino que entra dentro de ella. Combinamos\n                proyecci\u00f3n, sonido, iluminaci\u00f3n, contenido audiovisual,\n                interacci\u00f3n y dise\u00f1o espacial para construir ambientes que\n                transforman completamente la percepci\u00f3n del lugar. Desde\n                experiencias sensoriales hasta instalaciones de gran escala,\n                desarrollamos cada proyecto pensando en c\u00f3mo la persona\n                recorrer\u00e1, descubrir\u00e1 y vivir\u00e1 el espacio en cada instante.\n            <\/p>\n\n            <div class=\"service-tags\">\n                <span>Inmersivo 360\u00b0<\/span>\n                <span>Sensorial<\/span>\n                <span>Arte + Tecnolog\u00eda<\/span>\n                <span>Dise\u00f1o Espacial<\/span>\n            <\/div>\n\n            <a href=\"#\" class=\"service-link\">\n                - Explorar servicio -\n            <\/a>\n\n        <\/div>\n\n    <\/article>\n\n    <article class=\"service-row reverse\">\n\n        <div class=\"service-visual\">\n            <img decoding=\"async\" src=\"images\/alumbrados-navidenos.jpg\" alt=\"Alumbrado navide\u00f1o Moriah Company\">\n        <\/div>\n\n        <div class=\"service-content\">\n\n            <span class=\"service-type\">\n                ILUMINACI\u00d3N INTELIGENTE\n            <\/span>\n\n            <h2>\n                ALUMBRADOS\n                <span>NAVIDE\u00d1OS<\/span>\n            <\/h2>\n\n            <p>\n                Dise\u00f1amos y ejecutamos proyectos de alumbrado navide\u00f1o para\n                alcald\u00edas, entidades y espacios p\u00fablicos, integrando\n                iluminaci\u00f3n inteligente, estructuras decorativas, programaci\u00f3n,\n                tecnolog\u00eda audiovisual y recursos interactivos. Desarrollamos\n                desde el concepto creativo y la propuesta visual hasta la\n                producci\u00f3n, instalaci\u00f3n, programaci\u00f3n y puesta en funcionamiento,\n                buscando que cada espacio tenga una identidad propia y que la\n                experiencia navide\u00f1a conecte con las comunidades que la viven.\n            <\/p>\n\n            <div class=\"service-tags\">\n                <span>Iluminaci\u00f3n RGB<\/span>\n                <span>DMX<\/span>\n                <span>Programaci\u00f3n<\/span>\n                <span>Shows Navide\u00f1os<\/span>\n            <\/div>\n\n            <a href=\"#\" class=\"service-link\">\n                - Explorar servicio -\n            <\/a>\n\n        <\/div>\n\n    <\/article>\n\n    <article class=\"service-row\">\n\n        <div class=\"service-visual\">\n            <img decoding=\"async\" src=\"images\/creacion-diseno.jpg\" alt=\"Creaci\u00f3n y dise\u00f1o Moriah Company\">\n        <\/div>\n\n        <div class=\"service-content\">\n\n            <span class=\"service-type\">\n                CREATIVIDAD SIN LIMITE\n            <\/span>\n\n            <h2>\n                CREACI\u00d3N\n                <span>Y DISE\u00d1O<\/span>\n            <\/h2>\n\n            <p>\n                Antes de que una experiencia llegue al p\u00fablico, existe un\n                proceso creativo en el que las ideas toman forma. Desarrollamos\n                conceptos, renders 3D, animaciones, motion graphics, personajes,\n                piezas audiovisuales y contenido para diferentes plataformas y\n                formatos. Trabajamos desde la conceptualizaci\u00f3n hasta la\n                producci\u00f3n del contenido final, construyendo una identidad\n                visual coherente que permita visualizar el proyecto antes de\n                su ejecuci\u00f3n y llevarlo posteriormente a escenarios reales.\n            <\/p>\n\n            <div class=\"service-tags\">\n                <span>Renders 3D<\/span>\n                <span>Animaci\u00f3n<\/span>\n                <span>Motion Graphics<\/span>\n                <span>Contenido Audiovisual<\/span>\n            <\/div>\n\n            <a href=\"#\" class=\"service-link\">\n                - Explorar servicio -\n            <\/a>\n\n        <\/div>\n\n    <\/article>\n\n<\/section>\n\n\n\n<style>\n.moriah-wave-carousel {\n    position: relative;\n    width: 100vw;\n    max-width: none;\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n    padding: 0;\n    overflow: hidden;\n    background: #000000;\n}\n\n.moriah-carousel-track {\n    display: flex;\n    width: max-content;\n    gap: 0;\n    margin: 0;\n    padding: 0;\n    animation: moriah-scroll 45s linear infinite;\n}\n\n.moriah-carousel-track:hover {\n    animation-play-state: paused;\n}\n\n.moriah-carousel-item {\n    flex: 0 0 400px;\n    width: 400px;\n    height: 420px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n}\n\n.moriah-carousel-item img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    object-fit: cover;\n    transition: transform 0.6s ease;\n}\n\n.moriah-carousel-item:hover img {\n    transform: scale(1.06);\n}\n\n.moriah-wave {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: 130px;\n    z-index: 10;\n    pointer-events: none;\n}\n\n.moriah-wave svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n.moriah-wave-top {\n    top: 0;\n}\n\n.moriah-wave-top path {\n    fill: #000000;\n}\n\n.moriah-wave-bottom {\n    bottom: 0;\n}\n\n.moriah-wave-bottom path {\n    fill: #000000;\n}\n\n.moriah-wave-blue {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 145px;\n    z-index: 9;\n    pointer-events: none;\n}\n\n.moriah-wave-blue svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n.moriah-wave-blue path {\n    fill: #0877d1;\n}\n\n@keyframes moriah-scroll {\n    from {\n        transform: translateX(0);\n    }\n\n    to {\n        transform: translateX(-50%);\n    }\n}\n\n@media (max-width: 768px) {\n    .moriah-carousel-item {\n        flex-basis: 280px;\n        width: 280px;\n        height: 330px;\n    }\n\n    .moriah-wave {\n        height: 90px;\n    }\n\n    .moriah-wave-blue {\n        height: 100px;\n    }\n}\n<\/style>\n\n<section class=\"moriah-wave-carousel\">\n\n    <div class=\"moriah-carousel-track\">\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=1\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=2\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=3\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=4\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=5\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=6\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=7\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=8\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=9\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=10\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=11\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=12\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=13\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=14\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=15\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=1\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=2\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=3\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=4\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=5\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=6\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=7\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=8\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=9\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=10\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=11\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=12\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=13\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=14\" alt=\"\">\n        <\/div>\n\n        <div class=\"moriah-carousel-item\">\n            <img decoding=\"async\" src=\"https:\/\/picsum.photos\/1200\/900?random=15\" alt=\"\">\n        <\/div>\n\n    <\/div>\n\n    <div class=\"moriah-wave moriah-wave-top\">\n        <svg viewBox=\"0 0 1440 180\" preserveAspectRatio=\"none\">\n            <path d=\"M0 0H1440V55C1370 95 1340 90 1280 55C1200 10 1130 35 1050 65C930 110 820 95 700 55C590 18 500 25 390 55C270 88 180 75 90 48C45 35 20 45 0 55Z\"><\/path>\n        <\/svg>\n    <\/div>\n\n    <div class=\"moriah-wave-blue\">\n        <svg viewBox=\"0 0 1440 180\" preserveAspectRatio=\"none\">\n            <path d=\"M0 125C90 90 160 100 250 125C350 155 450 150 560 115C670 80 750 80 850 120C950 160 1050 165 1160 125C1270 85 1340 70 1440 120V180H0Z\"><\/path>\n        <\/svg>\n    <\/div>\n\n    <div class=\"moriah-wave moriah-wave-bottom\">\n        <svg viewBox=\"0 0 1440 180\" preserveAspectRatio=\"none\">\n            <path d=\"M0 125C90 90 160 100 250 125C350 155 450 150 560 115C670 80 750 80 850 120C950 160 1050 165 1160 125C1270 85 1340 70 1440 120V180H0Z\"><\/path>\n        <\/svg>\n    <\/div>\n\n<\/section>\n\n\n\n<style>\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    background-color: transparent !important;\n}\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\n.process-section {\n    position: relative;\n    width: 100%;\n    min-height: 100vh;\n    background:\n        radial-gradient(\n            circle at 50% 45%,\n            rgba(255,255,255,0.025),\n            transparent 45%\n        ),\n        #000000;\n    color: #ffffff;\n    overflow: hidden;\n}\n\n#processParticles {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    pointer-events: none;\n}\n\n.process-container {\n    position: relative;\n    z-index: 2;\n    width: min(1500px, calc(100% - 100px));\n    margin: 0 auto;\n}\n\n.process-intro {\n    max-width: 880px;\n    margin-bottom: 145px;\n}\n\n.process-label {\n    display: block;\n    margin-bottom: 0px;\n    font-size: 10px;\n    letter-spacing: 5px;\n    color: rgba(255,220,120,0.8);\n}\n\n.process-intro h1 {\n    margin: 0;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: clamp(55px, 7vw, 105px);\n    line-height: 0.9;\n    letter-spacing: 0;\n    font-weight: 400;\n}\n\n.process-intro h1 span {\n    display: block;\n    color: rgba(255,255,255,0.35);\n    font-style: italic;\n}\n\n.process-intro p {\n    max-width: 800px;\n    margin-top: 40px;\n    font-size: 15px;\n    line-height: 1.9;\n    color: #f4f4f4;\n    text-align: justify;\n}\n\n.process-track {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    gap: 34px;\n    width: 100%;\n    min-height: 610px;\n    align-items: start;\n}\n\n.process-line {\n    position: absolute;\n    top: 11px;\n    left: 0;\n    width: 100%;\n    height: 1px;\n    background: rgba(255,255,255,0.12);\n    z-index: 1;\n}\n\n.process-line-active {\n    position: absolute;\n    top: 10px;\n    left: 0;\n    width: 0%;\n    height: 2px;\n    background:\n        linear-gradient(\n            90deg,\n            #4FC3C8,\n            #E6B84A,\n            #B96CFF,\n            #FF6B5C,\n            #5C9BFF,\n            #62E39E,\n            #FF79B6\n        );\n    filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));\n    z-index: 2;\n    transition:\n        width 3.5s\n        cubic-bezier(0.22,1,0.36,1);\n}\n\n.process-step {\n    position: relative;\n    z-index: 5;\n    min-width: 0;\n    padding-top: 0;\n}\n\n.process-dot {\n    position: relative;\n    width: 24px;\n    height: 24px;\n    margin: 0 auto 52px;\n    padding: 0;\n    border: 1px solid rgba(255,255,255,0.28);\n    border-radius: 50%;\n    background: #050505;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition:\n        transform 0.4s ease,\n        border-color 0.4s ease,\n        box-shadow 0.4s ease;\n}\n\n.process-dot span {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.35);\n    transition:\n        background 0.35s ease,\n        box-shadow 0.35s ease,\n        transform 0.35s ease;\n}\n\n.process-card {\n    min-height: 355px;\n    padding: 0 14px;\n    opacity: 0.38;\n    transform: translateY(34px);\n    transition:\n        opacity 0.55s ease,\n        transform 0.55s cubic-bezier(0.16,1,0.3,1);\n}\n\n.process-kicker {\n    display: block;\n    margin-bottom: 15px;\n    font-size: 9px;\n    letter-spacing: 3px;\n    color: rgba(255,255,255,0.38);\n    transition: color 0.35s ease;\n}\n\n.process-card h2 {\n    margin: 0;\n    color: #f4f4f4;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: clamp(25px, 1.35vw, 40px);\n    line-height: 0.95;\n    letter-spacing: -1px;\n    font-weight: 400;\n}\n\n.process-card p {\n    margin-top: 24px;\n    font-size: 13px;\n    line-height: 1.85;\n    color: #f4f4f4;\n}\n\n.process-step.is-active .process-card {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.process-step.is-active .process-dot {\n    transform: scale(1.15);\n    border-color: var(--step-color);\n    box-shadow:\n        0 0 0 5px color-mix(in srgb, var(--step-color) 8%, transparent),\n        0 0 22px color-mix(in srgb, var(--step-color) 35%, transparent);\n}\n\n.process-step.is-active .process-dot span {\n    transform: scale(1.2);\n    background: var(--step-color);\n    box-shadow: 0 0 14px var(--step-color);\n}\n\n.process-step.is-active .process-kicker {\n    color: var(--step-color);\n}\n\n.process-step:hover .process-card {\n    opacity: 1;\n    transform: translateY(-6px);\n}\n\n.process-step:hover .process-dot {\n    transform: scale(1.2);\n}\n\n@media (max-width: 1200px) {\n    .process-container {\n        width: calc(100% - 60px);\n    }\n\n    .process-track {\n        gap: 20px;\n    }\n\n    .process-card {\n        min-height: 380px;\n        padding: 0 8px;\n    }\n\n    .process-card p {\n        font-size: 12px;\n    }\n}\n\n@media (max-width: 900px) {\n    .process-section {\n        padding: 120px 0 100px;\n    }\n\n    .process-intro {\n        margin-bottom: 90px;\n    }\n\n    .process-track {\n        display: flex;\n        flex-direction: column;\n        gap: 45px;\n        padding-left: 42px;\n        min-height: 0;\n    }\n\n    .process-line {\n        top: 0;\n        bottom: 0;\n        left: 11px;\n        width: 1px;\n        height: 100%;\n    }\n\n    .process-line-active {\n        top: 0;\n        left: 10px;\n        width: 2px;\n        height: 0%;\n        transition:\n            height 4s\n            cubic-bezier(0.22,1,0.36,1);\n    }\n\n    .process-step {\n        display: grid;\n        grid-template-columns: 24px minmax(0,1fr);\n        gap: 25px;\n    }\n\n    .process-dot {\n        grid-column: 1;\n        grid-row: 1;\n        margin: 0;\n    }\n\n    .process-card {\n        grid-column: 2;\n        grid-row: 1;\n        min-height: 0;\n        padding: 0;\n    }\n}\n\n@media (max-width: 600px) {\n    .process-section {\n        padding: 100px 0 85px;\n    }\n\n    .process-container {\n        width: calc(100% - 30px);\n    }\n\n    .process-intro {\n        margin-bottom: 75px;\n    }\n\n    .process-intro h1 {\n        font-size: 46px;\n        letter-spacing: -2px;\n    }\n\n    .process-intro p {\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    .process-track {\n        padding-left: 30px;\n        gap: 42px;\n    }\n\n    .process-card h2 {\n        font-size: 31px;\n    }\n\n    .process-card p {\n        font-size: 13px;\n        line-height: 1.8;\n    }\n}\n.experience-intro h1:hover,\n.experience-intro p:hover,\n.experience-info h2:hover,\n.experience-statement h2:hover {\n    transform: scale(1.05);\n    transform-origin: center;\n}\n\n.experience-intro h1,\n.experience-intro p,\n.experience-info h2,\n.experience-statement h2 {\n    display: inline-block;\n    transition: transform 0.4s ease;\n}\n<\/style>\n\n<section id=\"proceso\" class=\"process-section\" aria-label=\"Proceso de trabajo Moriah Company\">\n\n    <canvas id=\"processParticles\" aria-hidden=\"true\"><\/canvas>\n\n    <div class=\"process-container\">\n\n        <div class=\"process-intro\">\n            <h1>\n                \u00bfNUESTROS ETAPAS DE\n                <span>DESARROLLO? <\/span>\n            <\/h1>\n\n            <p>\n                Cada proyecto parte de una idea y evoluciona a trav\u00e9s\n                de diferentes disciplinas, tecnolog\u00edas y procesos que\n                trabajan de manera integrada para convertir una visi\u00f3n\n                en una experiencia real. Desde la primera conversaci\u00f3n\n                hasta la operaci\u00f3n final, cada etapa tiene un prop\u00f3sito\n                y cada decisi\u00f3n hace parte de un mismo concepto.\n            <\/p>\n        <\/div>\n\n        <div class=\"process-track\">\n\n            <div class=\"process-line\"><\/div>\n            <div class=\"process-line-active\"><\/div>\n\n            <article class=\"process-step\" data-color=\"#4FC3C8\" data-effect=\"burst\">\n                <button class=\"process-dot\" type=\"button\" aria-label=\"Idea\">\n                    <span><\/span>\n                <\/button>\n\n                <div class=\"process-card\">\n                    <span class=\"process-kicker\">\n                        CONCEPTO\n                    <\/span>\n\n                    <h2>IDEA<\/h2>\n\n                    <p>\n                        Partimos de una necesidad, un objetivo o una\n                        visi\u00f3n. Escuchamos el contexto, entendemos el\n                        espacio y analizamos el p\u00fablico para convertir\n                        una idea inicial en un concepto con prop\u00f3sito,\n                        identidad y direcci\u00f3n.\n                    <\/p>\n                <\/div>\n            <\/article>\n\n            <article class=\"process-step\" data-color=\"#E6B84A\" data-effect=\"orbit\">\n                <button class=\"process-dot\" type=\"button\" aria-label=\"Dise\u00f1o\">\n                    <span><\/span>\n                <\/button>\n\n                <div class=\"process-card\">\n                    <span class=\"process-kicker\">\n                        DIRECCI\u00d3N\n                    <\/span>\n\n                    <h2>DISE\u00d1O<\/h2>\n\n                    <p>\n                        Desarrollamos la propuesta visual, espacial y\n                        narrativa. Definimos est\u00e9tica, recorrido,\n                        composici\u00f3n y comportamiento para visualizar\n                        c\u00f3mo se ver\u00e1 y c\u00f3mo se sentir\u00e1 la experiencia\n                        antes de llevarla a producci\u00f3n.\n                    <\/p>\n                <\/div>\n            <\/article>\n\n            <article class=\"process-step\" data-color=\"#B96CFF\" data-effect=\"spiral\">\n                <button class=\"process-dot\" type=\"button\" aria-label=\"Tecnolog\u00eda\">\n                    <span><\/span>\n                <\/button>\n\n                <div class=\"process-card\">\n                    <span class=\"process-kicker\">\n                        INTEGRACI\u00d3N\n                    <\/span>\n\n                    <h2>TECNOLOG\u00cdA<\/h2>\n\n                    <p>\n                        Seleccionamos e integramos las herramientas\n                        necesarias para hacer realidad el concepto:\n                        proyecci\u00f3n, iluminaci\u00f3n, sensores, c\u00e1maras,\n                        interacci\u00f3n, programaci\u00f3n, control y sistemas\n                        audiovisuales que funcionan como parte de una\n                        misma arquitectura.\n                    <\/p>\n                <\/div>\n            <\/article>\n\n            <article class=\"process-step\" data-color=\"#FF6B5C\" data-effect=\"wave\">\n                <button class=\"process-dot\" type=\"button\" aria-label=\"Producci\u00f3n\">\n                    <span><\/span>\n                <\/button>\n\n                <div class=\"process-card\">\n                    <span class=\"process-kicker\">\n                        DESARROLLO\n                    <\/span>\n\n                    <h2>PRODUCCI\u00d3N<\/h2>\n\n                    <p>\n                        Convertimos el dise\u00f1o en una soluci\u00f3n ejecutable.\n                        Desarrollamos contenido, programaci\u00f3n, estructuras,\n                        equipos, log\u00edstica y todos los recursos necesarios\n                        para preparar el proyecto antes de llegar al lugar\n                        donde ser\u00e1 presentado.\n                    <\/p>\n                <\/div>\n            <\/article>\n\n            <article class=\"process-step\" data-color=\"#5C9BFF\" data-effect=\"rain\">\n                <button class=\"process-dot\" type=\"button\" aria-label=\"Montaje\">\n                    <span><\/span>\n                <\/button>\n\n                <div class=\"process-card\">\n                    <span class=\"process-kicker\">\n                        IMPLEMENTACI\u00d3N\n                    <\/span>\n\n                    <h2>MONTAJE<\/h2>\n\n                    <p>\n                        Llevamos la propuesta al territorio. Instalamos,\n                        configuramos y conectamos cada componente,\n                        ajustamos el espacio y realizamos la puesta a\n                        punto necesaria para que todos los sistemas\n                        funcionen como un solo proyecto.\n                    <\/p>\n                <\/div>\n            <\/article>\n\n            <article class=\"process-step\" data-color=\"#62E39E\" data-effect=\"spark\">\n                <button class=\"process-dot\" type=\"button\" aria-label=\"Operaci\u00f3n\">\n                    <span><\/span>\n                <\/button>\n\n                <div class=\"process-card\">\n                    <span class=\"process-kicker\">\n                        CONTROL\n                    <\/span>\n\n                    <h2>OPERACI\u00d3N<\/h2>\n\n                    <p>\n                        Realizamos pruebas, calibraci\u00f3n, sincronizaci\u00f3n\n                        y control t\u00e9cnico durante la ejecuci\u00f3n. Cada\n                        elemento debe responder con precisi\u00f3n para que\n                        el resultado final sea estable, fluido y\n                        consistente de principio a fin.\n                    <\/p>\n                <\/div>\n            <\/article>\n\n            <article class=\"process-step\" data-color=\"#FF79B6\" data-effect=\"halo\">\n                <button class=\"process-dot\" type=\"button\" aria-label=\"Experiencia\">\n                    <span><\/span>\n                <\/button>\n\n                <div class=\"process-card\">\n                    <span class=\"process-kicker\">\n                        RESULTADO\n                    <\/span>\n\n                    <h2>EXPERIENCIA<\/h2>\n\n                    <p>\n                        Todo converge en un mismo objetivo: transformar\n                        el espacio y generar una experiencia que conecte\n                        con las personas. El proceso termina cuando\n                        la tecnolog\u00eda deja de sentirse como tecnolog\u00eda\n                        y comienza a convertirse en emoci\u00f3n.\n                    <\/p>\n                <\/div>\n            <\/article>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.querySelector(\".process-section\");\n    const track = document.querySelector(\".process-track\");\n    const activeLine = document.querySelector(\".process-line-active\");\n    const steps = document.querySelectorAll(\".process-step\");\n    const canvas = document.getElementById(\"processParticles\");\n\n    if (!section || !track || !activeLine || !steps.length || !canvas) {\n        return;\n    }\n\n    const ctx = canvas.getContext(\"2d\");\n\n    let width = 0;\n    let height = 0;\n    let dpr = 1;\n    let particles = [];\n    let animationFrame = null;\n\n    const particleCount = 110;\n\n    steps.forEach(step => {\n        const color = step.dataset.color || \"#ffffff\";\n        step.style.setProperty(\"--step-color\", color);\n    });\n\n    function resizeCanvas() {\n        const rect = section.getBoundingClientRect();\n\n        dpr = Math.min(window.devicePixelRatio || 1, 2);\n\n        width = rect.width;\n        height = rect.height;\n\n        canvas.width = width * dpr;\n        canvas.height = height * dpr;\n\n        canvas.style.width = width + \"px\";\n        canvas.style.height = height + \"px\";\n\n        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    }\n\n    function hexToRgb(hex) {\n        const clean = hex.replace(\"#\", \"\");\n\n        return {\n            r: parseInt(clean.substring(0, 2), 16),\n            g: parseInt(clean.substring(2, 4), 16),\n            b: parseInt(clean.substring(4, 6), 16)\n        };\n    }\n\n    function randomBetween(min, max) {\n        return Math.random() * (max - min) + min;\n    }\n\n    function addParticle(particle) {\n        particles.push(particle);\n\n        if (particles.length > 450) {\n            particles.shift();\n        }\n    }\n\n    function createBurst(x, y, color) {\n        const rgb = hexToRgb(color);\n\n        for (let i = 0; i < 85; i++) {\n            const angle = Math.random() * Math.PI * 2;\n            const speed = randomBetween(1, 4.8);\n\n            addParticle({\n                x,\n                y,\n                vx: Math.cos(angle) * speed,\n                vy: Math.sin(angle) * speed,\n                gravity: 0.035,\n                drag: 0.985,\n                life: 1,\n                decay: randomBetween(0.012, 0.025),\n                size: randomBetween(1, 2.4),\n                color: rgb\n            });\n        }\n    }\n\n    function createOrbit(x, y, color) {\n        const rgb = hexToRgb(color);\n\n        for (let i = 0; i < 65; i++) {\n            const angle = (Math.PI * 2 \/ 65) * i;\n            const radius = randomBetween(5, 45);\n\n            addParticle({\n                x: x + Math.cos(angle) * radius,\n                y: y + Math.sin(angle) * radius,\n                vx: -Math.sin(angle) * 1.3,\n                vy: Math.cos(angle) * 1.3,\n                gravity: 0,\n                drag: 0.995,\n                life: 1,\n                decay: 0.014,\n                size: randomBetween(1, 2),\n                color: rgb\n            });\n        }\n    }\n\n    function createSpiral(x, y, color) {\n        const rgb = hexToRgb(color);\n\n        for (let i = 0; i < 75; i++) {\n            const angle = i * 0.42;\n            const radius = 4 + i * 0.75;\n\n            addParticle({\n                x: x + Math.cos(angle) * radius,\n                y: y + Math.sin(angle) * radius,\n                vx: Math.cos(angle) * 0.8,\n                vy: Math.sin(angle) * 0.8,\n                gravity: 0.015,\n                drag: 0.992,\n                life: 1,\n                decay: randomBetween(0.01, 0.02),\n                size: randomBetween(1, 2.3),\n                color: rgb\n            });\n        }\n    }\n\n    function createWave(x, y, color) {\n        const rgb = hexToRgb(color);\n\n        for (let i = 0; i < 100; i++) {\n            const angle = Math.PI * 2 * (i \/ 100);\n\n            const speed =\n                1.2 +\n                Math.sin(i * 0.35) * 0.65;\n\n            addParticle({\n                x,\n                y,\n                vx: Math.cos(angle) * speed,\n                vy: Math.sin(angle) * speed,\n                gravity: 0.01,\n                drag: 0.99,\n                life: 1,\n                decay: randomBetween(0.012, 0.02),\n                size: randomBetween(1, 2.2),\n                color: rgb,\n                wave: Math.random() * Math.PI * 2\n            });\n        }\n    }\n\n    function createRain(x, y, color) {\n        const rgb = hexToRgb(color);\n\n        for (let i = 0; i < 75; i++) {\n            addParticle({\n                x: x + randomBetween(-60, 60),\n                y: y + randomBetween(-10, 20),\n                vx: randomBetween(-0.35, 0.35),\n                vy: randomBetween(0.8, 2.4),\n                gravity: 0.025,\n                drag: 0.997,\n                life: 1,\n                decay: randomBetween(0.009, 0.018),\n                size: randomBetween(1, 2.2),\n                color: rgb\n            });\n        }\n    }\n\n    function createSpark(x, y, color) {\n        const rgb = hexToRgb(color);\n\n        for (let i = 0; i < 55; i++) {\n            const angle = Math.random() * Math.PI * 2;\n\n            addParticle({\n                x,\n                y,\n                vx: Math.cos(angle) * randomBetween(2, 6),\n                vy: Math.sin(angle) * randomBetween(2, 6),\n                gravity: 0.09,\n                drag: 0.96,\n                life: 1,\n                decay: randomBetween(0.02, 0.035),\n                size: randomBetween(1.2, 2.6),\n                color: rgb\n            });\n        }\n    }\n\n    function createHalo(x, y, color) {\n        const rgb = hexToRgb(color);\n\n        for (let i = 0; i < 90; i++) {\n            const angle = Math.random() * Math.PI * 2;\n            const radius = randomBetween(10, 70);\n\n            addParticle({\n                x: x + Math.cos(angle) * radius,\n                y: y + Math.sin(angle) * radius,\n                vx: Math.cos(angle) * 0.15,\n                vy: Math.sin(angle) * 0.15,\n                gravity: 0,\n                drag: 0.999,\n                life: 1,\n                decay: randomBetween(0.008, 0.015),\n                size: randomBetween(1, 2.5),\n                color: rgb\n            });\n        }\n    }\n\n    function triggerEffect(step) {\n        const rect = step.getBoundingClientRect();\n        const sectionRect = section.getBoundingClientRect();\n\n        const x =\n            rect.left -\n            sectionRect.left +\n            rect.width \/ 2;\n\n        const y =\n            rect.top -\n            sectionRect.top +\n            28;\n\n        const color =\n            step.dataset.color ||\n            \"#ffffff\";\n\n        const effect =\n            step.dataset.effect ||\n            \"burst\";\n\n        if (effect === \"burst\") {\n            createBurst(x, y, color);\n        }\n\n        if (effect === \"orbit\") {\n            createOrbit(x, y, color);\n        }\n\n        if (effect === \"spiral\") {\n            createSpiral(x, y, color);\n        }\n\n        if (effect === \"wave\") {\n            createWave(x, y, color);\n        }\n\n        if (effect === \"rain\") {\n            createRain(x, y, color);\n        }\n\n        if (effect === \"spark\") {\n            createSpark(x, y, color);\n        }\n\n        if (effect === \"halo\") {\n            createHalo(x, y, color);\n        }\n    }\n\n    function updateParticles() {\n        for (let i = particles.length - 1; i >= 0; i--) {\n            const p = particles[i];\n\n            if (p.wave !== undefined) {\n                p.wave += 0.09;\n\n                p.vx +=\n                    Math.cos(p.wave) *\n                    0.012;\n\n                p.vy +=\n                    Math.sin(p.wave) *\n                    0.012;\n            }\n\n            p.vx *= p.drag;\n            p.vy *= p.drag;\n            p.vy += p.gravity;\n\n            p.x += p.vx;\n            p.y += p.vy;\n\n            p.life -= p.decay;\n\n            if (p.life <= 0) {\n                particles.splice(i, 1);\n            }\n        }\n    }\n\n    function drawParticles() {\n        ctx.clearRect(0, 0, width, height);\n\n        for (const p of particles) {\n            const alpha = Math.max(0, p.life);\n\n            ctx.beginPath();\n\n            ctx.arc(\n                p.x,\n                p.y,\n                p.size,\n                0,\n                Math.PI * 2\n            );\n\n            ctx.fillStyle =\n                `rgba(\n                    ${p.color.r},\n                    ${p.color.g},\n                    ${p.color.b},\n                    ${alpha}\n                )`;\n\n            ctx.shadowBlur = 12;\n\n            ctx.shadowColor =\n                `rgb(\n                    ${p.color.r},\n                    ${p.color.g},\n                    ${p.color.b}\n                )`;\n\n            ctx.fill();\n        }\n\n        ctx.shadowBlur = 0;\n    }\n\n    function animate() {\n        updateParticles();\n        drawParticles();\n\n        animationFrame =\n            requestAnimationFrame(animate);\n    }\n\n    let started = false;\n\n    function startProcess() {\n        if (started) {\n            return;\n        }\n\n        started = true;\n\n        activeLine.style.width = \"100%\";\n\n        steps.forEach((step, index) => {\n            setTimeout(() => {\n                step.classList.add(\"is-active\");\n            }, 250 + index * 330);\n        });\n    }\n\n    const observer =\n        new IntersectionObserver(\n            entries => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        startProcess();\n                    }\n                });\n            },\n            {\n                threshold: 0.2\n            }\n        );\n\n    observer.observe(track);\n\n    steps.forEach(step => {\n        step.addEventListener(\"mouseenter\", () => {\n            steps.forEach(other => {\n                other.classList.remove(\"is-active\");\n            });\n\n            step.classList.add(\"is-active\");\n            triggerEffect(step);\n        });\n\n        step.addEventListener(\"mouseleave\", () => {\n            step.classList.add(\"is-active\");\n        });\n\n        step.querySelector(\".process-dot\")\n            .addEventListener(\"click\", () => {\n                triggerEffect(step);\n            });\n    });\n\n    window.addEventListener(\"resize\", resizeCanvas);\n\n    resizeCanvas();\n    animate();\n});\n<\/script>\n\n\n\n<style>\n.moriah-services-carousel {\n    width: 100%;\n    overflow: hidden;\n    background: #000000;\n    border-top: 1px solid rgba(255,255,255,0.12);\n    border-bottom: 1px solid rgba(255,255,255,0.12);\n    padding: 18px 0;\n    position: relative;\n    box-sizing: border-box;\n    transition: background 0.25s ease;\n}\n\n.moriah-services-carousel:hover {\n    background: #ffffff;\n}\n\n.moriah-services-track {\n    display: flex;\n    width: max-content;\n    align-items: center;\n    white-space: nowrap;\n    animation: moriahMarquee 45s linear infinite;\n}\n\n.moriah-services-carousel:hover .moriah-services-track {\n    animation-play-state: paused;\n}\n\n.moriah-service-item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 22px;\n    color: #ffffff;\n    background: transparent;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 17px;\n    font-weight: 600;\n    letter-spacing: 1.2px;\n    text-transform: uppercase;\n    transition: color 0.25s ease, background 0.25s ease;\n    cursor: default;\n}\n\n.moriah-services-carousel:hover .moriah-service-item {\n    color: #000000;\n    background: transparent;\n}\n\n.moriah-service-separator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 18px;\n    padding: 0 4px;\n    transition: color 0.25s ease;\n}\n\n.moriah-services-carousel:hover .moriah-service-separator {\n    color: #000000;\n}\n\n@keyframes moriahMarquee {\n    from {\n        transform: translateX(0);\n    }\n\n    to {\n        transform: translateX(-50%);\n    }\n}\n\n@media (max-width: 800px) {\n\n    .moriah-services-carousel {\n        padding: 14px 0;\n    }\n\n    .moriah-service-item {\n        padding: 8px 16px;\n        font-size: 13px;\n        letter-spacing: 1px;\n    }\n\n    .moriah-service-separator {\n        font-size: 15px;\n    }\n\n    .moriah-services-track {\n        animation-duration: 35s;\n    }\n}\n<\/style>\n\n<div class=\"moriah-services-carousel\">\n\n    <div class=\"moriah-services-track\">\n\n        <span class=\"moriah-service-item\">Video Mapping<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias Inmersivas<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias Interactivas<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Producci\u00f3n Audiovisual<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Proyecci\u00f3n Arquitect\u00f3nica<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Dise\u00f1o Esc\u00e9nico<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Realidad Aumentada<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Realidad Virtual<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Tecnolog\u00eda Interactiva<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Instalaciones Digitales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Contenido Multimedia<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Direcci\u00f3n Creativa<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Dise\u00f1o Multimedia<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Integraci\u00f3n Tecnol\u00f3gica<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Shows Audiovisuales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Iluminaci\u00f3n Inteligente<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Pirotecnia<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Dise\u00f1o 3D<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Animaci\u00f3n Digital<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Motion Graphics<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Mapping Monumental<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Escenograf\u00edas Digitales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias Sensoriales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Espacios Inmersivos<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Eventos Tecnol\u00f3gicos<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Activaciones De Marca<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias De Marca<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Producci\u00f3n De Eventos<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Creatividad Digital<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Innovaci\u00f3n Tecnol\u00f3gica<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Creamos Experiencias<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Video Mapping<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias Inmersivas<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias Interactivas<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Producci\u00f3n Audiovisual<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Proyecci\u00f3n Arquitect\u00f3nica<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Dise\u00f1o Esc\u00e9nico<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Realidad Aumentada<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Realidad Virtual<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Tecnolog\u00eda Interactiva<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Instalaciones Digitales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Contenido Multimedia<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Direcci\u00f3n Creativa<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Dise\u00f1o Multimedia<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Integraci\u00f3n Tecnol\u00f3gica<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Shows Audiovisuales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Iluminaci\u00f3n Inteligente<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Pirotecnia<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Dise\u00f1o 3D<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Animaci\u00f3n Digital<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Motion Graphics<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Mapping Monumental<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Escenograf\u00edas Digitales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias Sensoriales<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Espacios Inmersivos<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Eventos Tecnol\u00f3gicos<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Activaciones De Marca<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Experiencias De Marca<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Producci\u00f3n De Eventos<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Creatividad Digital<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Innovaci\u00f3n Tecnol\u00f3gica<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n        <span class=\"moriah-service-item\">Creamos Experiencias<\/span>\n        <span class=\"moriah-service-separator\">\u2014<\/span>\n\n    <\/div>\n\n<\/div>\n\n\n\n<meta charset=\"UTF-8\">\n\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <title>Moriah Company \u2014 Contacto<\/title>\n\n    <style>\/* =====================================================\n   RESET\n===================================================== *\/\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\nbody {\n    width: 100%;\n    min-height: 100vh;\n\n    background: #000000;\n    color: #ffffff;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    overflow-x: hidden;\n}\n\n\n\/* =====================================================\n   CONTACTO\n===================================================== *\/\n\n.contact-section {\n\n    position: relative;\n\n    width: 100%;\n\n    min-height: 100vh;\n\n    background:\n        radial-gradient(\n            circle at 15% 50%,\n            rgba(255,220,120,0.035),\n            transparent 35%\n        ),\n        #0000000;\n\n    overflow: hidden;\n}\n\n.contact-section::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    background: url(\"https:\/\/images.unsplash.com\/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2400&q=90\") center \/ cover no-repeat;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease;\n}\n\n.contact-section.reveal-active::before {\n    opacity: 1;\n    clip-path: circle(180px at var(--mouse-x) var(--mouse-y));\n}\n\n.contact-section::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    background-image:\n        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px);\n    background-size: 45px 45px;\n    opacity: .35;\n}\n\n.contact-section > * {\n    position: relative;\n    z-index: 2;\n}\n\n.moriah-particles {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    pointer-events: none;\n}\n\n\/* =====================================================\n   CONTENEDOR\n===================================================== *\/\n\n.contact-container {\n\n    width:\n        min(\n            1400px,\n            calc(100% - 100px)\n        );\n\n    margin: 0 auto;\n\n    display: grid;\n\n    grid-template-columns:\n        1fr\n        0.85fr;\n\n    gap: 100px;\n\n    align-items: start;\n}\n\n\n\/* =====================================================\n   TEXTO\n===================================================== *\/\n\n.contact-copy {\n\n    padding-top: 20px;\n}\n\n\n.contact-label {\n\n    display: block;\n\n    margin-bottom: 28px;\n\n    font-size: 10px;\n\n    letter-spacing: 5px;\n\n    color:\n        rgba(\n            255,\n            220,\n            120,\n            0.8\n        );\n}\n\n\n.contact-copy h1 {\n\n    margin: 0;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size:\n        clamp(\n            55px,\n            7vw,\n            105px\n        );\n\n    line-height: 0.9;\n\n    letter-spacing: -4px;\n\n    font-weight: 400;\n}\n\n\n.contact-copy h1 span {\n\n    display: block;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.35\n        );\n\n    font-style: italic;\n}\n\n\n.contact-copy > p {\n\n    max-width: 650px;\n\n    margin-top: 40px;\n\n    font-size: 15px;\n\n    line-height: 1.9;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.48\n        );\n\n    text-align: justify;\n}\n\n\n\/* =====================================================\n   DETALLES DE CONTACTO\n===================================================== *\/\n\n.contact-details {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(\n            3,\n            1fr\n        );\n\n    gap: 25px;\n\n    margin-top: 65px;\n\n    padding-top: 25px;\n\n    border-top:\n        1px solid\n        rgba(\n            255,\n            255,\n            255,\n            0.1\n        );\n}\n\n\n.contact-detail {\n\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 8px;\n\n    text-decoration: none;\n\n    color: #ffffff;\n}\n\n\n.contact-detail-label {\n\n    font-size: 8px;\n\n    letter-spacing: 3px;\n\n    color:\n        rgba(\n            255,\n            220,\n            120,\n            0.75\n        );\n}\n\n\n.contact-detail-value {\n\n    font-size: 12px;\n\n    line-height: 1.5;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.5\n        );\n\n    transition:\n        color 0.3s ease;\n}\n\n\n.contact-detail:hover\n.contact-detail-value {\n\n    color: #ffffff;\n}\n\n\n\/* =====================================================\n   FORMULARIO\n===================================================== *\/\n\n.contact-form-wrapper {\n\n    position: relative;\n\n    padding:\n        45px;\n\n    border:\n        1px solid\n        rgba(\n            255,\n            255,\n            255,\n            0.1\n        );\n\n    background:\n        rgba(\n            255,\n            255,\n            255,\n            0.018\n        );\n\n    backdrop-filter:\n        blur(10px);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n}\n\n\n.contact-form-header {\n\n    margin-bottom: 45px;\n\n    padding-bottom: 18px;\n\n    border-bottom:\n        1px solid\n        rgba(\n            255,\n            255,\n            255,\n            0.08\n        );\n\n    font-size: 9px;\n\n    letter-spacing: 4px;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.45\n        );\n}\n\n\n\/* =====================================================\n   GRUPO\n===================================================== *\/\n\n.form-group {\n\n    position: relative;\n\n    margin-bottom: 30px;\n}\n\n\n.form-group label {\n\n    display: block;\n\n    margin-bottom: 10px;\n\n    font-size: 9px;\n\n    letter-spacing: 2px;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.4\n        );\n}\n\n\n\/* =====================================================\n   INPUTS\n===================================================== *\/\n\n.form-group input,\n.form-group textarea,\n.form-group select {\n\n    width: 100%;\n\n    border: none;\n\n    border-bottom:\n        1px solid\n        rgba(\n            255,\n            255,\n            255,\n            0.14\n        );\n\n    outline: none;\n\n    border-radius: 0;\n\n    background:\n        transparent;\n\n    color: #ffffff;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    font-size: 14px;\n\n    padding:\n        12px 0;\n\n    transition:\n        border-color 0.3s ease;\n}\n\n\n.form-group textarea {\n\n    resize: vertical;\n\n    min-height: 120px;\n}\n\n\n.form-group select {\n\n    appearance: none;\n\n    cursor: pointer;\n}\n\n\n.form-group select option {\n\n    background: #111111;\n\n    color: #ffffff;\n}\n\n\n.form-group input::placeholder,\n.form-group textarea::placeholder {\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.22\n        );\n}\n\n\n.form-group input:focus,\n.form-group textarea:focus,\n.form-group select:focus {\n\n    border-color:\n        rgba(\n            255,\n            220,\n            120,\n            0.7\n        );\n}\n\n\n\/* =====================================================\n   BOT\u00d3N\n===================================================== *\/\n\n.contact-button {\n\n    position: relative;\n\n    width: 100%;\n\n    height: 58px;\n\n    margin-top: 10px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    padding:\n        0 22px;\n\n    border:\n        1px solid\n        #ffd75a;\n\n    border-radius: 0;\n\n    background:\n        linear-gradient(\n            135deg,\n            #fff2a6,\n            #ffd75a\n        );\n\n    color: #080808;\n\n    font-size: 11px;\n\n    font-weight: 700;\n\n    letter-spacing: 2px;\n\n    cursor: pointer;\n\n    overflow: hidden;\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n\n.contact-button::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    left: -120%;\n\n    width: 80%;\n    height: 100%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,255,255,0.45),\n            transparent\n        );\n\n    transform:\n        skewX(-20deg);\n\n    transition:\n        left 0.7s ease;\n}\n\n\n.contact-button:hover::before {\n\n    left: 140%;\n}\n\n\n.contact-button:hover {\n\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0 12px 35px\n        rgba(\n            255,\n            215,\n            90,\n            0.18\n        );\n}\n\n\n.contact-arrow {\n\n    font-size: 20px;\n\n    line-height: 1;\n}\n\n\n\/* =====================================================\n   ESTADO\n===================================================== *\/\n\n.contact-status {\n\n    min-height: 20px;\n\n    margin-top: 15px;\n\n    font-size: 11px;\n\n    text-align: center;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.5\n        );\n}\n\n\n\/* =====================================================\n   FOOTER\n===================================================== *\/\n\n.contact-footer {\n\n    width:\n        min(\n            1400px,\n            calc(100% - 100px)\n        );\n\n    margin:\n        120px auto\n        0;\n\n    padding-top: 25px;\n\n    border-top:\n        1px solid\n        rgba(\n            255,\n            255,\n            255,\n            0.09\n        );\n\n    display: flex;\n\n    justify-content: space-between;\n\n    align-items: center;\n\n    font-size: 9px;\n\n    letter-spacing: 2px;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            0.28\n        );\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media (max-width: 1000px) {\n\n    .contact-container {\n\n        width:\n            calc(\n                100% - 60px\n            );\n\n        grid-template-columns:\n            1fr;\n\n        gap: 70px;\n    }\n\n\n    .contact-details {\n\n        max-width: 750px;\n    }\n\n\n    .contact-footer {\n\n        width:\n            calc(\n                100% - 60px\n            );\n    }\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media (max-width: 600px) {\n\n    .contact-section {\n\n        padding:\n            100px 0\n            40px;\n    }\n\n\n    .contact-container {\n\n        width:\n            calc(\n                100% - 30px\n            );\n\n        gap: 55px;\n    }\n\n\n    .contact-copy h1 {\n\n        font-size: 46px;\n\n        letter-spacing: -2px;\n    }\n\n\n    .contact-copy > p {\n\n        font-size: 14px;\n\n        line-height: 1.8;\n    }\n\n\n    .contact-details {\n\n        grid-template-columns:\n            1fr;\n\n        gap: 20px;\n\n        margin-top: 45px;\n    }\n\n\n    .contact-form-wrapper {\n\n        padding:\n            28px 22px;\n    }\n\n\n    .contact-footer {\n\n        width:\n            calc(\n                100% - 30px\n            );\n\n        margin-top: 80px;\n\n        flex-direction: column;\n\n        align-items: flex-start;\n\n        gap: 12px;\n\n        line-height: 1.6;\n    }\n\n}<\/style>\n\n\n\n\n\n\n    <main>\n\n        <!-- =====================================================\n             \u00daLTIMA FILA \u2014 CONTACTO\n        ====================================================== -->\n\n        <section id=\"contacto\" class=\"contact-section\">\n    <canvas class=\"moriah-particles\"><\/canvas>\n\n            <div class=\"contact-container\">\n\n                <!-- =================================================\n                     LADO IZQUIERDO\n                ================================================== -->\n\n                <div class=\"contact-copy\">\n\n                    <h1>\n                        LO QUE\n                        <span>PODEMOS CREAR.<\/span>\n                    <\/h1>\n\n                    <p>\n                        Cada gran experiencia comienza con una conversaci\u00f3n.\n                        Cu\u00e9ntanos qu\u00e9 tienes en mente, qu\u00e9 espacio quieres\n                        transformar o qu\u00e9 proyecto quieres llevar a otro nivel.\n                        Nuestro equipo analiza la idea, el contexto y los\n                        objetivos para convertirlos en una propuesta real,\n                        creativa y ejecutable.\n                    <\/p>\n\n\n                    <!-- =================================================\n                         DATOS DE CONTACTO\n                    ================================================== -->\n\n                    <div class=\"contact-details\">\n\n                        <a href=\"https:\/\/wa.me\/57XXXXXXXXXX\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"contact-detail\">\n\n                            <span class=\"contact-detail-label\">\n                                WHATSAPP\n                            <\/span>\n\n                            <span class=\"contact-detail-value\">\n                                Hablemos directamente\n                            <\/span>\n\n                        <\/a>\n\n\n                        <a href=\"mailto:info@moriahcompany.com.co\" class=\"contact-detail\">\n\n                            <span class=\"contact-detail-label\">\n                                CORREO\n                            <\/span>\n\n                            <span class=\"contact-detail-value\">\n                                info@moriahcompany.com.co\n                            <\/span>\n\n                        <\/a>\n\n\n                        <div class=\"contact-detail\">\n\n                            <span class=\"contact-detail-label\">\n                                COBERTURA\n                            <\/span>\n\n                            <span class=\"contact-detail-value\">\n                                Colombia \u00b7 LATAM\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- =================================================\n                     FORMULARIO\n                ================================================== -->\n\n                <div class=\"contact-form-wrapper\">\n\n                    <div class=\"contact-form-header\">\n\n                        <span>\n                            CU\u00c9NTANOS TU IDEA\n                        <\/span>\n\n                    <\/div>\n\n\n                    <form id=\"contactForm\" class=\"contact-form\">\n\n                        <!-- NOMBRE -->\n\n                        <div class=\"form-group\">\n\n                            <label for=\"name\">\n                                NOMBRE\n                            <\/label>\n\n                            <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Tu nombre\" required=\"\">\n\n                        <\/div>\n\n\n                        <!-- CORREO -->\n\n                        <div class=\"form-group\">\n\n                            <label for=\"email\">\n                                CORREO ELECTR\u00d3NICO\n                            <\/label>\n\n                            <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"tu@correo.com\" required=\"\">\n\n                        <\/div>\n\n\n                        <!-- EMPRESA -->\n\n                        <div class=\"form-group\">\n\n                            <label for=\"company\">\n                                EMPRESA \/ ALCALD\u00cdA\n                            <\/label>\n\n                            <input type=\"text\" id=\"company\" name=\"company\" placeholder=\"Nombre de la organizaci\u00f3n\">\n\n                        <\/div>\n\n\n                        <!-- TIPO DE PROYECTO -->\n\n                        <div class=\"form-group\">\n\n                            <label for=\"project\">\n                                TIPO DE PROYECTO\n                            <\/label>\n\n                            <select id=\"project\" name=\"project\">\n\n                                <option value=\"\">\n                                    Selecciona una opci\u00f3n\n                                <\/option>\n\n                                <option value=\"mapping\">\n                                    Video Mapping\n                                <\/option>\n\n                                <option value=\"interactivo\">\n                                    Experiencia Interactiva\n                                <\/option>\n\n                                <option value=\"inmersivo\">\n                                    Experiencia Inmersiva\n                                <\/option>\n\n                                <option value=\"navidad\">\n                                    Alumbrado Navide\u00f1o\n                                <\/option>\n\n                                <option value=\"diseno\">\n                                    Creaci\u00f3n y Dise\u00f1o\n                                <\/option>\n\n                                <option value=\"otro\">\n                                    Otro\n                                <\/option>\n\n                            <\/select>\n\n                        <\/div>\n\n\n                        <!-- MENSAJE -->\n\n                        <div class=\"form-group\">\n\n                            <label for=\"message\">\n                                CU\u00c9NTANOS M\u00c1S\n                            <\/label>\n\n                            <textarea id=\"message\" name=\"message\" rows=\"5\" placeholder=\"H\u00e1blanos de tu proyecto...\" required=\"\"><\/textarea>\n\n                        <\/div>\n\n\n                        <!-- BOT\u00d3N -->\n\n                        <button type=\"submit\" class=\"contact-button\">\n\n                            <span>\n                                ENVIAR PROYECTO\n                            <\/span>\n\n                            <span class=\"contact-arrow\">\n                                \u2192\n                            <\/span>\n\n                        <\/button>\n\n\n                        <div class=\"contact-status\" id=\"contactStatus\"><\/div>\n\n                    <\/form>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 PIE DE CONTACTO\n            ================================================== -->\n\n            <div class=\"contact-footer\">\n\n                <span>\n                    MORIAH COMPANY\n                <\/span>\n\n                <span>\n                    EXPERIENCIAS QUE COBRAN VIDA.\n                <\/span>\n\n                <span>\n                    \u00a9 2026\n                <\/span>\n\n            <\/div>\n\n        <\/section>\n\n    <\/main>\n\n\n    <script>\n\n\/* =====================================================\n   CONTACTO\n===================================================== *\/\n\ndocument.addEventListener(\n    \"DOMContentLoaded\",\n    () => {\n\n        const form =\n            document.getElementById(\n                \"contactForm\"\n            );\n\n        const status =\n            document.getElementById(\n                \"contactStatus\"\n            );\n\n\n        if (\n            !form ||\n            !status\n        ) {\n            return;\n        }\n\n\n        form.addEventListener(\n            \"submit\",\n            (event) => {\n\n                event.preventDefault();\n\n\n                const name =\n                    document\n                        .getElementById(\"name\")\n                        .value\n                        .trim();\n\n\n                const email =\n                    document\n                        .getElementById(\"email\")\n                        .value\n                        .trim();\n\n\n                const message =\n                    document\n                        .getElementById(\"message\")\n                        .value\n                        .trim();\n\n\n                if (\n                    !name ||\n                    !email ||\n                    !message\n                ) {\n\n                    status.textContent =\n                        \"Completa los campos obligatorios.\";\n\n                    return;\n                }\n\n\n                status.textContent =\n                    \"Gracias. Estamos preparando tu solicitud.\";\n\n\n                form.reset();\n\n            }\n        );\n\n    }\n);\n\nconst contactSection = document.querySelector(\".contact-section\");\n\nif (contactSection) {\n    contactSection.style.setProperty(\"--mouse-x\", \"50%\");\n    contactSection.style.setProperty(\"--mouse-y\", \"50%\");\n\n    contactSection.addEventListener(\"mousemove\", function(e) {\n        const rect = contactSection.getBoundingClientRect();\n\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n\n        contactSection.style.setProperty(\"--mouse-x\", x + \"px\");\n        contactSection.style.setProperty(\"--mouse-y\", y + \"px\");\n        contactSection.classList.add(\"reveal-active\");\n    });\n\n    contactSection.addEventListener(\"mouseleave\", function() {\n        contactSection.classList.remove(\"reveal-active\");\n    });\n}\n    <\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nosotros Experiencias Servicios Video Mapping Experiencias Interactivas Experiencias Inmersivas Pirotecnia Portafolio Creemos una experiencia \u2192 MORIAH COMPANY Transformamos ideas en experiencias memorables Videomapping \u2726 Shows L\u00e1ser \u2726 Experiencias Inmersivas \u2726 Proyecci\u00f3n Arquitect\u00f3nica \u2726 Show Timecode \u2726 Desarrollos Interactivos \u2726 Eventos de Gran Impacto \u2726 Alumbrados Navide\u00f1os \u2726 Videomapping \u2726 Shows L\u00e1ser \u2726 Experiencias Inmersivas \u2726 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":87,"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/155"}],"wp:attachment":[{"href":"https:\/\/moriahcompany.com.co\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}