:root {
            --primary-gradient: linear-gradient(to right, #FF0080, #A020F0); /* Fucsia a un púrpura suave */
            --primary-color-start: #FF0080;
            --primary-color-end: #A020F0;
            --dark-color: #0d0d0d; /* Negro muy oscuro */
            --light-color: #ffffff; /* Blanco */
            --text-muted-color: #cccccc;
        }
        body {
            font-family: 'Poppins', sans-serif; /* Fuente de la Opción 2 */
            color: var(--text-muted-color);
            background-color: var(--dark-color);
        }
        h1, h2, h3, h4, h5, h6 {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .navbar-gradient {
            background-color: var(--dark-color);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .navbar-gradient .nav-link {
            color: var(--light-color) !important;
            font-weight: 600;
        }
        .navbar-gradient .nav-link:hover {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* KEYFRAMES para la animación del fondo (de la Opción 3) */
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .hero-section-gradient {
            background: linear-gradient(45deg, #1c1c1c, #0d0d0d, #2a2a2a, #E01E7E, #A020F0, #1c1c1c);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            min-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
            border-bottom: 5px solid var(--primary-color-start);
        }
        .hero-section-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 0;
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        .btn-gradient {
            background: var(--primary-gradient);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.1rem;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255,0,128,0.4);
        }
        .btn-gradient:hover {
            background: linear-gradient(to left, #FF0080, #A020F0);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255,0,128,0.6);
        }
        .btn-outline-light-gradient {
            border: 2px solid var(--light-color);
            color: var(--light-color);
            padding: 12px 30px;
            font-size: 1.1rem;
            border-radius: 50px;
            transition: all 0.3s ease;
        }
        .btn-outline-light-gradient:hover {
            background-color: var(--light-color);
            color: var(--dark-color);
            transform: translateY(-3px);
        }
        .section-title-gradient {
            font-size: 3rem;
            margin-bottom: 50px;
            text-align: center;
            position: relative;
        }
        .section-title-gradient::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -15px;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: var(--primary-gradient);
            border-radius: 2px;
        }
        .card-elegant {
            background-color: #1a1a1a;
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .card-elegant:hover {
            transform: translateY(-8px);
        }
        .card-elegant img { /* Solo para imágenes, no para iframes */
            width: 100%;
            height: 280px;
            object-fit: cover;
        }
        .video-container { /* Estilo para hacer los iframes responsivos */
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            border-radius: 12px 12px 0 0; /* Bordes redondeados solo arriba */
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .benefits-card-icon {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 3.8rem;
            margin-bottom: 20px;
        }
        .platform-logo-colored {
            max-height: 80px; /* Ajustado para ser un poco más pequeño */
            width: auto;
            margin: 15px;
            transition: transform 0.3s ease, filter 0.3s ease;
            flex-shrink: 0;
            flex-grow: 0;
        }
        .platform-logo-colored:hover {
            transform: scale(1.15);
            filter: drop-shadow(0 0 10px rgba(255,0,128,0.7));
        }
        .contact-form-elegant {
            background-color: #1a1a1a;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .form-control-elegant {
            background-color: #2c2c2c;
            border: 1px solid #444;
            color: var(--light-color);
            padding: 12px 20px;
            border-radius: 8px;
        }
        .form-control-elegant::placeholder {
            color: #888;
        }
        .form-control-elegant:focus {
            background-color: #3a3a3a;
            border-color: var(--primary-color-start);
            box-shadow: 0 0 0 0.25rem rgba(255,0,128,0.25);
            color: var(--light-color);
        }
        .footer-gradient {
            background: var(--dark-color);
            color: var(--text-muted-color);
            padding: 40px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .footer-gradient a {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            font-weight: bold;
        }
        .footer-gradient a:hover {
            filter: brightness(1.2);
        }
        .about-us-section {
            padding: 60px 0;
            background-color: #121212;
        }
        .about-us-section h3 {
            font-size: 2.2rem;
            margin-bottom: 25px;
            text-align: center;
        }
        .about-us-section p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-muted-color);
        }
        .mission-vision-card {
            background-color: #1a1a1a;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            text-align: center;
            height: 100%;
        }
        .mission-vision-card h4 {
            font-size: 1.6rem;
            margin-bottom: 15px;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .support-section {
            padding: 60px 0;
            background-color: #0d0d0d;
        }
        .support-list li {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: var(--light-color);
        }
        .support-list i {
            color: var(--primary-color-start);
            margin-right: 10px;
        }

        /* Estilos para la animación de escritura */
        .animated-text {
            overflow: hidden; /* Asegura que el contenido no se desborde */
            border-right: .15em solid white; /* Simula el cursor */
            white-space: wrap; /* Evita que el texto salte de línea */
            margin: 0 auto; /* Centra el texto si es necesario */
            letter-spacing: .05em; /* Espaciado entre letras opcional */
            display: inline-block; /* Crucial para que el ancho animado funcione */
            vertical-align: bottom; /* Para alinear el cursor con la base del texto */
            box-sizing: border-box; /* Incluye padding y borde en el ancho total */
            line-height: inherit; /* Asegura que la altura de línea se herede correctamente */
            /* La animación blink-caret se aplicará y removerá por JS */
        }

        /* Keyframes para el parpadeo del cursor */
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: white }
        }

        .hero-phrases {
            min-height: 80px; /* Aumentado para dar más espacio y evitar saltos con textos largos */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative; /* Para posicionar las frases absolutas */
            width: 100%; /* Asegura que ocupa todo el ancho */
        }
        .hero-phrases p {
            margin-bottom: 0; /* Elimina el margen inferior predeterminado del párrafo */
            position: absolute; /* Para que se superpongan */
            width: 100%; /* Ocupa el ancho completo del contenedor */
            left: 0;
            text-align: center;
            opacity: 0; /* Inicialmente invisibles */
            transition: opacity 0.5s ease-in-out; /* Transición suave al aparecer/desaparecer */
            display: block; /* Mantiene el display para que span.animated-text pueda ser inline-block */
        }
        .hero-phrases p.active {
            opacity: 1; /* Hace visible la frase activa */
        }
        /* Las frases no activas deben estar completamente ocultas y sin animaciones */
        .hero-phrases p:not(.active) .animated-text {
            animation: none !important; /* Desactiva la animación de escritura en frases no activas */
            border-right-color: transparent !important; /* Oculta el cursor en frases no activas */
            width: auto !important; /* Permitir que el texto ocupe su ancho natural */
        }
         .video-container { /* Estilo para hacer los iframes y videos responsivos */
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            border-radius: 12px 12px 0 0; /* Bordes redondeados solo arriba */
        }
        .video-container iframe,
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
            object-fit: contain; /* ¡CAMBIO CLAVE AQUÍ! */
            /* object-position: 50% 70%; <-- Esta línea ya no sería necesaria si quieres el video centrado por defecto con barras negras */
        }
        /* Asegurar que los iconos de las flechas del carrusel sean visibles */
        /* Centrado vertical de los controles completos */
        .carousel-control-prev,
        .carousel-control-next {
            top: 50%;
            transform: translateY(-50%);
            width: 5%; /* Opcional: Ajusta el ancho de la zona clicable */
        }

        /* Redefinir la imagen de fondo SVG de las flechas */

        /* Flecha Anterior (la de la izquierda) - queremos que apunte a la DERECHA */
        .carousel-control-prev-icon {
            /* La URL del SVG es la misma que usa Bootstrap para la flecha 'next' (apunta a la derecha) */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
            background-size: 100% 100%; /* Asegura que la imagen SVG ocupe todo el espacio del icono */
            /* background-color: rgba(255, 255, 255, 0.2); /* Opcional: Un pequeño fondo para que se vea más */
        }

        /* Flecha Siguiente (la de la derecha) - queremos que apunte a la IZQUIERDA */
        .carousel-control-next-icon {
            /* La URL del SVG es la misma que usa Bootstrap para la flecha 'prev' (apunta a la izquierda) */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
            background-size: 100% 100%; /* Asegura que la imagen SVG ocupe todo el espacio del icono */
            /* background-color: rgba(255, 255, 255, 0.2); /* Opcional: Un pequeño fondo para que se vea más */
        }

        /* Opcional: Si también necesitas cambiar los indicadores (los puntitos de abajo) */
        .carousel-indicators [data-bs-target] {
            background-color: #fff !important; /* Cambia el color de los indicadores a blanco */
        }
        @media (max-width: 768px) {
        .platform-logo-colored {
        max-height: 60px;
        margin: 10px;
        }
        }
        @media (max-width: 576px) {
        .platform-logos-container {
        justify-content: center; /* Asegura que los logos se centren en filas /*/
        }
        .platform-logo-colored {
        max-height: 40px;
        width: auto; /* Permite que el ancho se ajuste proporcionalmente */
        margin: 8px 5px; /* Reducimos el margen horizontal */
        }
        }