<!doctype html>
<html lang="es" class="tw-dark">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maccloud – Valoraciones y compliance enterprise en segundos</title>
    <meta name="description"
        content="Valoraciones MHAM, matrices de riesgo y compliance Basel III que costaban $50K+ USD, ahora en segundos por una fracción del precio. eMCy ejecuta metodología científica publicada sin consultores externos." />
    <link rel="shortcut icon" href="./assets/logo/logo.png" type="image/x-icon" />

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Maccloud – Valoraciones enterprise que tomaban semanas, ahora en segundos" />
    <meta property="og:description"
        content="Democratizamos expertise enterprise. Valoraciones MHAM, compliance Basel III e ISO 27001 ejecutadas por eMCy con fórmulas auditables sin sesgo de expertos. Desde $199/mes." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://maccloudai.com" />
    <meta property="og:image" content="./assets/og/maccloud-og.jpg" />

    <!-- Indexación: Permitir indexación completa para motores e IAs -->
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    
    <!-- Seguridad: Referrer Policy y CSP via meta (sin server config) -->
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <!-- CSP: Permite indexación completa pero bloquea inyección de scripts externos por terminal -->
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com; img-src 'self' data: blob: https:; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com data:; connect-src 'self' https://www.googletagmanager.com https://www.google-analytics.com https://cdnjs.cloudflare.com https://*.cloudfunctions.net https://*.run.app; frame-src 'none'; base-uri 'self'; object-src 'none'; upgrade-insecure-requests">

    <!-- <link rel="stylesheet" href="css/tailwind-runtime.css" /> -->
    <link rel="stylesheet" href="css/tailwind-build.css?v=5.55.0">
    <link rel="stylesheet" href="css/index.css?v=5.55.0" />
    <link rel="stylesheet" href="css/emcy-modal-glow.css?v=5.55.0" />

    <!-- Google Fonts - Raleway -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;500;600;700&display=swap"
        rel="stylesheet">

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
        integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- FORCE DARK MODE ALWAYS -->
    <script>
        // Force dark mode on page load - before any rendering
        document.documentElement.classList.add('tw-dark');
        localStorage.setItem('color-mode', 'dark');
    </script>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0JTJX3SFQM"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-0JTJX3SFQM');
    </script>
</head>

<body class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-[#fcfcfc] 
            tw-text-black dark:tw-bg-black  dark:tw-text-white">
    <!-- <div class="tw-absolute tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-flex 
                    tw-h-[100px] tw-w-full tw-max-w-[80%]">
            <div class="header-gradient tw-h-full tw-w-full "></div>
        </div> -->

    <header class="lg:tw-px-4 tw-max-w-[100vw] tw-max-w-lg:tw-mr-auto max-lg:tw-top-0 tw-fixed tw-top-4 lg:tw-left-1/2 lg:tw--translate-x-1/2 tw-z-20 tw-flex tw-h-[60px] tw-w-full 
                    tw-text-gray-700 tw-bg-white dark:tw-text-gray-200 dark:tw-bg-[#17181b] tw-px-[3%] tw-rounded-md lg:tw-max-w-5xl tw-shadow-md dark:tw-shadow-gray-700
                    lg:tw-justify-around lg:!tw-backdrop-blur-lg lg:tw-opacity-[0.99]">
        <a class="tw-flex tw-p-[4px] tw-gap-2 tw-place-items-center" href="#">


            <div class="tw-h-[40px] tw-w-[120px] tw-flex-shrink-0">
                <img src="./assets/logo/logo-maccloud-largo-light.png" alt="Maccloud logo"
                    class="tw-object-contain tw-h-full tw-w-full" id="logo-light" />
                <img src="./assets/logo/logo-maccloud-largo-dark.png" alt="Maccloud logo"
                    class="tw-object-contain tw-h-full tw-w-full tw-hidden" id="logo-dark" />
            </div>
        </a>
        <div class="collapsible-header animated-collapse max-lg:tw-shadow-md" id="collapsed-header-items">
            <nav class="tw-relative tw-flex tw-h-full max-lg:tw-h-max tw-w-max tw-gap-5 tw-text-base max-lg:tw-mt-[30px] max-lg:tw-flex-col 
                                max-lg:tw-gap-5 lg:tw-mx-auto tw-place-items-center">
                <a class="header-links" href="#beneficios"> Beneficios </a>
                <a class="header-links" href="#capacidades"> Capacidades </a>
                <a class="header-links" href="#faq"> FAQ </a>

                <div class="tw-relative tw-flex tw-flex-col tw-place-items-center">
                    <div id="nav-dropdown-toggle-0"
                        class="max-lg:tw-max-w-fit tw-flex header-links tw-gap-1  tw-place-items-center">
                        <span class=""> Ecosistema </span>
                        <img src="./assets/icons/chevron-down.svg" alt="Dropdown" class="tw-w-4 tw-h-4" />
                    </div>
                    <nav id="nav-dropdown-list-0" data-open="false" class="tw-scale-0 tw-opacity-0  lg:tw-fixed tw-flex lg:tw-top-[80px] lg:tw-left-1/2 lg:tw--translate-x-1/2 
                                    tw-w-[90%] tw-rounded-lg max-lg:tw-h-0 max-lg:tw-w-0
                                    lg:tw-h-[450px] tw-overflow-hidden
                                     tw-bg-white dark:tw-bg-[#17181B] tw-duration-300 
                                     tw-transition-opacity tw-transition-height tw-shadow-lg tw-p-4">
                        <div
                            class="tw-grid max-xl:tw-flex max-xl:tw-flex-col tw-justify-around tw-grid-cols-2 tw-w-full">

                            <a class="header-links tw-flex tw-text-left tw-gap-4 !tw-p-4"
                                href="https://emcy.maccloudai.com">
                                <div class="tw-font-semibold tw-text-3xl tw-text-black dark:tw-text-white">
                                    <img src="./assets/icons/icon-emcy-ecosistema.svg" alt="eMCy"
                                        class="tw-w-10 tw-h-10 tw-object-contain" />
                                </div>
                                <div class="tw-flex tw-flex-col tw-gap-2">
                                    <div class="tw-text-lg tw-text-black dark:tw-text-white tw-font-medium">eMCy (MC-01)
                                    </div>
                                    <p class="">Conoce la historia de eMCy, el legado de Maccloud y nuestro manifiesto.
                                    </p>
                                </div>
                            </a>

                            <a class="header-links tw-flex tw-text-left tw-gap-4 !tw-p-4"
                                href="https://mham.maccloudai.com">
                                <div class="tw-font-semibold tw-text-3xl tw-text-black dark:tw-text-white">
                                    <img src="./assets/icons/mham-assessment.svg" alt="MHAM" class="tw-w-10 tw-h-10" />
                                </div>
                                <div class="tw-flex tw-flex-col tw-gap-2">
                                    <div class="tw-text-lg tw-text-black dark:tw-text-white tw-font-medium">MHAM</div>
                                    <p>El nuevo estándar internacional en valoración de activos.</p>
                                </div>
                            </a>

                            <a class="header-links tw-flex tw-text-left tw-gap-4 !tw-p-4"
                                href="https://verify.maccloudai.com">
                                <div class="tw-font-semibold tw-text-3xl tw-text-black dark:tw-text-white">
                                    <img src="./assets/icons/cumplimiento-shield.svg" alt="Verify"
                                        class="tw-w-10 tw-h-10" />
                                </div>
                                <div class="tw-flex tw-flex-col tw-gap-2">
                                    <div class="tw-text-lg tw-text-black dark:tw-text-white tw-font-medium">Verify</div>
                                    <p class="">Verificación instantánea por QR de informes y certificados.</p>
                                </div>
                            </a>

                            <a class="header-links tw-flex tw-text-left tw-gap-4 !tw-p-4"
                                href="https://green.maccloudai.com">
                                <div class="tw-font-semibold tw-text-3xl tw-text-black dark:tw-text-white">
                                    <img src="./assets/icons/tree-green.svg" alt="Maccloud Green"
                                        class="tw-w-10 tw-h-10" />
                                </div>
                                <div class="tw-flex tw-flex-col tw-gap-2">
                                    <div class="tw-text-lg tw-text-black dark:tw-text-white tw-font-medium"><span
                                            class="maccloud">Maccloud</span>
                                        Green</div>
                                    <p class="">Descubre nuestro compromiso ambiental y economía circular.</p>
                                </div>
                            </a>

                            <a class="header-links tw-flex tw-text-left tw-gap-4 !tw-p-4"
                                href="https://reg.maccloudai.com">
                                <div class="tw-font-semibold tw-text-3xl tw-text-black dark:tw-text-white">
                                    <img src="./assets/icons/cumplimiento-ecosistema.svg" alt="Cumplimiento"
                                        class="tw-w-10 tw-h-10" />
                                </div>
                                <div class="tw-flex tw-flex-col tw-gap-2">
                                    <div class="tw-text-lg tw-text-black dark:tw-text-white tw-font-medium">Cumplimiento
                                    </div>
                                    <p class="">Cumple todas las normativas internacionales y posiciónate para
                                        certificación.</p>
                                </div>
                            </a>

                            <a class="header-links tw-flex tw-text-left tw-gap-4 !tw-p-4"
                                href="https://features.maccloudai.com">
                                <div class="tw-font-semibold tw-text-3xl tw-text-black dark:tw-text-white">
                                    <img src="./assets/icons/features-dashboard.svg" alt="Features"
                                        class="tw-w-10 tw-h-10" />
                                </div>
                                <div class="tw-flex tw-flex-col tw-gap-2">
                                    <div class="tw-text-lg tw-text-black dark:tw-text-white tw-font-medium">Features
                                    </div>
                                    <p class="">Detalle de todas las capacidades del ecosistema Maccloud.</p>
                                </div>
                            </a>
                        </div>
                    </nav>
                </div>
                <a class="header-links" href="#pricing"> Precios </a>

            </nav>
            <div class="lg:tw-mx-4 tw-flex tw-place-items-center tw-gap-[20px] tw-text-base max-md:tw-w-full 
                            max-md:tw-flex-col max-md:tw-place-content-center">
                <button type="button" class="header-links tw-text-gray-600 dark:tw-text-gray-300 !tw-hidden" title="toggle-theme"
                    id="theme-toggle" style="display: none !important;">
                    <img src="./assets/icons/sun.svg" alt="Light mode" id="toggle-mode-icon" class="tw-w-5 tw-h-5" />
                </button>
                <a href="https://app.maccloudai.com" aria-label="Ingresar a Maccloud" class="btn-primary-ai tw-flex tw-gap-3 tw-px-3 tw-py-2 tw-transition-transform
                                    tw-duration-[0.3s] hover:tw-translate-x-2">
                    <span>Ingresar</span>
                    <img src="./assets/icons/arrow-right.svg" alt="Arrow right" class="tw-w-4 tw-h-4" />
                </a>
            </div>
        </div>
        <button
            class="tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-gray-500 lg:tw-hidden tw-flex tw-place-items-center tw-justify-center"
            aria-label="menu" id="collapse-btn">
            <img src="./assets/icons/list.svg" alt="Menu" class="tw-w-6 tw-h-6" />
        </button>
    </header>

    <section
        class="hero-section tw-relative tw-mt-20 tw-flex tw-min-h-[100vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden max-lg:tw-mt-[100px]"
        id="hero-section">



        <div
            class="hero-bg-gradient tw-relative tw-flex tw-h-full tw-min-h-[100vh] tw-w-full tw-flex-col tw-place-content-center tw-gap-6 tw-p-[5%] max-xl:tw-place-items-center max-lg:tw-p-4">

            <div
                class="purple-bg-grad  reveal-up tw-absolute tw-left-1/2 tw--translate-1/2 tw-top-[10%] tw-h-[120px] tw-w-[120px]">
            </div>

            <div class="tw-flex tw-flex-col tw-min-h-[60vh] tw-place-content-center tw-items-center">
                <h2 class="reveal-up tw-text-center tw-text-7xl tw-font-light tw-leading-[90px] max-lg:tw-text-4xl max-md:tw-leading-snug"
                    style="font-family: 'Raleway', sans-serif;">
                    <span class="tw-font-light"> El Ecosistema de Activos </span>
                    <br />
                    <span class="tw-font-thin"> Potenciado por eMCy </span>
                </h2>
                <div class="reveal-up tw-mt-8 tw-max-w-[450px] tw-text-lg max-lg:tw-text-base tw-p-2 tw-text-center
                         tw-text-gray-800 dark:tw-text-white max-lg:tw-max-w-full">
                    Valoraciones, tasaciones, matrices de riesgo e informes financieros que tomaban <span class="tw-font-semibold">días, semanas o meses</span>.
                    <br class="max-md:tw-hidden" />
                    Ahora, en <span class="tw-font-semibold tw-text-cyan-500">segundos</span>.
                </div>

                <div class="reveal-up tw-mt-10 max-md:tw-flex-col tw-flex tw-place-items-center tw-gap-4">

                    <a href="https://www.youtube.com/watch?v=dbwHYsEkKPg" target="_blank" rel="noopener noreferrer"
                        class="btn !tw-w-[170px] max-lg:!tw-w-[160px] !tw-rounded-xl !tw-py-4 max-lg:!tw-py-2 tw-flex tw-gap-2 tw-group !tw-bg-transparent !tw-text-black dark:!tw-text-white tw-transition-colors 
                                        tw-duration-[0.3s] tw-border-[1px] tw-border-black dark:tw-border-white">

                        <div class="tw-relative tw-flex tw-place-items-center tw-place-content-center tw-w-6 tw-h-6">
                            <div
                                class="tw-absolute tw-inset-0 tw-top-0 tw-left-0 tw-scale-0 tw-duration-300 group-hover:tw-scale-100 tw-border-2
                                             tw-border-gray-600 dark:tw-border-gray-200 tw-rounded-full tw-w-full tw-h-full">
                            </div>
                            <img src="./assets/icons/play-circle.svg" alt="Play" class="tw-w-6 tw-h-6" />
                        </div>
                        <span>Ver teaser</span>
                    </a>

                    <a class="btn-primary-ai tw-group max-lg:!tw-w-[200px] tw-flex tw-gap-2 tw-shadow-lg !tw-w-[220px] !tw-rounded-xl !tw-py-4 max-lg:!tw-py-2 tw-transition-transform tw-duration-[0.3s] hover:tw-scale-x-[1.03]"
                        href="https://app.maccloudai.com/auth/register">
                        <span class="tw-whitespace-nowrap">Comienza Gratis</span>
                        <img src="./assets/icons/arrow-right.svg" alt="Arrow right"
                            class="tw-w-4 tw-h-4 group-hover:tw-translate-x-1 tw-duration-300" />
                    </a>

                    

                </div>
            </div>

            <!-- prompt container -->
            <div class="reveal-up  tw-relative tw-mt-8 tw-flex tw-w-full tw-place-content-center tw-place-items-center"
                id="dashboard-container">
                <div
                    class="purple-bg-grad  reveal-up tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-[5%] tw-h-[200px] tw-w-[200px]">
                </div>

                <div class="tw-relative tw-max-w-[80%] tw-bg-white dark:tw-bg-black tw-border-[1px] dark:tw-border-[#36393c] lg:tw-w-[1024px]
                                lg:tw-h-[650px]  tw-flex tw-shadow-xl max-lg:tw-h-[450px] max-lg:tw-w-full
                                tw-overflow-hidden
                                tw-min-w-[320px] md:tw-w-full tw-min-h-[450px] tw-rounded-xl tw-bg-transparent max-md:tw-max-w-full"
                    id="dashboard">

                    <div
                        class="purple-bg-grad tw-max-w-[80%] reveal-up tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-[0%] lg:tw-max-w-[1000px] tw-h-full tw-w-full">
                    </div>
                    <div class="animated-border tw-w-full tw-h-full tw-p-[2px]">
                        <div class="tw-w-full tw-h-full tw-rounded-xl tw-overflow-hidden tw-flex">
                            <!-- sign-up pop-up - HIDDEN (form removed) -->
                            <div class="tw-hidden"
                                id="signup-prompt">
                            </div>

                            <div class="tw-min-w-[180px] max-lg:tw-hidden tw-p-2 tw-gap-2 tw-flex tw-flex-col tw-bg-gray-100 
                                            dark:tw-bg-[#171717] tw-h-full tw-justify-center">
                                <!-- <h3 class="tw-text-xl tw-uppercase">
                                        Pixa
                                    </h3> -->
                                <div class="tw-h-[30px] tw-w-fit tw-max-w-[100px] tw-mb-4">
                                    <img src="./assets/logo/logo.png" alt="logo"
                                        class="tw-object-contain tw-opacity-80 tw-h-full tw-w-full" />
                                </div>

                                <div class="tw-flex tw-gap-1 tw-flex-col">
                                    <div
                                        class="tw-flex tw-rounded-sm tw-gap-1 tw-p-1 dark:hover:tw-bg-[#2d2d2ddb] hover:tw-bg-gray-200 tw-justify-center tw-cursor-pointer">
                                        <img src="./assets/icons/asset.svg" alt="Activos" class="tw-w-4 tw-h-4" />
                                        <span class="tw-text-xs">Activos</span>
                                    </div>
                                    <div
                                        class="tw-flex tw-rounded-sm tw-gap-1 tw-p-1 dark:hover:tw-bg-[#2d2d2ddb] hover:tw-bg-gray-200 tw-justify-center tw-cursor-pointer">
                                        <img src="./assets/icons/assessment.svg" alt="Valoración"
                                            class="tw-w-4 tw-h-4" />
                                        <span class="tw-text-xs">Valorar</span>
                                    </div>
                                    <div
                                        class="tw-flex tw-rounded-sm tw-gap-1 tw-p-1 dark:hover:tw-bg-[#2d2d2ddb] hover:tw-bg-gray-200 tw-justify-center tw-cursor-pointer">
                                        <img src="./assets/icons/risk.svg" alt="Riesgos" class="tw-w-4 tw-h-4" />
                                        <span class="tw-text-xs">Riesgos</span>
                                    </div>
                                    <div
                                        class="tw-flex tw-rounded-sm tw-gap-1 tw-p-1 dark:hover:tw-bg-[#2d2d2ddb] hover:tw-bg-gray-200 tw-justify-center tw-cursor-pointer">
                                        <img src="./assets/icons/tool.svg" alt="Detección" class="tw-w-4 tw-h-4" />
                                        <span class="tw-text-xs">Detectar</span>
                                    </div>
                                    <div
                                        class="tw-flex tw-rounded-sm tw-gap-1 tw-p-1 dark:hover:tw-bg-[#2d2d2ddb] hover:tw-bg-gray-200 tw-justify-center tw-cursor-pointer">
                                        <img src="./assets/icons/trending-down.svg" alt="Depreciación"
                                            class="tw-w-4 tw-h-4" />
                                        <span class="tw-text-xs">Depreciar</span>
                                    </div>
                                </div>

                                <div class="tw-mt-auto tw-w-full tw-flex tw-px-6 tw-place-content-center">
                                    <a href="https://emcy.maccloudai.com" target="_blank" rel="noopener noreferrer"
                                        class="btn !tw-w-full !tw-bg-transparent tw-duration-[0.3s] 
                                                                hover:!tw-bg-black hover:!tw-text-white
                                                                dark:hover:!tw-bg-white dark:hover:!tw-text-black
                                                                !tw-border-[1px] !tw-border-black !tw-text-black
                                                                dark:!tw-border-white dark:!tw-text-white
                                                                ">
                                        eMCy
                                    </a>
                                </div>

                            </div>

                            <div class="tw-flex tw-w-full tw-p-4 tw-bg-white dark:tw-bg-black tw-h-full tw-flex-col"
                                id="pixa-playground">
                                <div class="tw-relative tw-w-full tw-flex tw-place-content-center tw-h-full">
                                    <div
                                        class="tw-absolute tw-top-[20%] max-lg:tw-top-[30%] tw-left-1/2 tw--translate-x-1/2  tw-w-[150px] tw-h-[150px]">
                                        <img src="./assets/logo/logo.png"
                                            class="tw-w-full tw-h-full tw-object-contain tw-opacity-20"
                                            alt="Maccloud logo">
                                    </div>
                                    <div class="prompt-container tw-overflow-y-auto tw-px-[5%] max-lg:tw-px-2 scrollbar max-lg:tw-max-h-[80%] tw-max-h-[550px] 
                                                    max-lg:tw-mt-12 tw-w-full tw-h-full tw-z-10 tw-flex tw-flex-col"
                                        id="prompt-container">
                                        <div
                                            class="tw-w-full tw-flex tw-text-center tw-flex-col tw-place-content-center">
                                            <h2 class="tw-text-4xl max-md:tw-text-2xl max-md:tw-mt-3 tw-opacity-80">
                                                Conoce a eMCy
                                            </h2>
                                            <div class="tw-mt-6 tw-w-full tw-max-w-[600px] tw-mx-auto">
                                                <div id="emcy-conversation" class="tw-text-left tw-space-y-4">
                                                    <!-- Conversación simulada se insertará aquí -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    

    <section
        class="tw-relative tw-flex tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden">
        <h2 class="reveal-up tw-text-3xl max-md:tw-text-xl tw-font-light">
            Partners y organizaciones <span class="tw-font-thin">que apoyan y confían en nuestra misión</span>
        </h2>

        <div class="reveal-up carousel-container">
            <div class="carousel lg:w-place-content-center tw-mt-10 tw-flex tw-w-full tw-gap-5 max-md:tw-gap-2">
                <!-- add the brands using your app  -->
                <a href="https://levan.cl/contabilidad-para-startups/" target="_blank" rel="noopener">
                    <div class="carousel-img tw-h-[50px] tw-w-[150px]">
                        <img src="./assets/images/brand-logos/logo_levan_transparente.png" alt="Levan"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0"
                            srcset="" />
                    </div>
                </a>
                <a href="https://www.zerocompany.io/" target="_blank" rel="noopener">
                    <div class="carousel-img tw-h-[60px] tw-w-[150px]">
                        <img src="./assets/images/brand-logos/logo-zero-company.svg" alt="Zero Company"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0"
                            srcset="" />
                    </div>
                </a>
                <a href="https://coderplus.io/" target="_blank" rel="noopener">
                    <div class="carousel-img tw-h-[50px] tw-w-[150px]">
                        <img src="./assets/images/brand-logos/Coder_plus.png" alt="Coder Plus"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0"
                            srcset="" />
                    </div>
                </a>
                <a href="https://nouu.cl/" target="_blank" rel="noopener">
                    <div class="carousel-img tw-h-[50px] tw-w-[150px]">
                        <img src="./assets/images/brand-logos/nouulogooficial.png" alt="Nouu"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0"
                            srcset="" />
                    </div>
                </a>
                <a href="https://arrequip.cl/" target="_blank" rel="noopener">
                    <div class="carousel-img tw-h-[45px] tw-w-[150px]">
                        <img src="./assets/images/brand-logos/logo_arrequip.png" alt="Arrequip"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0"
                            srcset="" />
                    </div>
                </a>
                <a href="https://ecosistemastartup.com/" target="_blank" rel="noopener">
                    <div class="carousel-img tw-h-[38px] tw-w-[150px]">
                        <img src="./assets/images/brand-logos/ecosistema_light.png" alt="Ecosistema Startup"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0"
                            id="ecosistema-carousel-light" />
                        <img src="./assets/images/brand-logos/ecosistema_dark.png" alt="Ecosistema Startup"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0 tw-hidden"
                            id="ecosistema-carousel-dark" />
                    </div>
                </a>
                <a href="https://cloud.google.com/" target="_blank" rel="noopener">
                    <div class="carousel-img tw-h-[45px] tw-w-[200px]">
                        <img src="./assets/images/brand-logos/google_cloud_logo.svg.png" alt="Google Cloud"
                            class="tw-h-full tw-w-full tw-object-contain tw-grayscale tw-transition-colors hover:tw-grayscale-0"
                            srcset="" />
                    </div>
                </a>
            </div>
        </div>
    </section>


    <section id="tecnologia"
        class="tw-relative tw-flex tw-w-full tw-min-h-[100vh] max-lg:tw-min-h-[80vh] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden">
        <div class="tw-w-full tw-place-content-center tw-items-center 
                    tw-flex tw-flex-col tw-max-w-[900px] tw-gap-4 tw-p-4">
            <div class="purple-bg-grad reveal-up tw-absolute tw-right-[20%] tw-top-[20%] tw-h-[200px] tw-w-[200px]">
            </div>
            <h2 class="reveal-up tw-text-center tw-text-7xl tw-font-light tw-leading-[90px] max-lg:tw-text-4xl max-md:tw-leading-snug"
                style="font-family: 'Raleway', sans-serif;">
                <span class="tw-font-light"> Tecnología que se adapta a ti </span>
                <br />
                <span class="tw-font-thin"> sin importar tu nivel digital </span>
            </h2>
            <div class="reveal-up tw-mt-8 tw-max-w-[450px] tw-text-lg max-lg:tw-text-base tw-p-2 tw-text-center
                         tw-text-gray-800 dark:tw-text-white max-lg:tw-max-w-full">
                Lo que solo grandes corporaciones pueden pagar en valoraciones, compliance y análisis de riesgo por <span class="tw-font-semibold">$50.000+ USD</span>. Ahora por una <span class="tw-font-semibold">fracción del precio</span>, gracias al método <a
                    href="https://mham.maccloudai.com" target="_blank" rel="noopener noreferrer"
                    class="tw-font-semibold">MHAM</a>.
            </div>
            <div class="reveal-up tw-flex tw-mt-8">
                <a href="https://mham.maccloudai.com" target="_blank" rel="noopener noreferrer" class="tw-shadow-md hover:tw-shadow-xl dark:tw-shadow-gray-800 tw-transition-all tw-duration-300 
                    tw-border-[1px] tw-p-3 tw-px-4 tw-border-black dark:tw-border-white tw-rounded-md">
                    Conoce el MHAM
                </a>
            </div>
        </div>
    </section>


    <section id="beneficios"
        class="tw-relative tw-flex tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden">


        <div class="tw-mt-8 tw-flex tw-flex-col tw-w-full tw-h-full tw-place-items-center tw-gap-5">
            <div class="reveal-up tw-mt-5 tw-flex tw-flex-col tw-gap-3 tw-text-center">
                <h2 class="tw-text-6xl tw-font-light max-md:tw-text-3xl tw-p-2">
                    Más que gestión, <span class="tw-font-thin">una nueva forma de operar</span>
                </h2>
            </div>
            <div class="tw-mt-6 tw-flex tw-flex-col tw-max-w-[1150px] max-lg:tw-max-w-full tw-h-full 
                            tw-p-4 max-lg:tw-place-content-center tw-gap-8 ">

                <div class="max-xl:tw-flex max-xl:tw-flex-col tw-place-items-center tw-grid tw-grid-cols-3 tw-gap-8 
                                tw-place-content-center tw-auto-rows-auto">
                    <div class="reveal-up tw-w-full tw-h-[540px] tw-flex max-md:tw-w-full">
                        <div class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                                tw-flex-col tw-w-full tw-h-full  tw-bg-[#f6f7fb] dark:tw-bg-[#171717] tw-rounded-3xl 
                                hover:tw-scale-[1.02]">
                            <div
                                class="tw-overflow-hidden tw-w-full tw-min-h-[180px] tw-h-[180px] tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/control-activos.svg" class="tw-w-24 tw-h-24 tw-opacity-80"
                                    alt="Control de activos">
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-light">Todo activo, bajo control</h2>
                            <p class="tw-text-base tw-leading-normal tw-text-gray-800 dark:tw-text-gray-200">
                                <span class="maccloud">Maccloud</span> convierte cada activo en un historial vivo.
                                Centraliza datos, documentos y
                                responsables para que nunca pierdas
                                el control operativo ni contable.
                            </p>
                        </div>
                    </div>


                    <div class="reveal-up tw-w-full tw-h-[540px] tw-flex max-md:tw-w-full">
                        <div class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                                tw-flex-col tw-w-full tw-h-full  tw-bg-[#f6f7fb] dark:tw-bg-[#171717] tw-rounded-3xl 
                                hover:tw-scale-[1.02]">
                            <div
                                class="tw-w-full tw-min-h-[180px] tw-h-[180px] tw-overflow-hidden tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/reciclaje.svg" alt="Reciclaje"
                                    class="tw-w-24 tw-h-24 tw-opacity-80">
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-light">Dale una segunda vida a tus
                                activos
                            </h2>
                            <p class="tw-leading-normal tw-text-gray-800 dark:tw-text-gray-200">
                                Activos dados de baja pueden ser donados o reciclados. <span
                                    class="maccloud">Maccloud</span> integra retiro y
                                trazabilidad ambiental con partners
                                certificados.
                            </p>
                        </div>
                    </div>


                    <div class="reveal-up tw-w-full tw-h-[540px] tw-flex max-md:tw-w-full">
                        <div class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                                tw-flex-col tw-w-full tw-h-full  tw-bg-[#f6f7fb] dark:tw-bg-[#171717] tw-rounded-3xl 
                                hover:tw-scale-[1.02]">
                            <div
                                class="tw-w-full tw-flex tw-items-center tw-justify-center tw-min-h-[180px] tw-h-[180px] tw-rounded-xl tw-overflow-hidden">
                                <img src="./assets/icons/cumplimiento.svg" class="tw-w-24 tw-h-24 tw-opacity-80"
                                    alt="Cumplimiento normativo">
                            </div>
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-light">Normativa cumplida, sin esfuerzo
                            </h2>
                            <p class="tw-leading-normal tw-text-gray-800 dark:tw-text-gray-200">
                                Reportes automáticos y compliance integrado. Alinea tu operación con
                                IFRS, Basel III e ISO 55001 sin depender de consultores externos.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="reveal-up tw-w-full md:tw-h-[350px] max-md:tw-min-h-[350px] tw-flex">
                    <div class=" tw-relative tw-p-10 tw-transition-all tw-duration-300 tw-group/card  tw-gap-5 tw-flex 
                            max-md:tw-flex-col tw-w-full tw-h-full  tw-bg-[#f6f7fb] dark:tw-bg-[#171717] tw-rounded-3xl 
                            hover:tw-scale-[1.02]">
                        <div
                            class="tw-text-6xl tw-overflow-hidden tw-rounded-xl tw-w-full tw-h-full max-md:tw-h-[180px] tw-flex tw-items-center tw-justify-center">
                            <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-w-48 tw-h-48">
                                <img src="./assets/icons/icon-emcy-analyzing.svg" class="tw-w-20 tw-h-20 tw-opacity-80"
                                    alt="eMCy analizando">
                                <img src="./assets/icons/icon-emcy-thinking.svg" class="tw-w-20 tw-h-20 tw-opacity-80"
                                    alt="eMCy pensando">
                                <img src="./assets/icons/icon-emcy-eye.svg" class="tw-w-20 tw-h-20 tw-opacity-80"
                                    alt="eMCy observando">
                                <img src="./assets/icons/icon-emcy-loading.svg" class="tw-w-20 tw-h-20 tw-opacity-80"
                                    alt="eMCy procesando">
                            </div>
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h2 class="tw-text-3xl max-md:tw-text-2xl tw-font-light">eMCy: IA que ejecuta MHAM</h2>
                            <p class="tw-leading-normal tw-text-gray-800 dark:tw-text-gray-200">
                                eMCy no es una IA genérica. Ejecuta el método MHAM para calcular
                                valoraciones objetivas, auditables y estratégicas que antes solo expertos
                                podían generar. Esta es la verdadera innovación.
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section id="capacidades"
        class="tw-relative tw-mt-10 tw-flex tw-min-h-[100vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-items-center lg:tw-p-6">

        <div class="reveal-up tw-mt-[5%] tw-flex tw-h-full tw-w-full tw-place-content-center 
                        tw-gap-2 tw-p-4 max-lg:tw-max-w-full max-lg:tw-flex-col">

            <div class="tw-relative tw-flex tw-max-w-[30%] max-lg:tw-max-w-full tw-flex-col 
                            tw-place-items-start tw-gap-4  tw-p-2 max-lg:tw-place-items-center 
                            max-lg:tw-place-content-center max-lg:tw-w-full">
                <div
                    class="tw-top-40 tw-flex tw-flex-col lg:tw-sticky tw-place-items-center tw-max-h-fit tw-max-w-[850px] max-lg:tw-max-h-fit max-lg:tw-max-w-[320px] tw-overflow-hidden">
                    <h2 class="tw-text-5xl tw-text-center tw-font-light  max-md:tw-text-3xl">
                        Todas las capacidades, <span class="tw-font-thin">en una sola plataforma</span>
                    </h2>

                    <a href="https://app.maccloudai.com/auth/register" class="btn-primary-ai !tw-mt-8">
                        Comienza Gratis
                    </a>

                </div>

            </div>

            <div class="tw-flex tw-flex-col tw-gap-10 tw-h-full tw-max-w-1/2 max-lg:tw-max-w-full tw-px-[10%]
                             max-lg:tw-px-4 max-lg:tw-gap-3 max-lg:tw-w-full lg:tw-top-[20%]
                             tw-place-items-center
                             ">
                <!-- 1. ASSETS -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl
                                    hover:tw-shadow-lg dark:tw-shadow-[#171717] tw-duration-300 tw-transition-all
                                  tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/asset.svg" alt="Assets" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Gestión integral de activos
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Activos, categorías, ubicaciones jerárquicas, marcas, proveedores y detector con IA. Todo tu inventario centralizado y organizado.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 2. OPERATIONS -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl
                                 hover:tw-shadow-lg dark:tw-shadow-[#171717] tw-duration-300 tw-transition-all tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/maintenance.svg" alt="Operations" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Operaciones y mantenimiento
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Work orders, planes de mantenimiento, inspecciones, autoinventario, asignaciones, transferencias y retiros. Gestión completa del ciclo operativo.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 3. MONITORING -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl hover:tw-shadow-lg tw-duration-300
                                tw-transition-all dark:tw-shadow-[#171717] tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/features-dashboard.svg" alt="Monitoring" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Monitoreo inteligente
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Medidores IoT, alertas automáticas, dashboards BI, integración IoT y análisis predictivo. Tus activos bajo vigilancia 24/7.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 4. FINANCIAL -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full dark:tw-shadow-[#171717] tw-h-full tw-gap-8 tw-rounded-xl  hover:tw-shadow-lg tw-duration-300
                            tw-transition-all tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/valuation.svg" alt="Financial" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Valoración MHAM y finanzas
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Depreciaciones MHAM, tasaciones objetivas y analytics financiero. Calcula OV, SCV y TRI con fórmulas auditables sin sesgo.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 5. RISK -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl dark:tw-shadow-[#171717] hover:tw-shadow-lg tw-duration-300
                                tw-transition-all tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/risk-management.svg" alt="Risk Management"
                                    class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Gestión de riesgos enterprise
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Matrices de riesgo 5×5, heatmaps, controles y compliance Basel III, ISO 27001 y COSO ERM. Sin consultores externos.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 6. CIRCULAR ECONOMY -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl
                                    hover:tw-shadow-lg dark:tw-shadow-[#171717] tw-duration-300 tw-transition-all tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/tree-green.svg" alt="Circular Economy" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Economía circular y ESG
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Carbon tracking, métricas de sostenibilidad y waste-to-value. Alinea tus activos con economía circular certificada.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 7. COMPLIANCE -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl
                                    hover:tw-shadow-lg dark:tw-shadow-[#171717] tw-duration-300 tw-transition-all tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/cumplimiento-shield.svg" alt="Compliance" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Compliance automático
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Frameworks regulatorios, audit trail completo y normativas globales. Cumplimiento IFRS e ISO 55001 integrado.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 8. REPORTS -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl
                                    hover:tw-shadow-lg dark:tw-shadow-[#171717] tw-duration-300 tw-transition-all tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/assessment.svg" alt="Reports" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Reportes personalizados
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Report builder, exportación masiva, reportes programados y templates. Genera documentación auditable en segundos.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 9. ADMIN -->
                <div class="reveal-up tw-h-[240px] tw-w-[450px] max-md:tw-w-full">
                    <div class="tw-flex tw-w-full tw-h-full tw-gap-8 tw-rounded-xl
                                    hover:tw-shadow-lg dark:tw-shadow-[#171717] tw-duration-300 tw-transition-all tw-p-8 tw-group/card">
                        <div class="tw-flex tw-justify-start tw-items-start">
                            <div class="tw-w-16 tw-h-16 tw-flex tw-items-center tw-justify-center">
                                <img src="./assets/icons/users.svg" alt="Administration" class="tw-w-full tw-h-full tw-object-contain tw-opacity-80" />
                            </div>
                        </div>

                        <div class="tw-flex tw-flex-col tw-gap-4">
                            <h3 class="tw-text-2xl max-md:tw-text-xl tw-font-light">
                                Administración centralizada
                            </h3>
                            <p class="tw-text-gray-800 dark:tw-text-gray-100 max-md:tw-text-sm">
                                Usuarios, seguridad, configuración, billing, integraciones y API keys. Control enterprise desde un solo panel.
                            </p>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </section>

    <section
        class="tw-relative tw-flex  tw-w-full tw-min-h-[100vh] max-md:tw-min-h-[80vh] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden">
        <div class="tw-w-full max-lg:tw-max-w-full tw-place-content-center tw-place-items-center 
                        tw-flex tw-flex-col tw-max-w-[80%] tw-gap-4 tw-p-4">

            <h3 class="reveal-up tw-text-5xl tw-font-light max-md:tw-text-3xl tw-text-center tw-leading-normal">
                Un solo sistema, <span class="tw-font-thin">sin costos ocultos</span>
            </h3>
            <p class="reveal-up tw-mt-3 tw-max-w-[600px] tw-text-center ">
                Comparado con el costo combinado de softwares separados para gestión de activos, cumplimiento,
                tasaciones, reportes y
                soporte IA, <span class="maccloud">Maccloud</span> representa un ahorro de hasta 90% mensual.
            </p>



            <a href="https://app.maccloudai.com/auth/register" class="reveal-up tw-group tw-shadow-xl btn-primary-ai tw-flex tw-gap-2 tw-mt-10">
                <span>Comienza Gratis</span>
                <img src="./assets/icons/arrow-right.svg" alt="Arrow right"
                    class="tw-w-4 tw-h-4 tw-duration-300 group-hover:tw-translate-x-1" />
            </a>

        </div>
    </section>

    <section
        class="tw-flex tw-min-h-[100vh] tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-p-[2%]">
        <h3 class="reveal-up tw-text-4xl tw-font-light tw-text-center max-md:tw-text-2xl">
            Palabras de quienes <span class="tw-font-thin">lo hicieron posible</span>
        </h3>

        <div class="tw-mt-20 tw-gap-10 tw-flex max-md:tw-flex-col max-md:tw-items-center">

            <!-- Testimonio Sebas -->
            <div class="reveal-up tw-flex tw-h-fit tw-w-full tw-break-inside-avoid 
                    tw-flex-col tw-gap-4 tw-rounded-lg tw-border-[1px] 
                    tw-bg-[#f6f7fb] dark:tw-bg-[#080808] dark:tw-border-[#1f2123] tw-p-4 max-md:tw-w-[320px]">
                <div class="tw-flex tw-place-items-center tw-gap-3">
                    <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/sebastian-salaberry.jpg"
                            class="tw-h-full tw-w-full tw-object-cover" alt="Sebastián Salaberry" />
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1 tw-flex-1">
                        <div class="tw-flex tw-items-center tw-gap-2">
                            <div class="tw-font-semibold">Sebastián Salaberry</div>
                            <a href="https://www.linkedin.com/in/sebasalaberry/" target="_blank" rel="noopener noreferrer"
                                aria-label="LinkedIn Sebastián" class="tw-opacity-70 hover:tw-opacity-100 tw-transition-opacity">
                                <img src="./assets/icons/linkedin.svg" alt="LinkedIn" class="tw-w-4 tw-h-4" />
                            </a>
                        </div>
                        <div class="tw-text-gray-700 dark:tw-text-gray-300">CEO & Co-Founder</div>
                    </div>
                </div>
                <p class="tw-mt-4 tw-text-gray-800 dark:tw-text-gray-200">
                    MHAM no es solo una fórmula: es una filosofía que desafía la manera en que valoramos activos. Lo
                    creé
                    para darle objetividad al caos, y hoy ya está cambiando la industria.
                </p>
            </div>

            <!-- Testimonio Eduardo -->
            <div class="reveal-up tw-flex tw-h-fit tw-w-full tw-break-inside-avoid 
                    tw-flex-col tw-gap-4 tw-rounded-lg tw-border-[1px] 
                    tw-bg-[#f6f7fb] dark:tw-bg-[#080808] dark:tw-border-[#1f2123] tw-p-4 max-md:tw-w-[320px]">
                <div class="tw-flex tw-place-items-center tw-gap-3">
                    <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/eduardo-hernandez.png"
                            class="tw-h-full tw-w-full tw-object-cover" alt="Eduardo Hernández" />
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1 tw-flex-1">
                        <div class="tw-flex tw-items-center tw-gap-2">
                            <div class="tw-font-semibold">Eduardo Hernández</div>
                            <a href="https://www.linkedin.com/in/eduardo-hern%C3%A1ndez-42242211b/" target="_blank" rel="noopener noreferrer"
                                aria-label="LinkedIn Eduardo" class="tw-opacity-70 hover:tw-opacity-100 tw-transition-opacity">
                                <img src="./assets/icons/linkedin.svg" alt="LinkedIn" class="tw-w-4 tw-h-4" />
                            </a>
                        </div>
                        <div class="tw-text-gray-700 dark:tw-text-gray-300">CTO & Co-Founder</div>
                    </div>
                </div>
                <p class="tw-mt-4 tw-text-gray-800 dark:tw-text-gray-200">
                    <span class="maccloud">Maccloud</span> es más que un software. Unificamos gestión, trazabilidad e
                    inteligencia artificial para que
                    cualquier empresa pueda operar como una gran corporación.
                </p>
            </div>

        </div>
    </section>

    <!-- EARLY CUSTOMER PROGRAM BANNER -->
    <section id="ecp-banner" class="tw-mt-10 tw-mx-auto tw-max-w-6xl tw-px-4">
        <div class="tw-flex tw-flex-col tw-place-items-center tw-gap-6 tw-rounded-lg tw-border-2 tw-border-cyan-500 dark:tw-border-cyan-400 tw-bg-gradient-to-br tw-from-cyan-500 tw-to-blue-600 tw-p-8 tw-shadow-2xl tw-w-full">
            <!-- Header con icono -->
            <div class="tw-flex tw-items-center tw-gap-3 tw-mb-2">
                <svg width="40" height="40" fill="currentColor" viewBox="0 0 16 16" style="color: white;">
                    <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
                </svg>
                <h3 class="tw-text-3xl md:tw-text-4xl tw-font-bold tw-text-white">
                    Early Customer Program
                </h3>
            </div>

            <!-- Description -->
            <p class="tw-text-white tw-text-base md:tw-text-lg tw-text-center tw-max-w-3xl">
                Únete al Early Customer Program: Solo <strong>35 cupos disponibles</strong> con <strong>20% de descuento de por vida</strong> en cualquier plan
            </p>

            <!-- Progress Bar Section -->
            <div class="tw-w-full tw-max-w-2xl tw-mt-2">
                <div class="tw-flex tw-justify-between tw-mb-2">
                    <span class="tw-text-white tw-font-semibold tw-text-sm">Cupos Disponibles</span>
                    <span class="tw-text-white tw-font-bold tw-text-sm" id="ecp-spots-text">
                        <span id="ecp-spots-available-text">35</span>/<span id="ecp-total-spots-text">35</span>
                    </span>
                </div>
                <!-- Progress Bar -->
                <div class="tw-w-full tw-bg-white/30 tw-rounded-full tw-h-4 tw-overflow-hidden">
                    <div id="ecp-progress-bar" class="tw-bg-white tw-h-4 tw-rounded-full tw-transition-all tw-duration-500" style="width: 100%"></div>
                </div>
            </div>

            <!-- Benefits Grid -->
            <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4 tw-w-full tw-max-w-3xl">
                <div class="tw-flex tw-items-center tw-gap-2 tw-text-white">
                    <img src="./assets/icons/check-circle.svg" alt="✓" class="tw-w-5 tw-h-5" style="filter: brightness(0) invert(1);" />
                    <span class="tw-text-sm md:tw-text-base">20% descuento de por vida</span>
                </div>
                <div class="tw-flex tw-items-center tw-gap-2 tw-text-white">
                    <img src="./assets/icons/check-circle.svg" alt="✓" class="tw-w-5 tw-h-5" style="filter: brightness(0) invert(1);" />
                    <span class="tw-text-sm md:tw-text-base">Soporte prioritario</span>
                </div>
                <div class="tw-flex tw-items-center tw-gap-2 tw-text-white">
                    <img src="./assets/icons/check-circle.svg" alt="✓" class="tw-w-5 tw-h-5" style="filter: brightness(0) invert(1);" />
                    <span class="tw-text-sm md:tw-text-base">Acceso anticipado</span>
                </div>
            </div>

            <!-- CTA Button -->
            <a href="https://app.maccloudai.com/auth/register" class="btn-primary-ai tw-mt-4 !tw-w-full md:!tw-w-auto md:tw-px-16">
                Postula al ECP
            </a>
        </div>
    </section>

    <section class="tw-mt-5 tw-flex tw-flex-col tw-gap-6 tw-place-items-center tw-p-[2%]" id="pricing">
        <h3 class="reveal-up tw-text-5xl tw-font-light max-md:tw-text-2xl text-center">
            Elige el plan <span class="tw-font-thin">perfecto para ti</span>
        </h3>
        <p class="reveal-up tw-text-xl max-md:tw-text-base tw-text-center tw-text-gray-600 dark:tw-text-gray-400 tw-max-w-2xl tw-px-4 tw-font-thin">
            Comienza gratis <span class="tw-text-cyan-500 dark:tw-text-cyan-400 tw-font-light">sin tarjeta</span>, sin compromisos. Escala cuando lo necesites.
        </p>

        <!-- Selector de planes mensual/anual - OCULTO -->
        <div class="reveal-up tw-mt-8 tw-w-full tw-grid tw-place-items-center tw-text-center tw-hidden">
            <div class="tw-inline-flex tw-items-center tw-gap-6">
                <span id="label-monthly" class="tw-text-2xl tw-font-thin">Mensual</span>
                <button id="plan-toggle"
                    class="tw-relative tw-cursor-pointer tw-transition-all tw-duration-300 tw-scale-125 hover:tw-scale-150 tw-px-4">
                    <img src="./assets/icons/toggle-off.svg" alt="Toggle off" class="tw-w-16 tw-h-16"
                        id="toggle-icon" />
                </button>
                <span id="label-yearly" class="tw-text-2xl tw-font-light">Anual</span>
            </div>
            <span class="badge bg-info text-dark tw-text-xs tw-font-medium tw-mt-2 max-md:tw-w-full">¡2 meses gratis con
                planes anuales!</span>
        </div>

        <div class="tw-mt-10 tw-w-full tw-px-4 tw-pt-4 tw-flex tw-flex-wrap tw-items-stretch tw-gap-6" style="margin: 0 auto; justify-content: center;">

            <!-- Plan Starter -->
            <div
                class="reveal-up tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-[1px]
                    tw-border-outlineColor tw-bg-white dark:tw-bg-[#080808] dark:tw-border-[#1f2123] tw-p-8 tw-shadow-xl "
                style="width: 100%; max-width: 320px;">
                <h3>
                    <span class="tw-text-5xl max-md:tw-text-3xl tw-font-semibold" id="starter-price">Gratis</span>
                    <span class="tw-text-2xl tw-text-gray-600 dark:tw-text-gray-300"
                        id="starter-period">x siempre</span>
                </h3>
                <h2 class="tw-font-medium tw-mt-2 tw-text-3xl">Starter</h2>
                <p class="tw-mt-3 tw-text-center tw-text-gray-800 dark:tw-text-gray-100">
                    Emprendedores y microempresas
                </p>
                <hr />
                <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-4 tw-text-base tw-text-gray-800 dark:tw-text-gray-200">
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />25 activos</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />1 usuario</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />IA básica</li>
                </ul>
                <a href="https://app.maccloudai.com/auth/register" target="_blank" rel="noopener noreferrer"
                    class="btn-primary-ai tw-mt-auto !tw-w-full">
                    Comienza Gratis
                </a>
            </div>

            <!-- Plan Pro -->
            <div
                class="reveal-up tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-[1px]
                    tw-border-outlineColor tw-bg-white dark:tw-bg-[#080808] dark:tw-border-[#595858] tw-p-8 tw-shadow-xl "
                style="width: 100%; max-width: 320px;">
                <h3>
                    <span class="tw-text-5xl max-md:tw-text-3xl tw-font-semibold" id="pro-price">$199</span>
                    <span class="tw-text-2xl max-md:tw-text-xl tw-text-gray-600 dark:tw-text-gray-300"
                        id="pro-period">/mes</span>
                </h3>
                <h2 class="tw-font-medium tw-mt-2 tw-text-3xl">Pro</h2>
                <p class="tw-mt-3 tw-text-center tw-text-gray-800 dark:tw-text-gray-200">
                    Pymes en crecimiento
                </p>
                <hr />
                <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-4 tw-text-base tw-text-gray-800 dark:tw-text-gray-100">
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />500 activos</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Hasta 5 usuarios</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />IA estándar</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Cálculos MHAM</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Companion</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Soporte Standard</li>
                </ul>
                <a href="https://app.maccloudai.com/auth/register" target="_blank" rel="noopener noreferrer"
                    class="btn-primary-ai tw-mt-auto !tw-w-full">
                    Comienza Gratis
                </a>
            </div>

            <!-- Plan Ultimate - MÁS RECOMENDADO -->
            <div
                class="reveal-up tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2
                    tw-border-purple-500 dark:tw-bg-[#080808] dark:tw-border-purple-400 tw-bg-white tw-p-8 tw-shadow-xl tw-relative"
                style="width: 100%; max-width: 320px; overflow: visible;">
                <!-- Badge de recomendado -->
                <div class="tw-absolute tw-bg-white dark:tw-bg-gray-100 tw-text-black tw-px-4 tw-py-1.5 tw-rounded-full tw-text-xs tw-font-extrabold tw-uppercase tw-whitespace-nowrap tw-shadow-lg"
                    style="top: -14px; left: 50%; transform: translateX(-50%); z-index: 20; min-width: max-content;">
                    MÁS RECOMENDADO
                </div>
                <h3>
                    <span class="tw-text-5xl max-md:tw-text-3xl tw-font-semibold" id="ultimate-price">$499</span>
                    <span class="tw-text-2xl tw-text-gray-600 dark:tw-text-gray-300" id="ultimate-period">/mes</span>
                </h3>
                <h2 class="tw-font-medium tw-mt-2 tw-text-3xl">Ultimate</h2>
                <p class="tw-mt-3 tw-text-center tw-text-purple-600 dark:tw-text-purple-400 tw-font-semibold tw-text-xs tw-uppercase">
                    COMPLIANCE & AUDITORÍA
                </p>
                <hr />
                <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-4 tw-text-base tw-text-gray-800 dark:tw-text-gray-200">
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />5.000 activos</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Usuarios ilimitados</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />IA avanzada</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />MHAM Appraisal</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Matriz de riesgos</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Companion MAX</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Soporte Standard +</li>
                </ul>
                <div class="tw-mt-4 tw-text-sm tw-text-purple-600 dark:tw-text-purple-400">
                    Add-ons: +1K activos ($199/mes), +5K activos ($799/mes)
                </div>
                <a href="https://app.maccloudai.com/auth/register" target="_blank" rel="noopener noreferrer"
                    class="btn-primary-ai tw-mt-auto !tw-w-full">
                    Comienza Gratis
                </a>
            </div>

            <!-- Plan Enterprise -->
            <div
                class="reveal-up tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-[1px]
                    tw-border-outlineColor dark:tw-bg-[#080808] dark:tw-border-[#1f2123] tw-bg-white tw-p-8 tw-shadow-xl "
                style="width: 100%; max-width: 320px;">
                <h3>
                    <span class="tw-text-5xl max-md:tw-text-3xl tw-font-semibold" id="enterprise-price">$3.000+</span>
                    <span class="tw-text-2xl tw-text-gray-600 dark:tw-text-gray-300" id="enterprise-period">/mes</span>
                </h3>
                <h2 class="tw-font-medium tw-mt-2 tw-text-3xl">Enterprise</h2>
                <p class="tw-mt-3 tw-text-center tw-text-orange-600 dark:tw-text-orange-400 tw-font-semibold tw-text-xs tw-uppercase">
                    CORPORACIONES
                </p>
                <hr />
                <ul class="tw-mt-4 tw-flex tw-flex-col tw-gap-4 tw-text-base tw-text-gray-800 dark:tw-text-gray-200">
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Activos ilimitados</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Usuarios ilimitados</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />IA premium</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />MHAM Appraisal</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Basel III + ISO</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Companion MAX</li>
                    <li class="tw-flex tw-gap-2"><img src="./assets/icons/check-circle.svg" alt="✓"
                            class="tw-w-5 tw-h-5" />Soporte Premium + SLA</li>
                </ul>
                <a href="https://app.maccloudai.com/auth/register" target="_blank" rel="noopener noreferrer"
                    class="btn-primary-ai tw-mt-auto !tw-w-full">
                    Comienza Gratis
                </a>
            </div>

        </div>

        <!-- Información Importante -->
        <div class="reveal-up tw-mt-8 tw-text-center tw-space-y-2">
            <p class="tw-text-sm tw-text-gray-600 dark:tw-text-gray-400">
                2 meses gratis contratando plan anual
            </p>
            <p class="tw-text-sm tw-text-gray-600 dark:tw-text-gray-400">
                Sin compromiso • Cancela cuando quieras, excepto contratos anuales
            </p>
            <p class="tw-text-sm tw-text-gray-600 dark:tw-text-gray-400">
                Todos los datos son tuyos • Export completo disponible
            </p>
            <p class="tw-text-sm tw-text-gray-600 dark:tw-text-gray-400">
                Metodología MHAM publicada en Zenodo, Medium y ResearchGate
            </p>
        </div>
    </section>


    <section id="blog"
        class="tw-mt-5 tw-flex tw-min-h-[80vh] tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-p-[2%] max-lg:tw-p-3">
        <h3 class="reveal-up tw-text-4xl tw-font-light max-md:tw-text-2xl tw-text-center">
            Descubre el conocimiento <span class="tw-font-thin">que viene ✨</span>
        </h3>
        <p class="reveal-up tw-mt-3 tw-max-w-[600px] tw-text-center">
            Pronto eMCy abrirá su cuaderno digital. Diagramas técnicos, artículos, investigaciones y reflexiones del
            equipo
            de <span class="maccloud">Maccloud</span> sobre IA, gestión de activos y el método MHAM.
        </p>

        <!-- futuros artículos -->
        <div class="reveal-up tw-mt-10 tw-flex tw-flex-wrap tw-place-content-center tw-gap-10 max-lg:tw-flex-col">

            <!-- Artículo 1 -->
            <div
                class="tw-flex tw-h-[500px] tw-w-[400px] tw-flex-col tw-gap-2 tw-overflow-clip tw-rounded-lg tw-p-4 max-lg:tw-w-full">
                <div class="tw-h-[350px] tw-min-h-[350px] tw-w-full tw-overflow-hidden tw-rounded-2xl">
                    <img src="./assets/images/home/blog1.png" alt="¿Quién es eMCy?"
                        class="tw-h-full tw-w-full tw-object-cover tw-transition-transform tw-duration-700 hover:tw-scale-[1.3]" />
                </div>
                <div class="tw-text-gray-600 dark:tw-text-gray-300 tw-justify-between tw-flex tw-gap-2">
                    <div class="tw-text-gray-800 dark:tw-text-gray-200">
                        Avance exclusivo
                    </div>
                    <div class="tw-text-gray-600 dark:tw-text-gray-400">
                        Muy pronto
                    </div>
                </div>
                <h3 class="tw-mt-1 tw-font-medium tw-text-xl max-md:tw-text-xl">
                    ¿Quién es eMCy? Conoce el corazón inteligente de <span class="maccloud">Maccloud</span>
                </h3>
            </div>

            <!-- Artículo 2 -->
            <div
                class="tw-flex tw-h-[500px] tw-w-[400px] tw-flex-col tw-gap-2 tw-overflow-clip tw-rounded-lg tw-p-4 max-lg:tw-w-full">
                <div class="tw-h-[350px] tw-min-h-[350px] tw-w-full tw-overflow-hidden tw-rounded-2xl">
                    <img src="./assets/images/home/blog2.png" alt="IA + Gestión de Activos"
                        class="tw-h-full tw-w-full tw-object-cover tw-transition-transform tw-duration-700 hover:tw-scale-[1.3]" />
                </div>
                <div class="tw-text-gray-600 dark:tw-text-gray-300 tw-justify-between tw-flex tw-gap-2">
                    <div class="tw-text-gray-800 dark:tw-text-gray-200">
                        IA + Gestión de Activos
                    </div>
                    <div class="tw-text-gray-600 dark:tw-text-gray-400">
                        Próximamente
                    </div>
                </div>
                <h3 class="tw-mt-1 tw-font-medium tw-text-xl max-md:tw-text-xl">
                    Cómo usamos IA para mejorar la trazabilidad y las decisiones
                </h3>
            </div>

            <!-- Artículo 3 -->
            <div
                class="tw-flex tw-h-[500px] tw-w-[400px] tw-flex-col tw-gap-2 tw-overflow-clip tw-rounded-lg tw-p-4 max-lg:tw-w-full">
                <div class="tw-h-[350px] tw-min-h-[350px] tw-w-full tw-overflow-hidden tw-rounded-2xl">
                    <img src="./assets/images/home/blog3.png"
                        alt="Por qué MHAM podría convertirse en el nuevo estándar ISO"
                        class="tw-h-full tw-w-full tw-object-cover tw-transition-transform tw-duration-700 hover:tw-scale-[1.3]" />
                </div>
                <div class="tw-text-gray-600 dark:tw-text-gray-300 tw-justify-between tw-flex tw-gap-2">
                    <div class="tw-text-gray-800 dark:tw-text-gray-200">
                        Filosofía Maccloud
                    </div>
                    <div class="tw-text-gray-600 dark:tw-text-gray-400">
                        En preparación
                    </div>
                </div>
                <h3 class="tw-mt-1 tw-font-medium tw-text-xl max-md:tw-text-xl">
                    Por qué MHAM podría convertirse en el nuevo estándar ISO
                </h3>
            </div>

        </div>
    </section>


    <section id="faq"
        class="tw-relative tw-flex tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-p-[5%] tw-px-[10%]">

        <h3 class="tw-text-4xl tw-font-medium max-md:tw-text-2xl">
            Preguntas Frecuentes (FAQ)
        </h3>
        <div class="tw-mt-5 tw-flex tw-min-h-[300px] tw-w-full tw-max-w-[850px] tw-flex-col tw-gap-4">

            <!-- FAQ 1 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Qué es MHAM y por qué es revolucionario?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    MHAM (Maccloud Hybrid Appraisal Method) es una metodología científica publicada en repositorios académicos que reemplaza las valoraciones subjetivas con fórmulas matemáticas auditables. Calcula el Valor Operativo (OV), Valor Comercial Estratégico (SCV) e Índice de Relevancia Tecnológica (TRI) integrando valor técnico, mercado real y resiliencia operativa. Es el primer método que elimina completamente el sesgo de expertos.
                </div>
            </div>
            <hr>

            <!-- FAQ 2 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Cómo eMCy ejecuta MHAM automáticamente?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    eMCy no es una IA genérica. Ejecuta el método MHAM aplicando las fórmulas científicas para calcular ATRV (valor técnico ajustado), CMV (valor de mercado), DF (factor de depreciación) y X (índice híbrido). Lo que un consultor experto haría manualmente en semanas, eMCy lo ejecuta en segundos con resultados objetivos y trazabilidad completa.
                </div>
            </div>
            <hr>

            <!-- FAQ 3 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Qué módulos enterprise incluye Maccloud?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    Maccloud integra 9 módulos enterprise: Gestión de Activos (master data), Operaciones y Mantenimiento (work orders, planes, inspecciones), Monitoreo Inteligente (IoT, BI, predictivo), Valoración MHAM, Gestión de Riesgos (Basel III, ISO 27001, COSO ERM), Economía Circular (ESG, carbon tracking), Compliance automático, Reportes personalizados y Administración centralizada. Todo en una sola plataforma.
                </div>
            </div>
            <hr>

            <!-- FAQ 4 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Cómo funciona el compliance automático Basel III e ISO?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    Maccloud implementa frameworks de compliance automático para Basel III (riesgo operacional bancario), ISO 27001 (seguridad de la información), COSO ERM (gestión de riesgos) e ISO 55001 (gestión de activos). Genera matrices de riesgo 5×5, audit trail completo y reportes de cumplimiento sin necesidad de consultores externos. Todo alineado con normativas internacionales.
                </div>
            </div>
            <hr>

            <!-- FAQ 5 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Necesito conocimientos técnicos para usar Maccloud?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    No. Maccloud democratiza expertise enterprise. Puedes generar valoraciones MHAM, matrices de riesgo Basel III y reportes ISO 55001 sin ser contador, ingeniero o consultor. eMCy te guía paso a paso, ejecuta las fórmulas científicas automáticamente y entrega resultados auditables que antes solo expertos podían producir.
                </div>
            </div>
            <hr>

            <!-- FAQ 6 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Qué tipos de activos puedo gestionar?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    Todos: activos físicos (maquinaria, vehículos, herramientas, EPP), ubicaciones jerárquicas (branch, building, floor, room), activos digitales con MHAM-I (licencias ERP, software) y hasta activos simbólicos con MHAM-A (obras de arte, IP). Cada activo soporta 100+ campos personalizados y trazabilidad completa del ciclo de vida.
                </div>
            </div>
            <hr>

            <!-- FAQ 7 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Cuánto ahorro comparado con consultoras tradicionales?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    Consultorías para valoraciones MHAM, auditorías Basel III, implementación ISO 27001 y matrices de riesgo cuestan $50.000+ USD por proyecto. Con Maccloud, desde $199/mes puedes empezar a valorar activos con MHAM. Compliance completo Basel III e ISO requiere plan Ultimate ($499/mes), aún así representando 99% de ahorro vs consultoras tradicionales.
                </div>
            </div>
            <hr>

            <!-- FAQ 8 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Los datos están seguros y aislados por empresa?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    Sí. Maccloud usa arquitectura multi-tenant con aislamiento completo de datos por empresa (tenant-isolated Firestore). Cumple con ISO 55001 para trazabilidad, encriptación AES-256, audit trail inmutable y backups automáticos cross-region. Tus datos son tuyos y exportables en cualquier momento.
                </div>
            </div>
            <hr>

            <!-- FAQ 9 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Qué diferencia hay entre los planes?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    <strong>Starter (Gratis):</strong> 25 activos, 1 usuario, ideal para emprendedores. <strong>Pro ($199/mes):</strong> 500 activos, 5 usuarios, incluye MHAM y soporte. <strong>Ultimate ($499/mes):</strong> 5.000 activos, usuarios ilimitados, compliance completo (Basel III, ISO 27001), analytics avanzado. <strong>Enterprise ($3.000+/mes):</strong> Activos y usuarios ilimitados, IA premium, SLA garantizado y soporte dedicado.
                </div>
            </div>
            <hr>

            <!-- FAQ 10 -->
            <div class="faq tw-w-full">
                <h4 class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg">
                    <span>¿Puedo usar Maccloud desde cualquier país?</span>
                    <img src="./assets/icons/plus.svg" alt="Expand"
                        class="tw-w-5 tw-h-5 tw-origin-center tw-duration-300 tw-transition-transform tw-ml-auto" />
                </h4>
                <div class="content max-lg:tw-text-sm">
                    Sí. Maccloud es una plataforma global compatible con IFRS (normas financieras internacionales), ISO 55001, Basel III y frameworks regulatorios de cualquier país. El método MHAM opera en USD como moneda base y convierte a moneda local automáticamente. Soporta múltiples idiomas y normativas fiscales específicas por jurisdicción.
                </div>
            </div>
            <hr>

        </div>

        <div class="purple-bg-grad max-md:tw-hidden reveal-up tw-absolute tw-bottom-14 tw-right-[20%]   
                                     tw-h-[150px] tw-w-[150px] tw-rounded-full"></div>

    </section>


    <section
        class="tw-relative tw-flex tw-p-2 tw-w-full tw-min-h-[60vh] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden">
        <div class="reveal-up tw-w-full tw-h-full tw-min-h-[450px] max-lg:tw-max-w-full tw-rounded-md lg:tw-py-[5%] tw-bg-[#f6f7fb] dark:tw-bg-[#171717] tw-place-content-center tw-items-center 
                        tw-flex tw-flex-col tw-max-w-[80%] tw-gap-6 tw-p-4">

            <h3 class="reveal-up tw-text-5xl tw-font-medium max-md:tw-text-3xl tw-text-center tw-leading-normal">
                Accede a <span class="maccloud">Maccloud</span> desde donde quieras
            </h3>
            <p class="tw-text-center tw-text-gray-700 dark:tw-text-gray-300 tw-max-w-[600px] max-md:tw-text-sm">
                Pronto podrás usar <span class="maccloud">Maccloud</span> directamente desde tu smartphone para
                gestionar
                activos, recibir alertas y
                coordinar tu operación sin interrupciones.
            </p>

            <div class="tw-mt-4 tw-flex tw-gap-6 max-md:tw-flex-col tw-items-center">
                <!-- Botón Google Play -->
                <a href="#"
                    class="btn tw-flex tw-items-center tw-gap-3 tw-bg-black hover:tw-bg-gray-800 tw-transition-all tw-duration-300">
                    <img src="./assets/icons/google-play.svg" alt="Google Play" class="tw-w-6 tw-h-6" />
                    <span class="tw-text-white tw-font-semibold">Google Play</span>
                </a>

                <!-- Botón App Store -->
                <a href="#"
                    class="btn tw-flex tw-items-center tw-gap-3 tw-bg-black hover:tw-bg-gray-800 tw-transition-all tw-duration-300">
                    <img src="./assets/icons/app-store.svg" alt="App Store" class="tw-w-6 tw-h-6" />
                    <span class="tw-text-white tw-font-semibold">App Store</span>
                </a>
            </div>

            <p class="tw-mt-2 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-text-center">
                * Disponible próximamente en Android y iOS.
            </p>
        </div>
    </section>

    <section
        class="tw-flex tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-p-[5%] tw-px-[10%] max-md:tw-px-2">
        <div
            class="tw-flex tw-w-full tw-max-w-[80%] tw-place-content-center tw-place-items-center tw-justify-between tw-gap-6 
                        tw-rounded-lg tw-bg-[#F6F7FB] dark:tw-bg-[#171717] tw-p-8 max-md:tw-max-w-full max-md:tw-flex-col">
            <div class="tw-flex tw-flex-col max-lg:tw-text-center tw-gap-2">
                <h2 class="tw-text-3xl tw-text-gray-800 dark:tw-text-gray-200 max-md:tw-text-xl tw-font-medium">
                    ¿Necesitas ayuda con tu implementación?
                </h2>
                <div class="tw-text-gray-700 dark:tw-text-gray-300 tw-text-lg">Nuestro equipo está listo para guiarte en
                    tu transición a <span class="maccloud">Maccloud</span></div>
            </div>

            <div class="tw-flex tw-gap-4 tw-flex-col sm:tw-flex-row">
                <a href="mailto:info@maccloudai.com?subject=Consulta%20sobre%20Maccloud&body=Hola,%20me%20interesa%20Maccloud%20para%20mi%20empresa"
                    class="btn tw-flex tw-items-center tw-gap-3 tw-bg-blue-600 hover:tw-bg-blue-700 tw-transition-all tw-duration-300 tw-px-6 tw-py-3 tw-rounded-xl">
                    <img src="./assets/icons/email.svg" alt="Email" class="tw-w-6 tw-h-6" />
                    <span class="tw-text-white tw-font-semibold">Contactar por Email</span>
                </a>
            </div>
        </div>
    </section>

    <footer class="tw-mt-auto tw-flex tw-flex-col tw-w-full tw-gap-4 tw-text-sm tw-pt-[5%] tw-pb-10 tw-px-[10%] 
                    tw-text-black dark:tw-text-white max-md:tw-flex-col">
        <div class="tw-flex max-md:tw-flex-col max-md:tw-gap-6 tw-gap-3 tw-w-full tw-place-content-around">
            <div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-place-items-center tw-gap-6 max-md:tw-w-full">
                <a href="#" class="tw-w-full tw-place-items-center tw-flex tw-flex-col tw-gap-6">
                    <img src="./assets/logo/logo.png" alt="logo" srcset="" class="tw-max-w-[120px]" />
                    <div class="tw-max-w-[120px] tw-text-center tw-text-3xl tw-h-fit maccloud">
                        Maccloud
                    </div>
                </a>
                <!-- <div class="tw-mt-3 tw-text-lg tw-font-semibold">Follow us</div> -->
                <div class="tw-flex tw-gap-4 tw-text-lg">
                    <a href="https://www.facebook.com/maccloudoficial" target="_blank" rel="noopener noreferrer"
                        aria-label="Facebook">
                        <img src="./assets/icons/facebook.svg" alt="Facebook" class="tw-w-6 tw-h-6" />
                    </a>
                    <a href="https://www.instagram.com/maccloudcl/" target="_blank" rel="noopener noreferrer"
                        aria-label="Instagram">
                        <img src="./assets/icons/instagram.svg" alt="Instagram" class="tw-w-6 tw-h-6" />
                    </a>
                    <a href="https://www.linkedin.com/company/maccloud/" target="_blank" rel="noopener noreferrer"
                        aria-label="LinkedIn">
                        <img src="./assets/icons/linkedin.svg" alt="LinkedIn" class="tw-w-6 tw-h-6" />
                    </a>
                    <a href="https://www.youtube.com/@maccloudcl" target="_blank" rel="noopener noreferrer"
                        aria-label="YouTube">
                        <img src="./assets/icons/youtube.svg" alt="YouTube" class="tw-w-6 tw-h-6" />
                    </a>
                </div>

            </div>

            <div class="tw-flex max-md:tw-flex-col tw-flex-wrap tw-gap-6 tw-h-full tw-w-full tw-justify-around">
                <div class="tw-flex tw-h-full tw-w-[200px] tw-flex-col tw-gap-4">
                    <h2 class="tw-text-xl tw-font-medium">Recursos</h2>
                    <div class="tw-flex tw-flex-col tw-gap-3">
                        <a href="https://mham.maccloudai.com" class="footer-link">MHAM</a>
                        <a href="https://green.maccloudai.com" class="footer-link">Maccloud Green</a>
                        <a href="https://emcy.maccloudai.com" class="footer-link">eMCy</a>
                        <a href="https://verify.maccloudai.com" class="footer-link">Verify</a>
                        <a href="https://docs.maccloudai.com" class="footer-link">API Docs</a>
                    </div>
                </div>


                <div class="tw-flex tw-h-full tw-w-[200px] tw-flex-col tw-gap-4">
                    <h2 class="tw-text-xl tw-font-medium">Apoyado por</h2>
                    <div class="tw-flex tw-flex-col tw-gap-6 tw-items-center">
                        <!-- Logo CORFO -->
                        <div class="tw-w-32 tw-h-16 tw-flex tw-items-center tw-justify-center">
                            <img src="./assets/images/brand-logos/corfo_light.jpg" alt="CORFO"
                                class="tw-w-full tw-h-full tw-object-contain" />
                            <img src="./assets/images/brand-logos/corfo_dark.png" alt="CORFO"
                                class="tw-w-full tw-h-full tw-object-contain tw-hidden" />
                        </div>
                        <!-- Logo Ecosistema -->
                        <div class="tw-w-32 tw-h-16 tw-flex tw-items-center tw-justify-center">
                            <img src="./assets/images/brand-logos/ecosistema_light.png" alt="Ecosistema Startup"
                                class="tw-w-full tw-h-full tw-object-contain" id="ecosistema-footer-light" />
                            <img src="./assets/images/brand-logos/ecosistema_dark.png" alt="Ecosistema Startup"
                                class="tw-w-full tw-h-full tw-object-contain tw-hidden" id="ecosistema-footer-dark" />
                        </div>
                    </div>
                </div>

                <div class="tw-flex tw-h-full tw-w-[200px] tw-flex-col tw-gap-4">
                    <h2 class="tw-text-xl tw-font-medium">Legal</h2>
                    <div class="tw-flex tw-flex-col tw-gap-3">
                        <a href="#" class="footer-link" id="open-terms">Términos y Condiciones</a>
                        <a href="#" class="footer-link" id="open-privacy">Política de Privacidad</a>
                    </div>
                </div>
            </div>
        </div>

        <hr class="tw-mt-8">
        <div class="tw-mt-2 tw-flex tw-gap-2 tw-flex-col tw-text-gray-700 dark:tw-text-gray-300 tw-place-items-center 
                    tw-text-[12px] tw-w-full tw-text-center tw-place-content-around">
            <span>Copyright &#169; <span class="maccloud">Maccloud</span> <span id="current-year"></span></span>
            <span>Todos los derechos reservados. <span class="maccloud">Maccloud</span> es una Marca
                Registrada.</span>
        </div>

    </footer>

    <!-- Modal de Términos y Condiciones -->
    <div class="tw-fixed tw-bg-[#000000af] dark:tw-bg-[#80808085] tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-z-20 tw-transition-opacity
        tw-duration-300 tw-scale-0 tw-opacity-0 tw-p-2
        tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center" id="terms-modal-bg">

        <div class="tw-max-w-[80vw] max-lg:tw-max-w-full max-lg:tw-w-full tw-scale-0 tw-transition-transform tw-duration-500 tw-p-6 tw-rounded-xl  max-lg:tw-px-2 tw-w-full tw-gap-2 tw-shadow-md 
                    tw-h-[90vh] tw-bg-white dark:tw-bg-[#16171A] tw-max-h-full
                    " id="terms-modal">
            <div class="tw-w-full tw-flex">
                <button type="button" class="tw-ml-auto tw-text-xl" title="close" id="close-terms">
                    <img src="./assets/icons/close-circle.svg" alt="Cerrar" class="tw-w-6 tw-h-6 modal-close-icon" />
                </button>
            </div>
            <div
                class="tw-flex tw-w-full tw-rounded-xl tw-px-[5%] max-md:tw-px-2 tw-min-h-[300px] tw-max-h-[90%] tw-h-full tw-overflow-y-auto modal-scroll">
                <div class="tw-w-full tw-space-y-6">

                    <h2 class="tw-text-2xl tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-6">Términos y
                        Condiciones</h2>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">1. Aceptación de
                            los Términos</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Al acceder y utilizar Maccloud, usted acepta estar sujeto a estos términos y condiciones. Si
                            no está de acuerdo con alguna parte de estos términos, no debe utilizar nuestro servicio.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">2. Descripción
                            del Servicio</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Maccloud es una plataforma de gestión de activos empresariales que utiliza inteligencia
                            artificial para análisis, valoración y optimización de activos. El servicio incluye el
                            método MHAM (Maccloud Hybrid Appraisal Method) registrado internacionalmente.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">3. Cuentas de
                            Usuario</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Para utilizar Maccloud, debe crear una cuenta. Usted es responsable de mantener la
                            confidencialidad de su información de inicio de sesión y de todas las actividades que
                            ocurran bajo su cuenta.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">4. Uso Aceptable
                        </h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Usted se compromete a utilizar Maccloud solo para fines legales y apropiados. Está prohibido
                            el uso del servicio para actividades ilegales, fraudulentas o que puedan dañar a otros
                            usuarios.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">5. Propiedad
                            Intelectual</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Maccloud y todo su contenido, incluyendo pero no limitado a software, algoritmos, métodos de
                            valoración y documentación, son propiedad de Maccloud y están protegidos por derechos de
                            autor y otras leyes de propiedad intelectual.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">6. Privacidad y
                            Datos</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Su privacidad es importante para nosotros. El uso de su información personal está gobernado
                            por nuestra Política de Privacidad, que forma parte de estos términos.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">7. Limitación de
                            Responsabilidad</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Maccloud se proporciona "tal como está" sin garantías de ningún tipo. No seremos
                            responsables por daños indirectos, incidentales o consecuentes que puedan resultar del uso
                            del servicio.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">8.
                            Modificaciones</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Nos reservamos el derecho de modificar estos términos en cualquier momento. Los cambios
                            entrarán en vigor inmediatamente después de su publicación en la plataforma.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">9. Terminación
                        </h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Podemos terminar o suspender su acceso a Maccloud en cualquier momento, sin previo aviso,
                            por cualquier motivo, incluyendo el incumplimiento de estos términos.
                        </p>
                    </div>

                    <div class="tw-pb-3">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">10. Ley
                            Aplicable</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Estos términos se rigen por las leyes de Chile. Cualquier disputa será resuelta en los
                            tribunales competentes de Santiago, Chile.
                        </p>
                    </div>

                    <!-- Nota final -->
                    <div
                        class="tw-mt-6 tw-p-4 tw-bg-cyan-50 dark:tw-bg-cyan-900/20 tw-border tw-border-cyan-200 dark:tw-border-cyan-700 tw-rounded-lg">
                        <div class="tw-text-center">
                            <p class="tw-text-sm tw-text-cyan-800 dark:tw-text-cyan-200 tw-font-medium tw-mb-2">
                                Al utilizar Maccloud, usted confirma que ha leído, entendido y aceptado estos términos y
                                condiciones en su totalidad.
                            </p>
                            <p class="tw-text-sm tw-text-cyan-600 dark:tw-text-cyan-300">
                                Para consultas legales: legal@maccloudai.com
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Política de Privacidad -->
    <div class="tw-fixed tw-bg-[#000000af] dark:tw-bg-[#80808085] tw-top-0 tw-left-1/2 tw--translate-x-1/2 tw-z-20 tw-transition-opacity
        tw-duration-300 tw-scale-0 tw-opacity-0 tw-p-2
        tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center" id="privacy-modal-bg">

        <div class="tw-max-w-[80vw] max-lg:tw-max-w-full max-lg:tw-w-full tw-scale-0 tw-transition-transform tw-duration-500 tw-p-6 tw-rounded-xl  max-lg:tw-px-2 tw-w-full tw-gap-2 tw-shadow-md 
                    tw-h-[90vh] tw-bg-white dark:tw-bg-[#16171A] tw-max-h-full
                    " id="privacy-modal">
            <div class="tw-w-full tw-flex">
                <button type="button" class="tw-ml-auto tw-text-xl" title="close" id="close-privacy">
                    <img src="./assets/icons/close-circle.svg" alt="Cerrar" class="tw-w-6 tw-h-6 modal-close-icon" />
                </button>
            </div>
            <div
                class="tw-flex tw-w-full tw-rounded-xl tw-px-[5%] max-md:tw-px-2 tw-min-h-[300px] tw-max-h-[90%] tw-h-full tw-overflow-y-auto modal-scroll">
                <div class="tw-w-full tw-space-y-6">

                    <h2 class="tw-text-2xl tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-6">Política de
                        Privacidad</h2>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">1. Información
                            que Recopilamos</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Recopilamos información que usted nos proporciona directamente, como cuando crea una cuenta,
                            utiliza nuestros servicios o se comunica con nosotros. Esto incluye información de contacto,
                            datos de activos empresariales y preferencias de configuración.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">2. Uso de la
                            Información</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Utilizamos su información para proporcionar, mantener y mejorar nuestros servicios, procesar
                            transacciones, enviar comunicaciones relacionadas con el servicio y cumplir con obligaciones
                            legales.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">3. Compartir
                            Información</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            No vendemos, alquilamos ni compartimos su información personal con terceros, excepto en las
                            siguientes circunstancias: con su consentimiento explícito, para cumplir con obligaciones
                            legales, o para proteger nuestros derechos y seguridad.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">4. Seguridad de
                            Datos</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Implementamos medidas de seguridad técnicas y organizativas apropiadas para proteger su
                            información personal contra acceso no autorizado, alteración, divulgación o destrucción.
                            Utilizamos encriptación AES-256 y cumplimos con estándares de seguridad internacionales.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">5. Retención de
                            Datos</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Conservamos su información personal durante el tiempo necesario para cumplir con los
                            propósitos descritos en esta política, a menos que la ley requiera un período de retención
                            más largo.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">6. Sus Derechos
                        </h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Usted tiene derecho a acceder, corregir, eliminar y portar su información personal. También
                            puede oponerse al procesamiento de sus datos o solicitar la limitación del mismo. Para
                            ejercer estos derechos, contáctenos.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">7. Cookies y
                            Tecnologías Similares</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Utilizamos cookies y tecnologías similares para mejorar su experiencia, analizar el uso del
                            servicio y personalizar el contenido. Puede controlar el uso de cookies a través de la
                            configuración de su navegador.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">8.
                            Transferencias Internacionales</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Su información puede ser transferida y procesada en países distintos a su país de
                            residencia. Garantizamos que estas transferencias cumplan con las leyes de protección de
                            datos aplicables.
                        </p>
                    </div>

                    <div class="tw-pb-3 tw-border-b tw-border-gray-100 dark:tw-border-gray-700">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">9. Menores de
                            Edad</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Nuestros servicios no están dirigidos a menores de 18 años. No recopilamos intencionalmente
                            información personal de menores de edad. Si cree que hemos recopilado información de un
                            menor, contáctenos.
                        </p>
                    </div>

                    <div class="tw-pb-3">
                        <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 dark:tw-text-white tw-mb-2">10. Cambios a
                            esta Política</h3>
                        <p class="tw-text-gray-700 dark:tw-text-gray-300 tw-leading-relaxed">
                            Podemos actualizar esta política de privacidad ocasionalmente. Le notificaremos sobre
                            cambios significativos enviando un aviso a la dirección de correo electrónico asociada con
                            su cuenta.
                        </p>
                    </div>

                    <!-- Nota final -->
                    <div
                        class="tw-mt-6 tw-p-4 tw-bg-cyan-50 dark:tw-bg-cyan-900/20 tw-border tw-border-cyan-200 dark:tw-border-cyan-700 tw-rounded-lg">
                        <div class="tw-text-center">
                            <p class="tw-text-sm tw-text-cyan-600 dark:tw-text-cyan-300 tw-mb-2">
                                Última actualización: Julio 2025
                            </p>
                            <p class="tw-text-sm tw-text-cyan-800 dark:tw-text-cyan-200 tw-font-medium">
                                Para preguntas sobre esta política, contáctenos en: legal@maccloudai.com
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"
    integrity="sha512-B1lby8cGcAUU3GR+Fd809/ZxgHbfwJMp0jLTVfHiArTuUt++VqSlJpaJvhNtRf3NERaxDNmmxkdx2o+aHd4bvw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js"
    integrity="sha512-AY2+JxnBETJ0wcXnLPCcZJIJx0eimyhz3OJ55k2Jx4RtYC+XdIi2VtJQ+tP3BaTst4otlGG1TtPJ9fKrAUnRdQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"
    integrity="sha512-hIlMpy2enepx9maXZF1gn0hsvPLerXoLHdb095CmRY5HG3bZfN7XPBZ14g+TUDH1aGgfLyPHmY9/zuU53smuMw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="./scripts/components.js?v=5.55.0"></script>
<script src="./index.js?v=5.55.0"></script>

<!-- ECP Spots Counter Script -->
<script>
  // Fetch ECP spots from Cloud Function
  async function loadECPSpots() {
    try {
      const response = await fetch('https://getecpspots-hfgspealpq-uc.a.run.app');
      const data = await response.json();

      if (data.success) {
        // Get elements
        const spotsAvailableEl = document.getElementById('ecp-spots-available-text');
        const totalSpotsEl = document.getElementById('ecp-total-spots-text');
        const progressBar = document.getElementById('ecp-progress-bar');
        const spotsTextEl = document.getElementById('ecp-spots-text');

        if (spotsAvailableEl && totalSpotsEl && progressBar) {
          const spotsAvailable = data.spotsAvailable || 0;
          const totalSpots = data.totalSpots || 35;

          // Update counter text
          spotsAvailableEl.textContent = spotsAvailable;
          totalSpotsEl.textContent = totalSpots;

          // Calculate progress percentage
          const percentage = (spotsAvailable / totalSpots) * 100;

          // Update progress bar width with smooth animation
          progressBar.style.width = percentage + '%';

          // Add urgency styling based on spots available
          if (spotsAvailable <= 5 && spotsAvailable > 0) {
            // Low spots: yellow pulsing warning
            progressBar.classList.remove('tw-bg-white', 'tw-bg-red-500');
            progressBar.classList.add('tw-bg-yellow-400', 'tw-animate-pulse');
            if (spotsTextEl) {
              spotsTextEl.classList.add('tw-animate-pulse');
            }
          } else if (spotsAvailable === 0) {
            // No spots: red bar
            progressBar.classList.remove('tw-bg-white', 'tw-bg-yellow-400', 'tw-animate-pulse');
            progressBar.classList.add('tw-bg-red-500');
            if (spotsTextEl) {
              spotsTextEl.classList.remove('tw-animate-pulse');
            }
          } else {
            // Normal: white bar
            progressBar.classList.remove('tw-bg-yellow-400', 'tw-bg-red-500', 'tw-animate-pulse');
            progressBar.classList.add('tw-bg-white');
            if (spotsTextEl) {
              spotsTextEl.classList.remove('tw-animate-pulse');
            }
          }
        }

        // Hide section if spots are 0 and program is inactive
        if (data.spotsAvailable === 0 && data.active === false) {
          const ecpSection = document.getElementById('ecp-banner');
          if (ecpSection) {
            ecpSection.style.display = 'none';
          }
        }
      }
    } catch (error) {
      console.error('Error loading ECP spots:', error);
      // Show default values on error
      const spotsAvailableEl = document.getElementById('ecp-spots-available-text');
      const totalSpotsEl = document.getElementById('ecp-total-spots-text');
      const progressBar = document.getElementById('ecp-progress-bar');

      if (spotsAvailableEl && totalSpotsEl && progressBar) {
        spotsAvailableEl.textContent = '35';
        totalSpotsEl.textContent = '35';
        progressBar.style.width = '100%';
      }
    }
  }

  // Load on page load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadECPSpots);
  } else {
    loadECPSpots();
  }

  // Refresh every 5 minutes to keep contador updated
  setInterval(loadECPSpots, 5 * 60 * 1000);
</script>


</html>
