@charset "utf-8";
/* CSS Document */



		
		body {
            background-color: #15234f;
            color: #ffffff;
            position: relative;
            font-family: 'Geist', sans-serif;
        }
        
        h1, h2, h3, h4, h5, h6, .font-heading {
            font-family: 'Outfit', sans-serif;
        }

        .css-noise {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            pointer-events: none;
            z-index: 50;
            opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        .glass-nav {
            background: rgba(21, 35, 79, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }

        .reveal-blur {
            opacity: 0;
            filter: blur(12px);
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .reveal-blur.active {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
        }

        .text-gradient-primary {
            background: linear-gradient(135deg, #e80085, #39a7df);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        #reading-progress {
            position: fixed;
            top: 0; left: 0; height: 3px;
            background: linear-gradient(90deg, #e80085, #39a7df);
            z-index: 9999;
            width: 0%;
            transition: width 0.1s ease;
        }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .glow-card {
            position: relative;
            background: #07162c;
            border-radius: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 1;
            transition: transform 0.4s ease, border-color 0.4s ease;
        }
        
        .glow-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(60deg, #f29105, #e80085, #39a7df, #1e3a8a, #f29105);
            background-size: 300% 300%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
            animation: gradientMove 4s linear infinite;
            z-index: -1;
            pointer-events: none;
        }
        
        .glow-card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(60deg, #f29105, #e80085, #39a7df, #1e3a8a, #f29105);
            background-size: 300% 300%;
            filter: blur(15px);
            opacity: 0;
            transition: opacity 0.4s ease;
            animation: gradientMove 4s linear infinite;
            z-index: -2;
            pointer-events: none;
        }
        
        .glow-card:hover {
            transform: translateY(-5px);
            border-color: transparent;
        }
        .glow-card:hover::before { opacity: 1; }
        .glow-card:hover::after { opacity: 0.15; }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .text-gradient-animated {
            background: linear-gradient(to right, #f29105, #e80085, #39a7df, #1e3a8a, #f29105);
            background-size: 200% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            animation: gradientTextSlide 5s linear infinite;
        }
        @keyframes gradientTextSlide {
            to { background-position: 200% center; }
        }

        .liquid-shape {
            position: absolute;
            border: 2px solid;
            opacity: 0.4;
            pointer-events: none;
            z-index: 1;
            box-shadow: 0 0 20px inset, 0 0 20px;
        }
        
        .shape-1 {
            width: clamp(250px, 30vw, 450px);
            height: clamp(250px, 30vw, 450px);
            border-color: #f29105;
            color: rgba(242, 145, 5, 0.3);
            top: 5%; left: -5%;
            animation: floatLiquid1 20s infinite ease-in-out alternate;
        }
        
        .shape-2 {
            width: clamp(300px, 35vw, 550px);
            height: clamp(300px, 35vw, 550px);
            border-color: #39a7df;
            color: rgba(57, 167, 223, 0.3);
            top: 25%; right: -10%;
            animation: floatLiquid2 24s infinite ease-in-out alternate;
        }
        
        .shape-3 {
            width: clamp(280px, 32vw, 480px);
            height: clamp(280px, 32vw, 480px);
            border-color: #e80085;
            color: rgba(232, 0, 133, 0.3);
            bottom: -15%; left: 10%;
            animation: floatLiquid3 28s infinite ease-in-out alternate;
        }
        
        .shape-4 {
            width: clamp(200px, 25vw, 400px);
            height: clamp(200px, 25vw, 400px);
            border-color: #1e3a8a;
            color: rgba(30, 58, 138, 0.3);
            bottom: 10%; right: 15%;
            animation: floatLiquid4 26s infinite ease-in-out alternate;
        }

        @keyframes floatLiquid1 {
            0% { transform: translate(0, 0) rotate(0deg); border-radius: 40px; }
            33% { transform: translate(10vw, 15vh) rotate(45deg); border-radius: 60px 30px 80px 40px; }
            66% { transform: translate(15vw, -5vh) rotate(90deg); border-radius: 30px 70px 40px 60px; }
            100% { transform: translate(5vw, 10vh) rotate(180deg); border-radius: 40px; }
        }
        @keyframes floatLiquid2 {
            0% { transform: translate(0, 0) rotate(0deg); border-radius: 30px 60px 40px 50px; }
            33% { transform: translate(-15vw, 10vh) rotate(-45deg); border-radius: 50px; }
            66% { transform: translate(-5vw, 25vh) rotate(-90deg); border-radius: 60px 40px 70px 30px; }
            100% { transform: translate(0, 15vh) rotate(-180deg); border-radius: 30px 60px 40px 50px; }
        }
        @keyframes floatLiquid3 {
            0% { transform: translate(0, 0) rotate(0deg); border-radius: 50px; }
            33% { transform: translate(15vw, -15vh) rotate(60deg); border-radius: 30px 70px 50px 40px; }
            66% { transform: translate(-5vw, -10vh) rotate(120deg); border-radius: 80px 40px 40px 60px; }
            100% { transform: translate(10vw, -20vh) rotate(180deg); border-radius: 50px; }
        }
        @keyframes floatLiquid4 {
            0% { transform: translate(0, 0) rotate(0deg); border-radius: 60px 40px 50px 30px; }
            33% { transform: translate(-10vw, -20vh) rotate(-60deg); border-radius: 40px; }
            66% { transform: translate(5vw, -10vh) rotate(-120deg); border-radius: 40px 70px 30px 60px; }
            100% { transform: translate(-15vw, -5vh) rotate(-180deg); border-radius: 60px 40px 50px 30px; }
        }

        .light-liquid-shape {
            position: absolute;
            border: 2px solid;
            opacity: 0.8;
            pointer-events: none;
            z-index: 0;
            box-shadow: 0 0 40px inset rgba(0,0,0,0.02), 0 0 40px rgba(0,0,0,0.02);
        }
        .light-shape-1 {
            width: clamp(300px, 40vw, 700px);
            height: clamp(300px, 40vw, 700px);
            border-color: #f3f4f6;
            top: -10%; left: -5%;
            animation: floatLiquid1 25s infinite ease-in-out alternate;
        }
        .light-shape-2 {
            width: clamp(250px, 35vw, 600px);
            height: clamp(250px, 35vw, 600px);
            border-color: #e5e7eb;
            bottom: -5%; right: -5%;
            animation: floatLiquid2 22s infinite ease-in-out alternate;
        }

        #soluciones-modal {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        #soluciones-modal.modal-open {
            opacity: 1;
            pointer-events: auto;
        }
        #soluciones-modal .modal-panel {
            transform: scale(0.95) translateY(20px);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        #soluciones-modal.modal-open .modal-panel {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
        
        /* --- Estilos Modal 11 Pilares --- */
        #pilares-modal {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        #pilares-modal.modal-open {
            opacity: 1;
            pointer-events: auto;
        }
        #pilares-modal .pilares-modal-panel {
            transform: scale(0.95) translateY(20px);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        #pilares-modal.modal-open .pilares-modal-panel {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        .list-item-animated {
            opacity: 0;
            transform: translateX(-20px);
            animation: slideInRight 0.5s ease forwards;
        }
        @keyframes slideInRight {
            to { opacity: 1; transform: translateX(0); }
        }

        /* --- Estilos Modal Iframe Agendar Demostración --- */
        #iframe-modal {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        #iframe-modal.modal-open {
            opacity: 1;
            pointer-events: auto;
        }
        #iframe-modal .iframe-modal-panel {
            transform: scale(0.95) translateY(20px);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        #iframe-modal.modal-open .iframe-modal-panel {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #15234f; }
        ::-webkit-scrollbar-thumb { background: #1e3a8a; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #e80085; }

        @media (max-width: 1023px) {
            .mobile-slider-x::-webkit-scrollbar { display: none; }
            .mobile-slider-x { -ms-overflow-style: none; scrollbar-width: none; }
        }

       /* --- Animación de Alianzas Estratégicas --- */
        .alianzas-track {
            animation: scroll-alianzas 80s linear infinite;
        }
        .alianzas-track:hover {
            animation-play-state: paused;
        }
        @keyframes scroll-alianzas {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }