/* Estilos base con fuentes futuristas */
        :root {
            --color-primary: #5cd7f6; /* Cyber Purple */
            --color-primary-glow: rgba(10, 209, 14, 0.5);
            --color-bg-dark: #0d1117;
            --color-bg-light: #f0f2f5; 
            --color-surface-dark: rgba(13, 17, 23, 0.7);
            --color-surface-light: #ffffff; /* Solid white for light mode cards */
            --color-border-dark: rgba(139, 92, 246, 0.2);
            --color-border-light: #e5e7eb; /* Light gray border */
            --color-green-money: #22c55e; /* Verde para el dinero, para las partículas */
        }
        
        body {
            font-family: 'Rajdhani', sans-serif;
            scroll-behavior: smooth;
        }

        /* ESTILOS POR DEFECTO (TEMA OSCURO) */
        .dark body { 
            background-color: var(--color-bg-dark); 
            color: #e5e7eb; 
            /* Patrón sutil para el fondo oscuro */
            background-image: radial-gradient(circle at 1px 1px, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
        }
        .dark #particle-canvas { display: block; }
        .dark .surface {
            background: var(--color-surface-dark);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--color-border-dark);
        }
        .dark .plan-feature-list { color: #d1d5db; }
        .dark .section-subtitle { color: #9ca3af; }
        .dark .card-title { color: #ffffff; }
        .dark .form-label { color: #d1d5db; }

        /* ESTILOS PARA TEMA CLARO (.light) */
        .light body { 
            background-color: #dde2ed; /* Fondo azul muy claro */
            color: #2e415c; 
            /* NUEVO: Fondo cibernético para modo claro: patrón de líneas diagonales muy sutiles */
            background-image: 
                linear-gradient(45deg, rgba(139, 92, 246, 0.05) 25%, transparent 25%, transparent 75%, rgba(139, 92, 246, 0.05) 75%, rgba(139, 92, 246, 0.05)),
                linear-gradient(-45deg, rgba(139, 92, 246, 0.05) 25%, transparent 25%, transparent 75%, rgba(139, 92, 246, 0.05) 75%, rgba(139, 92, 246, 0.05));
            background-size: 40px 40px; /* Tamaño del patrón */
            background-position: 0 0, 20px 20px; /* Desplazamiento para crear la cuadrícula */
        }
        .light #particle-canvas { display: none; }
        .light .surface {
            background-color: var(--color-surface-light);
            border: 1px solid var(--color-border-light);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }
        .light .plan-feature-list { color: #111827; } /* Negro Intenso */
        .light .section-subtitle { color: #4b5563; }
        .light .card-title { color: #111827; } /* Negro Intenso */
        .light .form-label { color: #1f2937; }
        
        h1, h2, h3, .font-orbitron {
            font-family: 'Orbitron', sans-serif;
        }

        #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

        /* Estilos para el scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0d1117; }
        .light ::-webkit-scrollbar-track { background: #e2e8f0; }
        ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

        /* Clases para transiciones */
        .transition-all-smooth { transition: all 0.3s ease-in-out; }
        
        /* Efecto de brillo en hover para tarjetas (YA NO GENERA EL PUNTERO BLANCO) */
        .card-hover-effect:hover {
            transform: translateY(-8px);
        }

        /* Estilos para Pestañas (Tabs) */
        .tab-button.active {
            color: var(--color-primary);
            text-shadow: 0 0 8px var(--color-primary-glow);
        }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Animación para el contenido de las tarjetas */
        @keyframes cardFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-card-in {
            animation: cardFadeIn 0.5s ease-out forwards;
            opacity: 1; /* Asegura que sean visibles por defecto */
        }

        /* Eliminado: .plan-card-interactive::before para quitar el efecto de puntero blanco */
        .plan-card-interactive {
            position: relative; 
            overflow: hidden; 
            transition: transform 0.1s ease-out; /* Velocidad del tilt */
        }
        
        /* =========== ESTILOS PARA TODAS LAS TARJETAS (CYBERNETIC) =========== */
        /* Animación de línea de escaneo para el click */
        @keyframes cyber-scanline-active {
            0% { top: -10%; opacity: 0; }
            5% { top: 10%; opacity: 1; }
            90% { top: 90%; opacity: 1; }
            100% { top: 110%; opacity: 0; }
        }

        /* Animación de línea de escaneo para el hover (más sutil) */
        @keyframes cyber-scanline-hover {
            0% { top: -5%; opacity: 0; }
            50% { top: 50%; opacity: 0.5; }
            100% { top: 105%; opacity: 0; }
        }
        
        @keyframes glitch-border {
            0%, 100% { border-color: var(--color-primary); }
            5% { border-color: transparent; }
            10% { border-color: var(--color-primary); }
            15% { border-color: transparent; }
            20% { border-color: var(--color-primary); }
            25% { border-color: transparent; }
            30% { border-color: var(--color-primary); }
        }

        @keyframes text-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                text-shadow: 0 0 5px var(--color-primary-glow);
                opacity: 1;
            }
            20%, 24%, 55% {
                text-shadow: none;
                opacity: 0.8;
            }
        }

        /* Animación de partículas al hacer clic */
        @keyframes particle-burst {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
        }

        /* Efecto de glitch en el contenido al clic */
        @keyframes content-glitch {
            0% { transform: translate(0, 0); opacity: 1; filter: brightness(1); }
            5% { transform: translate(-2px, -2px); opacity: 0.9; filter: brightness(1.2); }
            10% { transform: translate(2px, 2px); opacity: 1; filter: brightness(1); }
            15% { transform: translate(-1px, 1px); opacity: 0.95; filter: brightness(1.1); }
            20% { transform: translate(0, 0); opacity: 1; filter: brightness(1); }
        }


        .cyber-card-effect {
            position: relative;
            overflow: hidden; /* Asegura que los efectos de scanline y esquinas no se desborden */
            transform-style: preserve-3d;
            border: 1px solid var(--color-border-dark); /* Borde base */
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out; /* Transición para el hover */
        }
        
        /* Efectos al pasar el mouse (hover) */
        .cyber-card-effect:hover {
            animation: glitch-border 1.5s infinite linear; /* Efecto glitch en el borde */
            box-shadow: 0 0 30px var(--color-primary-glow), 0 0 10px var(--color-primary-glow) inset; /* Brillo más intenso al hover */
            transform: translateY(-8px) scale(1.02); /* Pequeño levantamiento y escala */
        }

        .cyber-card-effect .card-title {
             transition: all 0.3s ease-out; /* Suaviza el cambio de color si hay flicker */
        }

        .cyber-card-effect:hover .card-title {
            animation: text-flicker 0.8s infinite alternate; /* Efecto parpadeo en el texto del título */
        }

        .cyber-card-effect .corner-glow {
            position: absolute;
            width: 30px;
            height: 30px;
            border-style: solid;
            border-color: var(--color-primary);
            opacity: 0;
            transition: opacity 0.4s ease-out;
            box-shadow: 0 0 10px var(--color-primary-glow); /* Añade un glow a las esquinas */
            z-index: 20; /* Asegura que estén por encima de la línea de escaneo */
        }

        .cyber-card-effect:hover .corner-glow {
            opacity: 1;
        }
        
        .cyber-card-effect .corner-glow.top-left   { top: -1px; left: -1px; border-width: 3px 0 0 3px; }
        .cyber-card-effect .corner-glow.top-right  { top: -1px; right: -1px; border-width: 3px 3px 0 0; }
        .cyber-card-effect .corner-glow.bottom-left{ bottom: -1px; left: -1px; border-width: 0 0 3px 3px; }
        .cyber-card-effect .corner-glow.bottom-right{ bottom: -1px; right: -1px; border-width: 0 0 3px 3px; }

        /* Scanline para el HOVER (más sutil) */
        /* Nota: Para que esta clase funcione, el scan-line en el HTML DEBE ser un DIV.scan-line sin sub-clases adicionales como "hover-scan" por defecto,
           y la animación se aplica al .cyber-card-effect:hover .scan-line
        */
       

        /* Scanline para el CLICK (más pronunciado y temporal) */
        /* Esta clase se añade temporalmente por JS al hacer click */
        .cyber-card-effect.active-cyber-effect .scan-line { /* Ahora afecta al scan-line general cuando active-cyber-effect está presente */
            /* Sobrescribe la animación del hover */
            opacity: 1;
            animation: cyber-scanline-active 3s ease-in-out forwards; /* Duración fija de 3s, luego desaparece */
            box-shadow: 0 0 20px var(--color-primary-glow); /* Más brillante */
            z-index: 15; /* Más alto que el hover-scan */
        }

        /* Efectos que se activan al hacer clic */
        .cyber-card-effect.active-cyber-effect {
            box-shadow: 0 0 40px var(--color-primary), 0 0 15px var(--color-primary-glow) inset; /* Brillo aún más intenso al click */
            border-color: var(--color-primary);
            animation: none; /* Anula el glitch del hover temporalmente */
        }

        .cyber-card-effect.active-cyber-effect .card-content-wrapper {
            animation: content-glitch 0.4s forwards; /* Glitch en el contenido */
        }

        /* Contenedor para las partículas que aparecen al clic */
        .particle-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Asegura que no bloquee clics */
            z-index: 30; /* Por encima de todo para ser visible */
            overflow: hidden; /* Para que las partículas se desvanezcan al salir */
        }

        .click-particle {
            position: absolute;
            background-color: var(--color-primary); /* O un color de matrix, como verde dinero */
            border-radius: 50%;
            opacity: 0;
            animation: particle-burst 0.8s ease-out forwards; /* Duración de la explosión */
            filter: blur(1px); /* Suaviza las partículas */
        }
        .click-particle.green {
            background-color: var(--color-green-money);
        }

        /* **IMPORTANTE: CLASES PARA EL CONTROL DE MENÚS DESPLEGABLES POR JS** */
        /* Estado oculto por defecto */
        .dropdown-menu {
            display: none; /* Ocultar por defecto */
            opacity: 0; /* Ocultar por defecto */
            transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Transición para un despliegue suave */
            transform: translateY(-10px); /* Ligeramente hacia arriba cuando está oculto */
            pointer-events: none; /* Inactivo cuando está oculto */
        }

        /* Estado visible activado por JS */
        .dropdown-menu.visible {
            opacity: 1 !important; /* Forzar visibilidad */
            display: block !important; /* Forzar display block */
            pointer-events: auto !important; /* Activo cuando está visible */
            transform: translateY(0); /* Posición final */
        }

        /* Icono de flecha en menús */
        .nav-link.dropdown-toggle .fas.fa-chevron-down {
            transition: transform 0.3s;
        }
        .nav-link.dropdown-toggle.open .fas.fa-chevron-down {
            transform: rotate(180deg);
        }

        /* Para asegurar que los enlaces dentro del dropdown sean clicables en móvil */
        .mobile-accordion-content a {
            pointer-events: auto;
        }

        /* Nuevos estilos para la sección de FAQ */
        .faqs__caja {
            background: rgba(13, 17, 23, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(139, 92, 246, 0.2);
            padding: 1.5rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            position: relative;
        }

        .light .faqs__caja {
            background-color: var(--color-surface-light);
            border: 1px solid var(--color-border-light);
        }

        .fqsblue {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.25rem;
            font-weight: 700;
            color: #5cd7f6; /* Color primario */
            font-family: 'Orbitron', sans-serif;
        }

        .fqsblue .faq-icon {
            color: #5cd7f6;
            transition: transform 0.3s ease-in-out;
        }
        
        .faqs__caja.active .fqsblue .faq-icon {
            transform: rotate(180deg);
        }

        .faqs__respuesta {
            display: none; /* Oculto por defecto */
            margin-top: 1rem;
            color: #d1d5db;
            line-height: 1.6;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            max-height: 0;
            padding-top: 0;
        }

        .light .faqs__respuesta {
            color: #4b5563;
        }

        .faqs__respuesta.open {
            display: block;
            max-height: 500px; /* Suficiente para el contenido */
            padding-top: 1rem;
        }
		
		  .scrolling-container {
        display: flex;
        overflow: hidden;
        width: 100%;
		}
		
		.scrolling-wrapper {
			display: flex;
			animation: scroll 60s linear infinite;
			will-change: transform;
		}

		.scrolling-wrapper:hover {
			animation-play-state: paused;
		}

		.scrolling-item {
			flex-shrink: 0;
			width: auto;
			padding: 0 2rem;
		}
		
		.scrolling-item img {
			height: 64px; /* Ajusta este valor si quieres un tamaño diferente */
			filter: grayscale(100%);
			transition: filter 0.3s ease;
		}
		
		.scrolling-item img:hover {
			filter: none;
		}

		@keyframes scroll {
			from { transform: translateX(0); }
			to { transform: translateX(-100%); }
		}
		
		.more-features {
			display: none;
		}
		.more-features.show {
			display: block;
			animation: fadeIn 0.3s ease-in-out;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(-5px); }
			to { opacity: 1; transform: translateY(0); }
		}

/* --- ESTILOS PARA LAS VENTAJAS ANUALES PLEGABLES --- */
.annual-advantages-content {
    /* Clases de Tailwind: overflow-hidden max-h-0 transition-all duration-300 ease-in-out */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
}