/* Configuraciones Globales */
       :root {
            font-family: 'Inter', sans-serif;
            --neon-blue: #00ffff;
            --neon-green: #39ff14;
            --background-dark: #0a0a1a;
            --border-color: #1a1a3a;
            }
        
        /* AÑADIDO: Efecto de desplazamiento suave en toda la página (smooth scrolling) */
        html {
            scroll-behavior: smooth; 
        }

        /* Regla para el logo (permite cambiar tamaño desde aquí) */
        .header-logo {
            width: 60px; /* Ancho deseado */
            height: 60px; /* Alto deseado */
        }

        /* Estilos Neon y Títulos */
        .cyber-title {
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 0.1em;
        }
        .neon-blue-text {
            color: var(--neon-blue);
            text-shadow: 0 0 5px var(--neon-blue), 0 0 10px rgba(0, 255, 255, 0.5);
        }
        .neon-green-text {
            color: var(--neon-green);
            text-shadow: 0 0 5px var(--neon-green), 0 0 10px rgba(57, 255, 20, 0.5);
        }
        
        /* Estilo del Banner de Inicio con fondo de imagen */
        .hero-banner-bg {
            background-image: url('../img/bg/bg_inicio_cristianrepara.png');
            background-size: cover;
            background-position: center;
        }
        
        /* * Estilo del Gradiente para el Fade Out mejorado */
        .fade-out-bottom {
            /* Gradiente que va de transparente a negro (bg-gray-900 del body) */
            background: linear-gradient(to top, 
                rgb(17, 24, 39) 0%,         /* Fondo sólido (gris 900) */
                rgba(17, 24, 39, 0.8) 40%,  /* 80% opaco */
                rgba(17, 24, 39, 0.4) 75%,  /* 40% opaco */
                transparent 100%            /* Totalmente transparente */
            ); 
            height: 250px; /* Altura del gradiente aumentada a 250px */
            position: absolute; /* Aseguramos que se posiciona correctamente */
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 15; /* Asegura que esté sobre el overlay, pero bajo el texto */
        }
        
        /* ESTILO ESPECÍFICO PARA EL BANNER VPS */
        .vps-banner-bg {
            background-image: url('../img/bg/bg_servidoresvps_cristianrepara.png');
            background-size: cover;
            background-position: center;
        }
        
        /* Estilo para las tarjetas de Guías/Cursos */
        .guide-card {
            transition: transform 0.3s, box-shadow 0.3s;
            background-color: #1f2937; /* bg-gray-800 */
        }
        .guide-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(57, 255, 20, 0.2), 0 0 15px rgba(57, 255, 20, 0.5); /* Sombra verde intensa */
        }


        /* Animación del Cursor Parpadeante */
        .blinking-cursor {
            animation: blink 0.8s step-end infinite;
        }

        @keyframes blink {
            from, to {
                color: transparent;
            }
            50% {
                color: var(--neon-blue);
            }
        }

        /* Estilos para los botones (simulando neón/brillo) */
        .btn-neon-green {
            background-color: var(--neon-green);
            color: #000; /* Texto oscuro para contraste */
            font-weight: 700;
            border-radius: 1.5rem; /* Bordes muy redondeados */
            box-shadow: 0 0 10px var(--neon-green), /* Sombra interior suave */
                        0 0 20px rgba(57, 255, 20, 0.7); /* Sombra exterior fuerte */
            transition: all 0.2s ease;
        }

        .btn-neon-green:hover {
            box-shadow: 0 0 15px var(--neon-green),
                        0 0 30px var(--neon-green),
                        0 0 40px rgba(57, 255, 20, 0.8); /* Brillo más intenso al hacer hover */
            transform: scale(1.02);
        }

        .btn-border-neon {
            background-color: transparent;
            color: #fff;
            font-weight: 500;
            border: 2px solid var(--neon-blue);
            border-radius: 0.5rem; /* Bordes menos redondeados */
            box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); /* Sombra de brillo azul */
            transition: all 0.2s ease;
        }

        .btn-border-neon:hover {
            background-color: rgba(0, 255, 255, 0.1); /* Ligero relleno al hacer hover */
            box-shadow: 0 0 10px var(--neon-blue);
            transform: translateY(-2px);
        }
        
        /* Estilos específicos para inputs del formulario */
        .neon-input {
            background-color: #1f2937; /* bg-gray-800 */
            color: white;
            border: 1px solid #374151; /* border-gray-700 */
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .neon-input:focus {
            outline: none;
            border-color: var(--neon-blue);
            box-shadow: 0 0 5px var(--neon-blue);
        }
        
        /* Estilo para las cards de VPS (Efecto de precio destacado) */
        .vps-card {
            transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
            border: 1px solid #1f2937; /* Borde suave */
        }
        .vps-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 255, 255, 0.2), 0 0 15px rgba(0, 255, 255, 0.5); /* Sombra azul intensa */
            border-color: var(--neon-blue);
        }
        
        /* Estilo para los iconos sociales en el footer */
        .social-icon:hover svg {
            color: var(--neon-green);
            filter: drop-shadow(0 0 5px var(--neon-green));
        }

        /* Estilo para el mensaje de error */
        #error-message {
            border: 1px solid #f87171; /* Rojo */
            background-color: #450a0a; /* Rojo oscuro */
            color: #f87171; /* Texto rojo */
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        /* Estilo para el mensaje de carga */
        #loading-message {
            background-color: #166534; /* Verde oscuro */
            color: #dcfce7; /* Verde claro */
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* Efecto Hover (Escritorio) */
        @media (min-width: 1024px) {
            .fill-from-left {
                position: relative;
                overflow: hidden;
                transition: color 0.3s ease-out; 
            }

            .fill-from-left::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 0%;
                height: 100%;
                /* Color de relleno verde neón */
                background-color: rgba(57, 255, 20, 0.5); 
                transition: width 0.3s ease-out;
                z-index: -1; 
            }

            .fill-from-left:hover::after {
                width: 100%; 
            }
        }

        /* Policitas de privacidad */
        /* Estilos para el contenido, haciendo el texto blanco y las cabeceras resaltadas */
        .content-container p, 
        .content-container li {
            color: #ccc;
            line-height: 1.75;
        }
        .content-container h3 {
            color: #e5e7eb; /* Blanco más brillante para subtítulos */
            border-bottom: 1px solid #374151;
            padding-bottom: 0.5rem;
            margin-top: 2rem;
        }