body {
            background-color: #1a1a1a;
            color: #ffffff;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .engrenagens-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin-bottom: 20px;
        }

        .engrenagem {
            position: absolute;
            /* IMPORTANTE PARA PNG: Garante o giro perfeito no próprio centro */
            transform-origin: 50% 50%; 
        }

        /* Engrenagem Grande (Horário) */
        .grande {
            width: 180px;
            top: 40px;
            left: 20px;
            animation: girar-horario 8s linear infinite;
        }

        /* Engrenagem Pequena (Anti-horário) */
        .pequena {
            width: 180px;
            top: 130px;
            left: 175px;
            animation: girar-anti-horario 8s linear infinite;
        }

        @keyframes girar-horario {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes girar-anti-horario {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }