/* --- Configuración General y Reset --- */
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&display=swap');

        :root {
            --color-purple: #2a0f4a;
            --color-background: #0a0a0a;
            --color-surface: rgba(26, 26, 26, 0.8); /* Ligeramente transparente para ver el fondo */
            --color-primary-text: #ffffff;
            --color-secondary-text: #a0a0a0;
            --color-border: #333333;
            --color-accent: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Raleway', sans-serif;
            color: var(--color-primary-text);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
            overflow-x: hidden;
            /* Fondo de gradiente animado */
            background: radial-gradient(ellipse at center, var(--color-purple), var(--color-background));
            background-size: 200% 200%;
            animation: background-pan 25s linear infinite;
        }

        /* --- Contenedor Principal --- */
        .main-container {
            background-color: var(--color-surface);
            padding: 3rem 2rem;
            border-radius: 12px;
            border: 1px solid var(--color-border);
            max-width: 90vw;
            width: 600px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px); /* Efecto de desenfoque para el fondo */
        }

        /* --- Placeholder del Logo --- */
        .logo-placeholder {
            font-size: 2rem;
            font-weight: 900; /* Más grueso con Raleway */
            letter-spacing: 0.5rem;
            /*border: 2px dashed var(--color-border); animation: pulse 4s infinite ease-in-out;*/
            padding: 1rem 2rem;
            margin: 0 auto 2.5rem auto;
            display: inline-block;
            
        }

        /* --- Textos Principales --- */
        h1 {
            font-size: 2.2rem;
            margin-bottom: 1rem;
            font-weight: 700;
            min-height: 3rem; /* Espacio para el texto mientras se escribe */
        }
        
        /* Cursor para el efecto de escritura */
        .typing-cursor {
            display: inline-block;
            width: 3px; /* Más delgado para Raleway */
            height: 2.2rem;
            background-color: var(--color-accent);
            margin-left: 5px;
            animation: blink 0.7s infinite;
            vertical-align: bottom;
        }

        .subtitle {
            font-size: 1.1rem;
            color: var(--color-secondary-text);
            max-width: 450px;
            margin: 0 auto 2.5rem auto;
            line-height: 1.6;
            font-weight: 400;
        }

        /* --- Animación de Engranajes --- */
        .gears-container {
            position: relative;
            height: 120px;
            margin-bottom: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .gear {
            position: absolute;
            fill: white;
            transition: fill 0.3s ease;
        }
        
        .gear.gear-large {
            width: 100px;
            height: 100px;
            animation: spin 12s linear infinite;
            top: 50%;
            left: calc(50% - 45px);
            transform: translateY(-50%);
        }

        .gear.gear-small {
            width: 60px;
            height: 60px;
            animation: spin-reverse 8s linear infinite;
            top: 50%;
            left: calc(50% + 35px);
            transform: translateY(-50%);
        }

        /* --- Redes Sociales --- */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .social-links a {
            color: var(--color-secondary-text);
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .social-links a:hover {
            color: var(--color-accent);
            transform: scale(1.2);
        }

        .social-links svg {
            width: 28px;
            height: 28px;
        }

        /* --- Pie de Página --- */
        footer {
            font-size: 0.8rem;
            color: var(--color-secondary-text);
        }

        /* --- Animaciones (Keyframes) --- */
        @keyframes background-pan {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes spin {
            from { transform: translateY(-50%) rotate(0deg); }
            to { transform: translateY(-50%) rotate(360deg); }
        }

        @keyframes spin-reverse {
            from { transform: translateY(-50%) rotate(0deg); }
            to { transform: translateY(-50%) rotate(-360deg); }
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
            70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* --- Diseño Responsivo para Móviles --- */
        @media (max-width: 640px) {
            .main-container {
                padding: 2rem 1.5rem;
                border: none;
                background: none;
                box-shadow: none;
                backdrop-filter: none;
            }

            h1 {
                font-size: 1.8rem;
                min-height: 5rem; /* Más espacio en móvil para el texto más largo */
            }
            
            .typing-cursor {
                height: 1.8rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .logo-placeholder {
                font-size: 1.5rem;
                padding: 0.8rem 1.5rem;
            }
            
            .gears-container {
                height: 100px;
            }
            
            .gear.gear-large {
                width: 80px;
                height: 80px;
                left: calc(50% - 35px);
            }
            .gear.gear-small {
                width: 50px;
                height: 50px;
                left: calc(50% + 25px);
            }
        }